/* ==========================================================================
   LOGIN — réplica de wpfSit/View/frmLogin.xaml.

   Las medidas y colores salen del XAML y de App.xaml del SIT:
     · Ventana 900x560, margen 28 para que respire la sombra
     · Tarjeta con esquinas asimétricas 0 / 80 / 0 / 80
     · Sombra #1F2937, blur 40, offset Y 12, opacidad .35
     · Columnas 0.85 : 1
     · Campos alto 54, radio 12, fondo #CED5E0, borde 1.5 #33304668
     · Botones alto 54, radio 12
   ========================================================================== */

.login-fondo {
    min-height:100vh; display:grid; place-items:center;
    background:#E9EDF3; padding:28px;
    font-family:'Inter','Segoe UI',sans-serif;
}

.login-card {
    width:900px; height:560px;
    display:grid; grid-template-columns:0.85fr 1fr;
    border-radius:0 80px 0 80px; overflow:hidden;
    box-shadow:0 12px 40px rgba(31,41,55,.35);
}

/* Feedback de error: el mismo "shake" de ±8/±5 px en 420 ms que ya estaba
   escrito en frmLogin.ShowError (en el WPF quedó sin cablear porque el click
   mostraba un MessageBox; acá se usa, que era la intención del diseño). */
.login-card.shake { animation:shake .42s ease-in-out; }

@keyframes shake {
    0%   { transform:translateX(0); }
    20%  { transform:translateX(-8px); }
    40%  { transform:translateX(8px); }
    60%  { transform:translateX(-5px); }
    80%  { transform:translateX(5px); }
    100% { transform:translateX(0); }
}

/* ---------- PANEL IZQUIERDO (navy hero) ---------- */
.login-hero {
    background:linear-gradient(135deg,#1E2E4A 0%,#0B1626 100%);
    border-radius:0 0 0 80px;
    padding:32px 36px;
    display:flex; flex-direction:column; justify-content:space-between;
}
.login-hero .logo { height:96px; align-self:flex-start; object-fit:contain; }
.login-hero h1 { font-size:56px; font-weight:800; color:#F8FAFC; margin:0; line-height:1.05; }
.login-hero .subrayado { width:64px; height:3px; border-radius:2px; background:#38BDF8; margin:12px 0 14px; }
.login-hero p { max-width:280px; font-size:14px; line-height:21px; color:rgba(248,250,252,.70); margin:0; }
.login-hero .version { font-size:11px; color:rgba(248,250,252,.50); }

/* ---------- PANEL DERECHO (formulario) ---------- */
.login-form {
    background:linear-gradient(180deg,#EEF2F8 0%,#E4EBF3 100%);
    border-radius:0 80px 0 0;
    padding:40px 56px;
    display:flex; flex-direction:column; justify-content:center;
}
.login-form form { display:block; }

.login-form .pill {
    display:flex; align-items:center; gap:10px; margin-bottom:18px;
    font-size:11px; font-weight:600; color:#64748B; letter-spacing:.3px;
}
.login-form .pill i { width:6px; height:6px; border-radius:50%; background:#38BDF8; }

.login-form h2 { font-size:28px; font-weight:700; color:#0F172A; margin:0; }
.login-form h2 b { font-weight:800; }

/* Qué módulo es. Rectángulo de esquina 4 y rótulo en MAYÚSCULA de 10 px:
   misma línea ejecutiva del dashboard, cero cápsulas. */
.login-form .modulo {
    display:inline-block; margin-top:8px; padding:3px 8px;
    border:1px solid #CBD5E1; border-radius:4px;
    font-size:10px; font-weight:700; letter-spacing:.6px; color:#1E2E4A;
    background:rgba(56,189,248,.10);
}

.login-form .sub { font-size:13.5px; line-height:19px; color:#64748B; margin:10px 0 18px; }

.login-form label {
    display:block; font-size:14px; font-weight:700; color:#1E2E4A; margin-bottom:8px;
}
.login-form input {
    width:100%; height:54px; border-radius:12px; padding:0 16px;
    background:#CED5E0; border:1.5px solid rgba(48,70,104,.20);
    font-family:inherit; font-size:16px; font-weight:500; color:#14233B;
    outline:none; margin-bottom:18px;
}
.login-form input:focus { background:#DBE1EA; border-color:#2E415F; }

.login-form .error {
    font-size:12px; color:#DC2626; text-align:right; min-height:18px; margin-bottom:14px;
}

/* Un solo botón: el "Salir" del SIT de escritorio no tiene equivalente en web
   (no hay ventana que cerrar), así que Aceptar ocupa todo el ancho. */
.login-botones { display:grid; grid-template-columns:1fr; gap:10px; }

.btn-primary {
    height:54px; border-radius:12px; border:0; cursor:pointer;
    background:#1E2E4A; color:#F8FAFC;
    font-family:inherit; font-size:15px; font-weight:600;
}
.btn-primary:hover  { background:#14233B; }
.btn-primary:active { background:#0B1626; }

.btn-secondary {
    height:54px; border-radius:12px; cursor:pointer;
    background:#fff; border:1.5px solid #E2E8F0; color:#334155;
    font-family:inherit; font-size:15px; font-weight:500;
}
.btn-secondary:hover { background:#F1F5F9; border-color:#CBD5E1; }

/* ÚNICA concesión de layout del login: en WPF la ventana es de tamaño fijo,
   pero en web tiene que servir en una laptop de 1366x768 con zoom, en una
   tablet parada y en un teléfono. */

/* Pantalla baja: la tarjeta deja de ser de 560 px fijos y crece lo que
   necesite, para que los botones nunca queden por debajo del borde. */
@media (max-height: 620px) {
    .login-fondo { align-items:flex-start; padding:16px; }
    .login-card  { height:auto; }
}

/* Tablet vertical y menos: una sola columna, el hero arriba */
@media (max-width: 960px) {
    .login-fondo { padding:16px; }
    .login-card {
        width:100%; max-width:560px; height:auto;
        grid-template-columns:1fr; border-radius:0 40px 0 40px;
    }
    .login-hero { border-radius:0; padding:24px; gap:16px; }
    .login-hero h1 { font-size:38px; }
    .login-hero .logo { height:64px; }
    .login-hero p { max-width:none; }
    .login-form { border-radius:0; padding:24px; }
}

/* Teléfono */
@media (max-width: 480px) {
    .login-card { border-radius:0 28px 0 28px; }
    .login-hero { padding:20px; }
    .login-hero h1 { font-size:32px; }
    .login-hero .logo { height:52px; }
    .login-hero p { font-size:13px; line-height:19px; }
    .login-form { padding:20px; }
    .login-form h2 { font-size:24px; }
    /* Alto táctil, y el 16 px del input evita el zoom automático de iOS */
    .login-form input { height:50px; font-size:16px; }
    .btn-primary, .btn-secondary { height:50px; }
}

/* AGREGADO MVC: el enlace "Volver" de la página de error genérica usa el
   mismo look del botón Aceptar. */
a.btn-volver { display:block; text-align:center; text-decoration:none; line-height:54px; padding:0; }