/* Muestra Medica v1.0.16 - Estilos consolidados de defaultNew.css + defaultMMPropuesta.css + estilos inline. */

/* Muestra Medica - Default.aspx. Imagen del panel: css/img/PanelMM.png */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #172334;
    background: radial-gradient(circle at 10% 10%, #e4f5f5, #f5f7f8 68%);
}

.shell {
    display: grid;
    grid-template-columns: 46% 54%;
    width: min(1040px, calc(100vw - 48px));
    min-height: 610px;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(29,38,51,.15);
}

.hero {
    background: #25b4c5 url('/img/PanelMM.png') center center / cover no-repeat;
    color: #fff;
    padding: 46px 44px 34px;
    min-height: 610px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .hero .mm-logo-box {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border-radius: 13px;
        width: 164px;
        height: 74px;
        overflow: hidden;
        padding: 7px 12px;
        margin-bottom: 40px;
    }

        .hero .mm-logo-box img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    .hero .mm-eyebrow {
        font-size: 12px;
        letter-spacing: .12em;
        font-weight: 700;
        margin: 0 0 15px;
        text-transform: uppercase;
    }

    .hero .mm-brand-title {
        font-size: 36px;
        line-height: 1.1;
        letter-spacing: -.025em;
        font-weight: 700;
        margin: 0 0 23px;
    }

    .hero .mm-brand-copy {
        font-size: 15px;
        line-height: 1.65;
        max-width: 325px;
        margin: 0;
    }

    .hero .mm-brand-footer {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 11px;
    }

    .hero .mm-dot {
        display: inline-block;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #fff;
    }

.panel {
    padding: 70px 48px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    position: relative;
    background: #fff;
}

.eyebrow {
    position: absolute;
    left: 48px;
    top: 40px;
    font-size: 11px;
    letter-spacing: .14em;
    color: #8a929c;
    font-weight: 700;
}

.panel h2 {
    font-size: 34px;
    line-height: 1.18;
    letter-spacing: -.035em;
    font-weight: 650;
    margin: 0 0 12px;
}

.intro {
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 28px;
    color: #68717d;
}

.field {
    margin-top: 12px;
}

    .field label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 7px;
    }

    .field input {
        display: block;
        width: 100%;
        height: 46px;
        border: 1px solid #dce7ea;
        border-radius: 9px;
        padding: 10px 13px;
        font-size: 14px;
        background: #fff;
        outline: none;
    }

        .field input:focus {
            border-color: #55bac5;
            box-shadow: 0 0 0 3px rgba(85,186,197,.16);
        }

        .field input:disabled {
            background: #f4f6f8;
            border-color: #dce7ea;
            color: #536879;
            opacity: 1;
        }

.action {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    margin-top: 13px;
    background: #57bac5;
    color: #fff;
    border: 0;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 7px 15px rgba(87,186,197,.18);
}

    .action:hover {
        background: #38a8b6;
    }

    .action:focus-visible {
        outline: 3px solid #a3e4e8;
        outline-offset: 2px;
    }

.links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 11px;
    min-height: 20px;
}

    .links a {
        color: #1596a7;
        text-decoration: none;
        font-size: 12px;
        cursor: pointer;
    }

        .links a:hover {
            text-decoration: underline;
        }

.error {
    display: none;
    background: #f8d9db;
    border: 1px solid #f0b9bc;
    border-radius: 9px;
    padding: 10px 13px;
    margin-top: 12px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: #9d2830;
}

    .error span {
        flex: 1;
        min-width: 0;
        line-height: 1.5;
    }

    .error button {
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: none;
        color: #9d2830;
        cursor: pointer;
        font-size: 21px;
    }

.passbox {
    position: relative;
}

    .passbox input {
        padding-right: 52px;
    }

    .passbox button {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        cursor: pointer;
        color: #1596a7;
        border-radius: 7px;
    }

        .passbox button:hover, .passbox button:focus {
            background: rgba(87,186,197,.1);
            outline: none;
        }

        .passbox button svg {
            width: 21px;
            height: 21px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

.foot {
    border-top: 1px solid #e8eef2;
    margin-top: 18px;
    padding-top: 20px;
    color: #93a1af;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.hidden {
    display: none !important;
}

.ms-logo {
    display: grid;
    grid-template-columns: repeat(2,22px);
    grid-template-rows: repeat(2,22px);
    gap: 3px;
    width: max-content;
    margin: 0 0 28px;
}

    .ms-logo i {
        display: block;
        width: 22px;
        height: 22px;
        border: 0;
        box-shadow: none;
    }

        .ms-logo i:nth-child(1) {
            background: #f25022;
        }

        .ms-logo i:nth-child(2) {
            background: #7fba00;
        }

        .ms-logo i:nth-child(3) {
            background: #00a4ef;
        }

        .ms-logo i:nth-child(4) {
            background: #ffb900;
        }

.panel.ms-active h2 {
    margin-top: 0;
}

.panel.ms-active .intro {
    margin-bottom: 32px;
}

.panel.ms-active #msPanel .action {
    margin-top: 0;
}

.panel.ms-active #msPanel .links {
    margin-top: 12px;
}

.panel.ms-active .foot {
    margin-top: 36px;
}

.retry-auth {
    margin-top: 10px;
}

    .retry-auth .action {
        width: 100%;
    }

@media (max-width: 899px) {
    body {
        display: block;
        padding: 18px 0;
    }

    .shell {
        display: block;
        width: min(580px, calc(100vw - 32px));
        min-height: 0;
        margin: auto;
    }

    .hero {
        min-height: 320px;
        padding: 32px;
    }

        .hero .mm-logo-box {
            margin-bottom: 22px;
        }

        .hero .mm-brand-title {
            font-size: 29px;
        }

        .hero .mm-brand-copy {
            font-size: 13px;
        }

    .panel {
        min-height: 420px;
        padding: 70px 32px 30px;
    }

    .eyebrow {
        left: 32px;
        top: 30px;
    }

    .panel h2 {
        font-size: 30px;
    }
}

@media (max-width: 650px) {
    .shell {
        width: min(95vw,520px);
    }

    .hero {
        min-height: 290px;
        padding: 26px;
    }

        .hero .mm-brand-title {
            font-size: 27px;
        }

    .panel {
        padding: 70px 28px 30px;
    }

    .eyebrow {
        left: 28px;
    }

    .intro {
        font-size: 14px;
    }
}


/* Personalizacion FondoMM (mantener precedencia sobre estilos base) */
/* Muestra Medica: propuesta visual FondoMM. Se conserva la logica del portal. */
html,body{min-height:100%;}
body{margin:0;background:#38444b url('../img/login-bg.webp') center center / cover fixed no-repeat!important;}
body::before{content:'';position:fixed;inset:0;background:rgba(10,23,28,.20);pointer-events:none;z-index:0}
.shell{position:relative!important;z-index:1;display:flex!important;align-items:center!important;justify-content:flex-end!important;min-height:100vh!important;width:100%!important;max-width:none!important;margin:0!important;padding:36px clamp(22px,8vw,140px)!important;background:none!important;box-shadow:none!important;border:0!important;gap:0!important;border-radius:0!important;overflow:visible!important;}
.shell>.hero{display:none!important;}
.shell>.panel{position:relative!important;display:block!important;flex:none!important;width:min(100%,460px)!important;min-height:0!important;margin:0!important;padding:32px 38px 28px!important;background:rgba(54,61,64,.52)!important;color:#fff!important;border:1px solid rgba(255,255,255,.34)!important;border-radius:25px!important;box-shadow:0 24px 60px rgba(0,0,0,.28)!important;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);}
.proposal-brand{text-align:center;margin:0 0 18px;}
.proposal-brand img{display:block;width:100px;height:100px;object-fit:contain;margin:0 auto 3px;}
.proposal-portal{font-size:15px;font-weight:600;letter-spacing:.2px;color:#fff;}
.proposal-redline{width:54px;height:4px;border-radius:8px;background:#55b8c4;margin:14px auto 0;}
.panel .access-topbar-env{position:absolute!important;top:22px;right:24px;left:auto!important;width:auto!important;margin:0!important;display:flex!important;justify-content:flex-end!important;z-index:2;}
.panel .eyebrow{color:#f0f4f6!important;letter-spacing:1.4px;}
.panel .login-environment{background:rgba(35,174,191,.20)!important;border-color:rgba(116,225,230,.8)!important;color:#e4ffff!important;}
.panel h2{text-align:center!important;color:#fff!important;font-size:30px!important;margin:4px 0 12px!important;}
.panel .intro{text-align:center!important;color:rgba(255,255,255,.94)!important;line-height:1.5!important;margin:0 0 23px!important;}
.panel .field label{color:#fff!important;}
.panel input[type=email],.panel input[type=password],.panel input[type=text]{background:rgba(255,255,255,.96)!important;color:#172631!important;border:1px solid #d4dfe2!important;border-radius:10px!important;}
.panel input:focus{outline:2px solid #55b8c4!important;outline-offset:1px;}
.panel .action{background:#55b8c4!important;color:white!important;border:0!important;border-radius:10px!important;font-weight:700!important;box-shadow:0 6px 14px rgba(0,0,0,.16)!important;}
.panel .action:hover{background:#36a9b8!important;}
.panel .links a{color:#fff!important;text-decoration:underline!important;}
.panel .foot{border-color:rgba(255,255,255,.25)!important;color:#e8eff1!important;}
.panel .foot span{color:#e8eff1!important;}


@media(max-width:700px){body{background-position:37% center!important;}.shell{justify-content:center!important;padding:22px 14px!important;}.shell>.panel{width:min(100%,460px)!important;padding:24px 22px!important;border-radius:20px!important;background:rgba(47,55,59,.68)!important;}.proposal-brand img{width:80px;height:80px;}.panel h2{font-size:26px!important;}}

/* v1.0.4 - jerarquia visual y acentos turquesa */
.proposal-brand{margin:8px 0 20px!important;}
.proposal-brand img{width:88px!important;height:88px!important;}
.proposal-portal{font-size:15px!important;}
.proposal-redline{background:#55b8c4!important;width:52px!important;}
.panel .action{background:#55b8c4!important;border:1px solid #55b8c4!important;transition:background .18s ease,box-shadow .18s ease!important;}
.panel .action:hover,.panel .action:focus-visible{background:#36a9b8!important;border-color:#36a9b8!important;}
.panel input[type=email]:focus,.panel input[type=password]:focus,.panel input[type=text]:focus{border-color:#55b8c4!important;outline:2px solid rgba(85,184,196,.55)!important;}
.panel .login-environment{background:rgba(44,170,183,.22)!important;border:1px solid rgba(119,222,228,.9)!important;color:#eaffff!important;}
.panel .links a:hover{color:#91edf0!important;}
@media(max-width:700px){.panel .access-topbar-env{top:14px;right:16px;}.proposal-brand{margin-top:20px!important;}}

/* v1.0.5: icono Microsoft solo dentro del boton y colores turquesa */
.panel .ms-action{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;background:#55b8c4!important;border-color:#55b8c4!important;color:#fff!important;}
.panel .ms-action:hover,.panel .ms-action:focus-visible{background:#36a9b8!important;border-color:#36a9b8!important;}
.ms-button-mark{display:grid;grid-template-columns:repeat(2,9px);grid-template-rows:repeat(2,9px);gap:2px;flex:0 0 auto;}
.ms-button-mark i{display:block;width:9px;height:9px;}
.ms-button-mark i:nth-child(1){background:#f25022;}
.ms-button-mark i:nth-child(2){background:#7fba00;}
.ms-button-mark i:nth-child(3){background:#00a4ef;}
.ms-button-mark i:nth-child(4){background:#ffb900;}

/* v1.0.7: tarjeta mas alta verticalmente; mismo ancho y contenido centrado */
@media (min-width:701px){.shell>.panel{min-height:640px!important;padding-top:58px!important;padding-bottom:58px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;}}
@media (max-width:700px){.shell>.panel{min-height:0!important;display:block!important;}}

/* v1.0.9: aviso moderno con desvanecimiento real (ultimos 700ms) y progreso de 5s */
.panel .error{
    position:relative!important;display:none;align-items:flex-start!important;gap:11px!important;
    background:rgba(255,255,255,.97)!important;color:#5c626c!important;
    border:1px solid rgba(224,226,230,.95)!important;border-left:3px solid #c84254!important;
    border-radius:13px!important;padding:13px 14px 17px!important;
    box-shadow:0 12px 28px rgba(0,0,0,.18)!important;
    opacity:0;visibility:hidden;transform:translateY(7px);
    transition:opacity .7s ease,transform .7s ease,visibility .7s ease!important;
    overflow:hidden;
}
.panel .error.error-visible{opacity:1;visibility:visible;transform:translateY(0);}
.panel .error-icon{flex:0 0 25px;width:25px;height:25px;display:flex;align-items:center;justify-content:center;
    border-radius:8px;background:#fbe8eb;color:#b62d43;font-size:17px;font-weight:800;line-height:1;}
.panel .error-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.panel .error-title{font-size:12px;font-weight:750;line-height:1.25;color:#8d2639;}
.panel .error #errorText{font-size:12px;line-height:1.45;color:#515862;overflow-wrap:anywhere;}
.panel .error-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#f3e3e6;}
.panel .error-progress-fill{display:block;height:100%;width:100%;background:#c84254;transform-origin:left center;transform:scaleX(1);}
.panel .error.error-visible .error-progress-fill{animation:mmAvisoProgreso 5s linear forwards;}
@keyframes mmAvisoProgreso{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.panel .error button{display:none!important;}
@media(prefers-reduced-motion:reduce){.panel .error{transition:opacity .7s linear,visibility .7s linear!important;transform:none!important;}}

/* v1.0.10: logo arriba a la izquierda, titulo completo y distribucion vertical */
.shell>.panel{position:relative!important;}
.panel .proposal-brand{position:absolute!important;top:26px!important;left:30px!important;right:auto!important;width:82px!important;height:82px!important;margin:0!important;z-index:2!important;text-align:left!important;}
.panel .proposal-brand img{display:block!important;width:82px!important;height:82px!important;object-fit:contain!important;margin:0!important;}
.panel .proposal-portal,.panel .proposal-redline{display:none!important;}
.panel h2{font-size:30px!important;line-height:1.16!important;font-weight:750!important;max-width:350px!important;margin:8px auto 16px!important;text-align:center!important;text-wrap:balance;}
@media (min-width:701px){
    .shell>.panel{min-height:640px!important;padding:126px 38px 56px!important;justify-content:center!important;}
}
@media (max-width:700px){
    .shell>.panel{padding-top:112px!important;}
    .panel .proposal-brand{top:19px!important;left:21px!important;width:68px!important;height:68px!important;}
    .panel .proposal-brand img{width:68px!important;height:68px!important;}
    .panel h2{font-size:26px!important;line-height:1.18!important;max-width:100%!important;}
}

/* v1.0.12 - Ajuste de distribucion vertical del login */

@media (min-width: 701px) {

    .shell > .panel {
        min-height: 640px !important;
        padding: 120px 38px 35px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* Subir el titulo de bienvenida */
    .panel h2 {
        margin-top: 18px !important;
        margin-bottom: 44px !important;
    }

    /* Separacion entre titulo y formulario */
    .panel .intro {
        margin-bottom: 26px !important;
    }

    /* Pie de pagina hasta abajo */
    .panel .foot {
        margin-top: auto !important;
        padding-top: 18px !important;
    }
}


/* v1.0.13 - Responsive Muestra Medica */

/* Evitar desplazamiento horizontal */
html, body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

.shell, .shell > .panel {
    box-sizing: border-box !important;
}

/* Mantener el ajuste aprobado en escritorio */
@media (min-width: 1025px) {
    .panel h2 {
        margin-top: 18px !important;
        margin-bottom: 44px !important;
    }
}

/* Tablets */
@media (min-width: 701px) and (max-width: 1024px) {

    .shell {
        padding: 24px !important;
        justify-content: center !important;
    }

        .shell > .panel {
            width: min(100%, 460px) !important;
            min-height: 600px !important;
            padding: 115px 30px 28px !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
        }

    .panel h2 {
        font-size: 28px !important;
        margin: 18px auto 30px !important;
    }

    .panel .foot {
        margin-top: auto !important;
    }
}

/* Telefonos */
@media (max-width: 700px) {

    body {
        background-position: 43% center !important;
        background-attachment: scroll !important;
    }

    .shell {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        width: 100% !important;
        padding: 16px 12px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

        .shell > .panel {
            width: 100% !important;
            max-width: 440px !important;
            min-height: 0 !important;
            padding: 105px 22px 24px !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
            border-radius: 20px !important;
        }

    /* Logo superior izquierdo */
    .panel .proposal-brand {
        top: 20px !important;
        left: 22px !important;
        width: 65px !important;
        height: 65px !important;
    }

        .panel .proposal-brand img {
            width: 65px !important;
            height: 65px !important;
        }

    /* Ambiente superior derecho */
    .panel .access-topbar-env {
        top: 22px !important;
        right: 18px !important;
    }

    /* Titulo */
    .panel h2 {
        font-size: 25px !important;
        line-height: 1.2 !important;
        margin: 12px auto 24px !important;
        max-width: 100% !important;
    }

    .panel .intro {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;
    }

    /* Campos y botones tactiles */
    .panel input[type=email],
    .panel input[type=password],
    .panel input[type=text] {
        width: 100% !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    .panel .action {
        width: 100% !important;
        min-height: 46px !important;
        font-size: 14px !important;
    }

    /* Mensajes de error */
    .panel .error {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Pie de pagina */
    .panel .foot {
        margin-top: 30px !important;
        padding-top: 16px !important;
    }
}

/* Telefonos pequenos */
@media (max-width: 380px) {

    .shell {
        padding: 10px 8px !important;
    }

        .shell > .panel {
            padding: 96px 16px 20px !important;
        }

    .panel h2 {
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }

    .panel .intro {
        font-size: 12px !important;
    }

    .panel .foot {
        font-size: 10px !important;
    }
}

/* Pantallas bajas y telefono horizontal */
@media (max-height: 650px) and (min-width: 701px) {

    .shell {
        min-height: 100vh !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

        .shell > .panel {
            min-height: 0 !important;
            padding-top: 110px !important;
            padding-bottom: 24px !important;
        }
}

/* v1.0.14: indicador de conexion, ambiente y mandante, adaptable */
.panel .access-topbar-env{left:118px!important;right:20px!important;top:20px!important;width:auto!important;max-width:calc(100% - 138px)!important;justify-content:flex-end!important;}
.panel .login-environment{display:inline-block!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:right!important;line-height:1.4!important;padding:5px 9px!important;font-size:10px!important;}
@media(max-width:700px){
 .panel .access-topbar-env{left:100px!important;right:14px!important;top:17px!important;max-width:calc(100% - 114px)!important;}
 .panel .login-environment{font-size:9px!important;padding:4px 7px!important;}
}

/* v1.0.15: avisos turquesa, entrada/salida suave y separacion del pie */
.panel .error {
    margin-top: 12px !important;
    margin-bottom: 20px !important;
    border-left: 3px solid #55b8c4 !important;
    background: rgba(247, 254, 254, .98) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: opacity .7s ease, transform .7s ease, visibility .7s ease !important;
}
.panel .error.error-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
.panel .error-icon {
    background: #e0f5f6 !important;
    color: #198e9b !important;
}
.panel .error-title { color: #197c88 !important; }
.panel .error-progress { background: #dff2f4 !important; }
.panel .error-progress-fill { background: #55b8c4 !important; }
.panel .foot { padding-top: 18px !important; }
@media (prefers-reduced-motion: reduce) {
    .panel .error, .panel .error.error-visible { transform: none !important; }
}


/* Transparencia del panel de login */
.shell > .panel {
    background: rgba(54, 61, 64, 0.35) !important;
}

/* Estilos previamente inline en Default.aspx */
.access-topbar-env{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
        .access-topbar-env .eyebrow{margin:0}
        .login-environment{display:inline-block;flex-shrink:0;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.25;white-space:nowrap;border:1px solid #b8e8ed;background:#e9f9fa;color:#168d9b}
        @media(max-width:480px){.login-environment{font-size:10px;padding:4px 8px}}

/* v1.0.17 - Estabilizar renderizado del logo */

.panel .proposal-brand {
    isolation: isolate !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

    .panel .proposal-brand img {
        display: block !important;
        image-rendering: auto !important;
        filter: none !important;
        -webkit-filter: none !important;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }