/* =========================================================
   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.
   ========================================================= */

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

    --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-info:        #0F4C8A;
    --lg-info-soft:   #EAF3FC;
    --lg-info-bd:     #C9DFF3;

    --lg-r-lg: 22px;
    --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);
}

/* Desktop: el login ocupa exactamente el viewport. Si la altura disponible
   fuese excepcionalmente baja, cada panel gestiona su propio overflow sin
   generar una barra de desplazamiento global. */
@media (min-width:961px){
    html,body{ height:100%; overflow:hidden; }
    .login-screen{
        height:100vh;
        height:100dvh;
        min-height:0;
        overflow:hidden;
    }
    .login-brandside,
    .login-formside{
        min-height:0;
        overflow-y:auto;
        scrollbar-gutter:stable;
    }
}

/* ============ PRODUCTO CANÓNICO (izquierda) ============ */
.login-brandside{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(110% 86% at 13% 4%, rgba(23,167,150,.25), transparent 47%),
        radial-gradient(95% 86% at 92% 100%, rgba(22,118,210,.36), transparent 58%),
        linear-gradient(154deg, #0E426F 0%, var(--lg-navy) 49%, var(--lg-navy-deep) 100%);
    color:#fff;
    padding:clamp(38px, 4vw, 58px) clamp(40px, 4.3vw, 68px);
    display:flex;
    flex-direction:column;
    isolation:isolate;
}
.login-brandside::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background-image:
        linear-gradient(rgba(255,255,255,.034) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.034) 1px, transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(105% 92% at 26% 18%, #000 30%, transparent 82%);
    mask-image:radial-gradient(105% 92% at 26% 18%, #000 30%, transparent 82%);
}
.login-brandside::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-185px;
    top:18%;
    z-index:-1;
    border:1px solid rgba(127,233,218,.10);
    border-radius:50%;
    box-shadow:
        0 0 0 62px rgba(127,233,218,.025),
        0 0 0 124px rgba(255,255,255,.016);
    pointer-events:none;
}

.login-brand-head{
    display:inline-flex;
    align-items:center;
    gap:11px;
    align-self:flex-start;
    padding:7px 16px 7px 7px;
    background:rgba(255,255,255,.065);
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
}
.login-brand-mark{
    width:36px;
    height:36px;
    border-radius:10px;
    flex:none;
    color:#fff;
    background:linear-gradient(150deg, var(--lg-teal) 0%, var(--lg-primary) 100%);
    display:grid;
    place-items:center;
    box-shadow:0 7px 18px rgba(23,167,150,.30);
}
.login-brand-mark svg{ width:20px; height:20px; }
.login-brand-copy{
    display:flex;
    flex-direction:column;
    gap:2px;
    line-height:1.05;
}
.login-brand-copy strong{
    font-family:var(--lg-font-display);
    font-size:var(--camtech-type-nav-size, 14px);
    font-weight:var(--camtech-type-nav-weight, 700);
    letter-spacing:0;
    color:#fff;
}
.login-brand-copy span{
    font-size:var(--camtech-type-kicker-size, 10px);
    font-weight:var(--camtech-type-kicker-weight, 800);
    letter-spacing:var(--camtech-type-kicker-tracking, .08em);
    text-transform:uppercase;
    color:rgba(255,255,255,.52);
}

.login-hero{
    width:min(100%, 610px);
    margin:auto 0;
    padding:clamp(28px, 4vh, 48px) 0;
}
.login-hero-eyebrow{
    margin-bottom:12px;
    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;
    color:rgba(255,255,255,.58);
}
.login-hero h2{
    max-width:15ch;
    margin:0;
    font-family:var(--lg-font-display);
    font-size:var(--camtech-type-display-size, clamp(32px, 2.65vw, 42px));
    font-weight:var(--camtech-type-display-weight, 800);
    line-height:var(--camtech-type-display-line, 1.12);
    letter-spacing:var(--camtech-type-display-tracking, -.032em);
    text-wrap:balance;
}
.login-hero h2 .accent{ color:var(--lg-teal-soft); }
.login-hero > p{
    max-width:52ch;
    margin:16px 0 0;
    color:rgba(255,255,255,.76);
    font-size:var(--camtech-type-body-size, 14px);
    line-height:var(--camtech-type-body-line, 1.5);
    font-weight:var(--camtech-type-body-weight, 500);
}

/* Un único flujo visual: CAMTECH ERP conecta la operación en vez de listar "productos". */
.login-operation{
    margin-top:26px;
    width:min(100%, 590px);
    padding:17px 18px 15px;
    border:1px solid rgba(255,255,255,.115);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.045));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 18px 40px rgba(3,26,50,.12);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
}
.login-operation-head{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    color:rgba(255,255,255,.67);
    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;
}
.login-operation-status{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--lg-teal-soft);
    box-shadow:0 0 0 4px rgba(127,233,218,.08);
}
.login-operation-flow{
    display:grid;
    grid-template-columns:minmax(55px,1fr) 12px minmax(55px,1fr) 12px minmax(55px,1fr) 12px minmax(55px,1fr) 12px minmax(55px,1fr);
    align-items:center;
    gap:5px;
}
.login-flow-step{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    text-align:center;
}
.login-flow-icon{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid rgba(127,233,218,.18);
    border-radius:11px;
    background:rgba(4,35,67,.24);
    color:var(--lg-teal-soft);
}
.login-flow-icon svg{ width:18px; height:18px; }
.login-flow-step strong{
    overflow:hidden;
    max-width:100%;
    color:rgba(255,255,255,.92);
    font-size:var(--camtech-type-helper-compact-size, 11px);
    font-weight:var(--camtech-type-label-weight, 700);
    text-overflow:ellipsis;
    white-space:nowrap;
}
.login-flow-arrow{
    color:rgba(127,233,218,.42);
    font-size:15px;
    line-height:1;
    transform:translateY(-11px);
}
.login-operation-note{
    margin:13px 0 0;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.075);
    color:rgba(255,255,255,.58);
    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-brand-foot{
    display:flex;
    align-items:center;
    gap:20px 24px;
    flex-wrap:wrap;
    padding-top:19px;
    border-top:1px solid rgba(255,255,255,.10);
}
.login-seal{
    display:flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.68);
    font-size:var(--camtech-type-helper-size, 12px);
    font-weight:var(--camtech-type-helper-weight, 500);
    white-space:nowrap;
}
.login-seal svg{
    width:15px;
    height:15px;
    flex:none;
    stroke:var(--lg-teal-soft);
}

/* ============ 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{
    margin-bottom:20px;
    padding:12px 14px;
    border:1px solid transparent;
    border-radius:var(--lg-r-md);
    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.error, .alerta.danger, .alerta.peligro{
    background:var(--lg-danger-soft);
    color:var(--lg-danger);
    border-color:var(--lg-danger-bd);
}
.alerta.exito, .alerta.success{
    background:var(--lg-success-soft);
    color:var(--lg-success);
    border-color:var(--lg-success-bd);
}
.alerta.info, .alerta.aviso{
    background:var(--lg-info-soft);
    color:var(--lg-info);
    border-color:var(--lg-info-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;
}
.grupo input{
    width:100%;
    height:50px;
    padding:0 14px 0 42px;
    border:1.5px solid var(--lg-line);
    border-radius:var(--lg-r-md);
    background:var(--lg-bg-soft);
    color:var(--lg-ink);
    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, background .15s, box-shadow .15s;
}
.grupo input::placeholder{ color:var(--lg-muted-2); }
.grupo input:hover{ border-color:#C6D5E7; }
.grupo input:focus{
    outline:none;
    border-color:var(--lg-primary);
    background:#fff;
    box-shadow:0 0 0 4px rgba(22,118,210,.12);
}

.password-wrap{ position:relative; }
.password-wrap input{ padding-right:48px; }
.toggle-pass{
    position:absolute;
    right:8px;
    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, background .15s;
}
.toggle-pass:hover{ color:var(--lg-primary); background:rgba(22,118,210,.08); }
.toggle-pass:focus-visible{
    outline:2px solid var(--lg-primary);
    outline-offset:2px;
}
.toggle-pass svg{ width:20px; height:20px; }
.toggle-pass .eye-closed{ display:none; }
.toggle-pass[aria-pressed="true"] .eye-open{ display:none; }
.toggle-pass[aria-pressed="true"] .eye-closed{ display:block; }

.btn-login{
    width:100%;
    height:52px;
    margin-top:4px;
    border:0;
    border-radius:var(--lg-r-md);
    background:linear-gradient(135deg, var(--lg-primary) 0%, var(--lg-primary-dark) 100%);
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    box-shadow:0 12px 26px rgba(15,76,138,.28);
    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, box-shadow .12s, filter .12s;
}
.btn-login:hover{ filter:brightness(1.05); box-shadow:0 16px 32px rgba(15,76,138,.34); }
.btn-login:active{ transform:translateY(1px); }
.btn-login:focus-visible{ outline:3px solid rgba(22,118,210,.30); outline-offset:3px; }
.btn-login:disabled{ opacity:.72; cursor:default; filter:none; }
.btn-login svg{ width:18px; height:18px; }

.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: composición operativa compacta y jerarquía institucional. */
@media (min-width:961px){
    .login-formside{
        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;
        text-align:left;
    }
    .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{
        margin-top:6px;
        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-brandside{ padding-left:42px; padding-right:42px; }
    .login-hero h2{ font-size:clamp(30px, 2.7vw, 36px); }
    .login-operation{ padding-left:14px; padding-right:14px; }
}

/* Tablet / notebook estrecho: identidad compacta arriba y formulario prioritario. */
@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{
        min-height:0;
        padding:24px 30px;
        gap:13px;
        overflow:hidden;
    }
    .login-brand-head{ margin:0; }
    .login-hero{
        width:100%;
        margin:0;
        padding:4px 0 0;
    }
    .login-hero-eyebrow{ display:none; }
    .login-hero h2{
        max-width:none;
        font-size:22px;
        line-height:1.18;
        letter-spacing:0;
    }
    .login-hero > p,
    .login-operation,
    .login-brand-foot{ 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-brandside{ display:none; }
    .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;
    }
    /* REV-AUTH-LOGIN-MOBILE-FOOTER-VERTICAL-RHYTHM-FINAL-CANON-01.2
       Separa el bloque institucional del área de autenticación usando una
       fracción acotada del alto disponible. Los breakpoints de altura reducida
       definidos más abajo colapsan 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-brandside{ display:none; }
    .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; }
}

@media (prefers-reduced-motion:reduce){
    .btn-login,
    .grupo input,
    .toggle-pass{ transition:none; }
}