/* =========================================================
   CAMTECH ERP · Login canónico
   Estado productivo consolidado.
   - Identidad institucional + formulario de acceso.
   - Tipografía compartida mediante tokens/componentes canónicos.
   - Responsive móvil por flujo natural, viewport dinámico y safe areas.
   - Compatibilidad con #login-form, #clave, #toggle-password y #login-submit.
   - Estados canónicos: default, hover, focus, filled, autofill, invalid y loading.
   - Feedback y accesibilidad: alertas semánticas, Caps Lock, reduced motion y forced colors.
   ========================================================= */

:root{
    --lg-primary:      #1676D2;
    --lg-primary-dark: #0F4C8A;
    --lg-navy:         #0B3663;
    --lg-navy-deep:    #06284A;
    --lg-teal:         #17A796;

    --lg-surface:  #FFFFFF;
    --lg-bg:       #EEF4FB;
    --lg-bg-soft:  #F7FAFE;
    --lg-ink:      #16324D;
    --lg-heading:  #0F335E;
    --lg-muted:    #5F7188;
    --lg-muted-2:  #8496AC;
    --lg-line:     #DCE6F2;

    --lg-danger:      #C23B4B;
    --lg-danger-soft: #FEF2F2;
    --lg-danger-bd:   #F4C7CD;
    --lg-success:     #16A34A;
    --lg-success-soft:#E9F8EF;
    --lg-success-bd:  #C4E9D2;

    --lg-control-bg:        #FBFCFE;
    --lg-control-bg-hover:  #FFFFFF;
    --lg-control-bg-filled: #F8FAFD;
    --lg-control-border:    #CFDCE9;
    --lg-control-hover:     #B9CBDE;
    --lg-focus-ring:        rgba(22,118,210,.13);

    --lg-r-md: 14px;
    --lg-r-sm: 11px;

    /* Bridge tipográfico canónico. camtech-brand-tokens.css, cargado después,
       consolida estas variables sobre la misma familia institucional del shell. */
    --lg-font-display: var(--camtech-font-display, "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
    --lg-font-body: var(--camtech-font-body, "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
}

*{ box-sizing:border-box; }
html,body{ width:100%; min-height:100%; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
    margin:0;
    font-family:var(--lg-font-body);
    color:var(--lg-ink);
    background:var(--lg-bg);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.login-screen{
    min-height:100vh;
    min-height:100dvh;
    display:grid;
    grid-template-columns:minmax(560px, 1.16fr) minmax(480px, 1fr);
}

/* ============ IDENTIDAD VISUAL DEL PRODUCTO (izquierda) ============ */
.login-brandside{
    position:relative;
    min-width:0;
    overflow:hidden;
    background:var(--lg-navy-deep);
}
.login-brand-visual{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    user-select:none;
    -webkit-user-drag:none;
}

/* ============ FORMULARIO (derecha) ============ */
.login-formside{
    background:var(--lg-surface);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 40px;
}
.login-card{ width:100%; max-width:404px; }
.login-primary-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
}
.login-logo{
    display:block;
    max-width:214px;
    height:auto;
    margin:0;
}
.login-product-mobile{
    display:none;
    margin:0 auto 14px;
    color:var(--lg-primary-dark);
    font-size:var(--camtech-type-helper-compact-size, 11px);
    font-weight:var(--camtech-type-label-weight, 700);
    letter-spacing:.11em;
    text-align:center;
    text-transform:uppercase;
}
.login-card-top{ margin-bottom:30px; text-align:left; }
.login-kicker{
    color:var(--lg-primary);
    font-size:var(--camtech-type-kicker-size, 10px);
    line-height:var(--camtech-type-kicker-line, 1.05);
    font-weight:var(--camtech-type-kicker-weight, 800);
    letter-spacing:var(--camtech-type-kicker-tracking, .08em);
    text-transform:uppercase;
}
/* El heading comparte el componente canónico del shell. */
.login-card-top > .camtech-page-heading{
    margin-top:6px;
}

/* Mensajes del backend (class="alerta <tipo>") */
.alerta{
    position:relative;
    margin-bottom:20px;
    padding:11px 14px 11px 16px;
    border:1px solid transparent;
    border-radius:var(--lg-r-md);
    box-shadow:0 6px 18px rgba(11,54,99,.045);
    font-size:var(--camtech-type-body-compact-size, 13px);
    line-height:var(--camtech-type-body-compact-line, 1.45);
    font-weight:var(--camtech-type-body-compact-weight, 500);
}
.alerta::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:0 999px 999px 0;
    background:currentColor;
    opacity:.72;
}
.alerta.error{
    background:var(--lg-danger-soft);
    color:var(--lg-danger);
    border-color:var(--lg-danger-bd);
}
.alerta.success{
    background:var(--lg-success-soft);
    color:var(--lg-success);
    border-color:var(--lg-success-bd);
}
.grupo{ margin-bottom:18px; }
.grupo label{
    display:block;
    margin-bottom:7px;
    color:var(--lg-heading);
    font-size:var(--camtech-type-label-size, 13px);
    line-height:var(--camtech-type-label-line, 1.2);
    font-weight:var(--camtech-type-label-weight, 700);
    letter-spacing:var(--camtech-type-label-tracking, 0);
}
.control{ position:relative; }
.control .lead-ic{
    position:absolute;
    left:14px;
    top:50%;
    width:18px;
    height:18px;
    stroke:var(--lg-muted-2);
    transform:translateY(-50%);
    pointer-events:none;
    transition:stroke .15s ease, opacity .15s ease;
}
.control.is-filled .lead-ic{ stroke:#6F849B; }
.control:focus-within .lead-ic{ stroke:var(--lg-primary); }
.grupo input{
    width:100%;
    height:50px;
    padding:0 14px 0 42px;
    border:1.5px solid var(--lg-control-border);
    border-radius:var(--lg-r-md);
    outline:none;
    background:var(--lg-control-bg);
    color:var(--lg-ink);
    caret-color:var(--lg-primary-dark);
    font-family:var(--lg-font-body);
    font-size:var(--camtech-type-control-size, 14px);
    line-height:var(--camtech-type-control-line, 1.2);
    font-weight:var(--camtech-type-control-weight, 500);
    letter-spacing:var(--camtech-type-control-tracking, 0);
    transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.grupo input:hover:not(:disabled):not(:focus){
    border-color:var(--lg-control-hover);
    background:var(--lg-control-bg-hover);
}
.control.is-filled input:not(:focus){
    background:var(--lg-control-bg-filled);
}
.grupo input:focus{
    border-color:var(--lg-primary);
    background:#fff;
    box-shadow:0 0 0 4px var(--lg-focus-ring);
}
.grupo input:disabled{
    color:var(--lg-muted);
    background:#F1F5F9;
    border-color:#D9E2EC;
    cursor:not-allowed;
}

/* Chromium/Edge y Safari: el navegador no debe imponer el azul/amarillo de autofill. */
.grupo input:-webkit-autofill,
.grupo input:-webkit-autofill:hover{
    -webkit-text-fill-color:var(--lg-ink);
    caret-color:var(--lg-primary-dark);
    -webkit-box-shadow:0 0 0 1000px var(--lg-control-bg-filled) inset;
    box-shadow:0 0 0 1000px var(--lg-control-bg-filled) inset;
    border-color:var(--lg-control-border);
    transition:background-color 9999s ease-out 0s;
}
.grupo input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--lg-ink);
    -webkit-box-shadow:0 0 0 1000px #fff inset, 0 0 0 4px var(--lg-focus-ring);
    box-shadow:0 0 0 1000px #fff inset, 0 0 0 4px var(--lg-focus-ring);
    border-color:var(--lg-primary);
}
.grupo input:autofill{
    color:var(--lg-ink);
    background:var(--lg-control-bg-filled);
    border-color:var(--lg-control-border);
}
.grupo input:autofill:focus{
    background:#fff;
    border-color:var(--lg-primary);
    box-shadow:0 0 0 4px var(--lg-focus-ring);
}

/* La invalidez aparece después de interacción/intento de envío, no al cargar. */
.grupo input:user-invalid{
    border-color:var(--lg-danger);
    background:#fff;
    box-shadow:0 0 0 3px rgba(194,59,75,.10);
}
.grupo input:user-invalid:focus{
    box-shadow:0 0 0 4px rgba(194,59,75,.12);
}

.field-hint{
    margin:7px 2px 0;
    color:var(--lg-muted);
    font-size:var(--camtech-type-helper-compact-size, 11px);
    line-height:1.35;
    font-weight:600;
}
.caps-lock-hint{
    color:#9A6700;
}
.caps-lock-hint[hidden]{ display:none; }

.password-wrap input{ padding-right:48px; }
.toggle-pass{
    position:absolute;
    right:7px;
    top:50%;
    width:36px;
    height:36px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--lg-muted-2);
    cursor:pointer;
    display:grid;
    place-items:center;
    transform:translateY(-50%);
    transition:color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.toggle-pass:hover{ color:var(--lg-primary-dark); background:rgba(22,118,210,.07); }
.toggle-pass:focus-visible{
    outline:none;
    color:var(--lg-primary-dark);
    background:rgba(22,118,210,.08);
    box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(22,118,210,.28);
}
.toggle-pass svg{ width:20px; height:20px; }
.toggle-pass .eye-closed{ display:none; }
.toggle-pass[aria-pressed="true"]{ color:var(--lg-primary-dark); background:rgba(22,118,210,.07); }
.toggle-pass[aria-pressed="true"] .eye-open{ display:none; }
.toggle-pass[aria-pressed="true"] .eye-closed{ display:block; }

.btn-login{
    position:relative;
    width:100%;
    height:52px;
    margin-top:4px;
    border:0;
    border-radius:var(--lg-r-md);
    background:linear-gradient(135deg, var(--lg-navy) 0%, var(--lg-navy-deep) 100%);
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    box-shadow:0 10px 24px rgba(11,54,99,.22);
    font-family:var(--lg-font-display);
    font-size:var(--camtech-type-cta-size, 15px);
    line-height:var(--camtech-type-cta-line, 1);
    font-weight:var(--camtech-type-cta-weight, 700);
    letter-spacing:var(--camtech-type-cta-tracking, 0);
    transition:transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-login:hover:not(:disabled){
    filter:brightness(1.06);
    box-shadow:0 14px 30px rgba(11,54,99,.28);
}
.btn-login:active:not(:disabled){ transform:translateY(1px); box-shadow:0 8px 20px rgba(11,54,99,.22); }
.btn-login:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(22,118,210,.28), 0 12px 26px rgba(11,54,99,.24);
}
.btn-login:disabled{
    cursor:wait;
    opacity:.88;
    filter:saturate(.82);
    box-shadow:0 8px 20px rgba(11,54,99,.16);
}
.btn-login svg{ width:18px; height:18px; transition:opacity .15s ease, transform .15s ease; }
.btn-login.is-loading svg{ opacity:0; width:0; margin:0; }
.btn-login.is-loading::after{
    content:"";
    width:16px;
    height:16px;
    border:2px solid rgba(255,255,255,.42);
    border-top-color:#fff;
    border-radius:50%;
    animation:login-spin .7s linear infinite;
}
@keyframes login-spin{ to{ transform:rotate(360deg); } }

.login-security{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:22px;
    padding:11px;
    border:1px solid var(--lg-line);
    border-radius:var(--lg-r-sm);
    background:var(--lg-bg-soft);
    color:var(--lg-muted);
    font-size:var(--camtech-type-helper-size, 12px);
    line-height:var(--camtech-type-helper-line, 1.35);
    font-weight:var(--camtech-type-helper-weight, 500);
}
.login-security svg{ width:15px; height:15px; stroke:var(--lg-teal); }

.footer{ margin-top:24px; text-align:center; }
.footer span{ color:var(--lg-muted); font-size:var(--camtech-type-helper-size, 12px); line-height:var(--camtech-type-helper-line, 1.35); font-weight:var(--camtech-type-helper-weight, 500); }
.footer small{ display:block; margin-top:6px; color:var(--lg-muted-2); font-size:var(--camtech-type-helper-compact-size, 11px); line-height:var(--camtech-type-helper-compact-line, 1.35); font-weight:var(--camtech-type-helper-compact-weight, 500); }


/* Desktop: ocupa el viewport completo y conserva una composición operativa compacta. */
@media (min-width:961px){
    html,body{ height:100%; overflow:hidden; }
    .login-screen{
        height:100vh;
        height:100dvh;
        min-height:0;
        overflow:hidden;
    }
    .login-brandside{
        min-height:0;
        overflow:hidden;
    }
    .login-formside{
        min-height:0;
        overflow-y:auto;
        scrollbar-gutter:stable;
        align-items:flex-start;
        padding-top:clamp(64px, 7.5vh, 86px);
        padding-bottom:40px;
    }
    .login-card{
        max-width:400px;
    }
    .login-primary-brand{
        justify-content:flex-start;
        margin-bottom:20px;
        padding-bottom:18px;
        border-bottom:1px solid var(--lg-line);
    }
    .login-logo{
        max-width:236px;
    }
    .login-card-top{
        margin-bottom:22px;
    }
    .login-kicker{
        color:var(--lg-primary-dark);
        font-size:9px;
        font-weight:var(--camtech-font-weight-bold, 700);
        letter-spacing:.11em;
        opacity:.72;
    }
    .login-card-top > .camtech-page-heading{
        max-width:36ch;
    }
    .alerta{
        margin-bottom:16px;
        padding:10px 12px;
    }
    .grupo{
        margin-bottom:14px;
    }
    .grupo label{
        margin-bottom:5px;
    }
    .grupo input{
        height:46px;
    }
    .btn-login{
        height:48px;
        margin-top:2px;
    }
    .login-security{
        justify-content:flex-start;
        margin-top:16px;
        padding:10px 12px;
    }
    .footer{
        margin-top:18px;
        text-align:left;
    }
    .footer small{
        margin-top:4px;
    }
}

/* ============ Responsive integral ============ */
@media (max-width:1180px){
    .login-screen{ grid-template-columns:minmax(500px, 1.08fr) minmax(430px, 1fr); }
    .login-brand-visual{ object-position:48% center; }
}

/* Tablet / notebook estrecho: prioriza autenticación; la pieza promocional se reserva para escritorio. */
@media (max-width:960px){
    html,body{
        height:auto;
        min-height:100%;
        overflow-x:hidden;
        overflow-y:auto;
    }
    .login-screen{
        height:auto;
        min-height:100vh;
        min-height:100dvh;
        grid-template-columns:1fr;
        grid-template-rows:auto 1fr;
    }
    .login-brandside{ display:none; }
    .login-formside{
        min-height:0;
        padding:36px 26px calc(36px + env(safe-area-inset-bottom));
        overflow:visible;
    }
}

/* Teléfono: composición vertical deliberadamente top-biased, pero con
   respiración institucional suficiente en viewport normal. Cuando el teclado
   reduce la altura, los breakpoints compactos recuperan el flujo superior. */
@media (max-width:620px){
    html{
        min-height:100%;
        background:var(--lg-surface);
    }
    body{
        min-height:100%;
        min-height:100dvh;
        background:var(--lg-surface);
        overscroll-behavior-y:contain;
    }
    .login-screen{
        display:block;
        width:100%;
        min-height:100vh;
        min-height:100dvh;
    }
    .login-formside{
        width:100%;
        min-height:100vh;
        min-height:100dvh;
        align-items:flex-start;
        justify-content:center;
        padding:
            max(clamp(64px, 12dvh, 96px), calc(env(safe-area-inset-top) + 34px))
            max(20px, calc(env(safe-area-inset-right) + 20px))
            max(28px, calc(env(safe-area-inset-bottom) + 20px))
            max(20px, calc(env(safe-area-inset-left) + 20px));
        overflow:visible;
    }
    .login-card{
        width:100%;
        max-width:430px;
        margin:0 auto;
    }
    .login-primary-brand{ margin-bottom:13px; }
    .login-logo{ max-width:190px; }
    .login-product-mobile{
        display:block;
        margin-bottom:10px;
        font-size:10.5px;
    }
    .login-card-top{
        margin-bottom:22px;
    }
    .login-kicker{
        font-size:10.5px;
        letter-spacing:.11em;
    }
    .login-card-top > .camtech-page-heading{
        margin-top:8px;
    }
    .alerta{
        margin-bottom:16px;
        padding:11px 12px;
        font-size:13px;
    }
    .grupo{ margin-bottom:16px; }
    .grupo label{
        margin-bottom:6px;
        font-size:13px;
    }
    .grupo input{
        min-height:54px;
        height:54px;
        font-size:16px; /* evita zoom automático de Safari/iOS */
    }
    .toggle-pass{
        width:44px;
        height:44px;
        right:5px;
        touch-action:manipulation;
    }
    .btn-login{
        min-height:56px;
        height:56px;
        margin-top:3px;
        font-size:15px;
        touch-action:manipulation;
    }
    .login-security{
        margin-top:18px;
        min-height:48px;
        padding:10px 12px;
        border-color:rgba(23,167,150,.16);
        background:rgba(23,167,150,.045);
        font-size:12.5px;
        line-height:1.35;
        text-align:center;
    }
    .grupo input,
    .btn-login{
        scroll-margin-block:16px;
    }
    /* Separa el bloque institucional del área de autenticación; los
       breakpoints de poca altura compactan este ritmo cuando aparece el teclado. */
    .footer{
        margin-top:clamp(34px, 6.5dvh, 48px);
        padding-bottom:2px;
    }
    .footer span{
        display:block;
        font-size:12px;
        line-height:1.4;
    }
    .footer small{
        margin-top:5px;
        font-size:11.5px;
        line-height:1.45;
    }
}

/* El teclado móvil no altera tipografía ni oculta contenido por JavaScript.
   Con interactive-widget=resizes-content, 100dvh y overflow natural, el navegador
   reajusta el viewport; los breakpoints de altura sólo compactan espacios. */

/* Teléfonos angostos: preserva áreas táctiles y gana ancho útil. */
@media (max-width:380px){
    .login-formside{
        padding-left:max(14px, calc(env(safe-area-inset-left) + 14px));
        padding-right:max(14px, calc(env(safe-area-inset-right) + 14px));
    }
    .login-logo{ max-width:184px; }
}

/* Altura móvil realmente reducida (incluido teclado cuando el navegador
   redimensiona el layout viewport): compacta sólo espacios no táctiles y
   mantiene scroll natural. El umbral evita compactar teléfonos normales. */
@media (max-width:620px) and (max-height:600px){
    .login-formside{
        min-height:100dvh;
        padding-top:max(22px, calc(env(safe-area-inset-top) + 14px));
        padding-bottom:max(18px, calc(env(safe-area-inset-bottom) + 12px));
    }
    .login-primary-brand{ margin-bottom:9px; }
    .login-logo{ max-width:158px; }
    .login-product-mobile{ margin-bottom:7px; }
    .login-card-top{ margin-bottom:16px; }
    .login-card-top > .camtech-page-heading{
        margin-top:6px;
    }
    .alerta{ margin-bottom:13px; }
    .grupo{ margin-bottom:13px; }
    .login-security{ margin-top:14px; }
    .footer{ margin-top:15px; }
}

/* Móvil horizontal o tablet con muy poca altura: usa el mismo lenguaje
   compacto del teléfono aunque el ancho supere 620 px. */
@media (max-width:960px) and (max-height:560px){
    .login-screen{
        display:block;
        min-height:100dvh;
    }
    .login-formside{
        min-height:100dvh;
        align-items:flex-start;
        padding:
            max(14px, calc(env(safe-area-inset-top) + 10px))
            max(22px, calc(env(safe-area-inset-right) + 18px))
            max(14px, calc(env(safe-area-inset-bottom) + 10px))
            max(22px, calc(env(safe-area-inset-left) + 18px));
        overflow:visible;
    }
    .login-card{
        max-width:460px;
        margin:0 auto;
    }
    .login-primary-brand{ margin-bottom:5px; }
    .login-logo{ max-width:148px; }
    .login-product-mobile{
        display:block;
        margin-bottom:5px;
        font-size:10.5px;
    }
    .login-card-top{ margin-bottom:12px; }
    .login-kicker{ font-size:10.5px; }
    .login-card-top > .camtech-page-heading{
        margin-top:4px;
    }
    .alerta{
        margin-bottom:10px;
        padding:9px 11px;
        font-size:13px;
    }
    .grupo{ margin-bottom:10px; }
    .grupo label{ margin-bottom:4px; }
    .grupo input{
        height:48px;
        min-height:48px;
        font-size:16px;
    }
    .btn-login{
        height:50px;
        min-height:50px;
    }
    .login-security{
        min-height:42px;
        margin-top:10px;
        padding:8px 10px;
    }
    .footer{
        margin-top:10px;
        padding-bottom:0;
    }
    .footer small{ margin-top:3px; }
}

/* ============ Accesibilidad de interacción ============ */
@media (prefers-reduced-motion:reduce){
    .grupo input,
    .control .lead-ic,
    .toggle-pass,
    .btn-login,
    .btn-login svg{
        transition:none !important;
    }
    .btn-login.is-loading::after{
        animation-duration:1.4s;
    }
}

@media (forced-colors: active){
    .grupo input,
    .toggle-pass,
    .btn-login,
    .alerta,
    .login-security{
        forced-color-adjust:auto;
    }
    .grupo input:focus,
    .toggle-pass:focus-visible,
    .btn-login:focus-visible{
        outline:2px solid Highlight;
        outline-offset:2px;
        box-shadow:none;
    }
}