/* ============================================================
   login.css — Estilos globales para la página de Login
   Coloca este archivo en: wwwroot/css/login.css
   No requiere kimberly-styles.css ni variables externas.

   Diseño v2 (2026-07-16) — "caseta de control": tarjeta única
   centrada, modo oscuro, franja escáner + reloj en vivo. Reemplaza
   el split-screen con panel de marca de la v1 (respaldada en
   `_design-backups/login-v1-2026-07-16/`).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── RESET PARA PÁGINAS PÚBLICAS ─────────────────────────── */
/*    LoginLayout.razor renderiza <main class="public-layout">.
      Este archivo se carga globalmente desde App.razor (<head> estático)
      para evitar la inyección tardía vía HeadOutlet que rompía los
      @media en Opera/móvil — ver comentario en App.razor. Por eso las
      reglas de abajo NO deben tocar html/body height: el layout de login
      usa 100dvh (viewport-relativo) y no necesita height:100% en el
      padre; dejarlo aquí afectaría el scroll de TODAS las pantallas de
      la app. Solo se conserva el reset de margin/padding (inocuo, ya lo
      hace Bootstrap). */
html, body {
    margin: 0;
    padding: 0;
}

/* El <main> del LoginLayout ocupa toda la ventana.
   100dvh (dynamic viewport height) además de 100vh: en móvil, 100vh se
   calcula sobre el viewport "grande" (barra de direcciones oculta) sin
   importar si esa barra está visible al momento de cargar la página —
   por eso tras un forceLoad (logout → /auth/signout → /login) el panel
   podía quedar recortado/desalineado hasta que un resize (rotar la
   pantalla) forzaba el recálculo. dvh sigue el viewport visible real sin
   necesitar ese resize. Se declara 100vh primero como fallback para
   navegadores sin soporte de dvh — el navegador se queda con la última
   declaración válida. */
.public-layout {
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   ESCENARIO — fondo de consola + tarjeta centrada
   ══════════════════════════════════════════════════════════ */
.login-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    padding: 2rem 1.25rem;
    overflow-y: auto;
    background: #0A1119;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Resplandor azul sutil arriba + degradado de fondo */
.login-console-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 900px 500px at 50% 8%, rgba(28, 145, 202, 0.16), transparent 60%),
        linear-gradient(180deg, #0E1721 0%, #0A1119 100%);
}

/* Rejilla tenue, recortada hacia el centro con mask-image */
.login-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 85%);
}

/* Barrido vertical lento — sensación de monitor activo — comentado a pedido explícito
   del usuario (2026-09-16): no se quería ver la línea recorriendo el fondo.
.login-scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 1;
    background: linear-gradient(180deg, transparent, rgba(28, 145, 202, 0.06), transparent);
    animation: kmbScan 7s linear infinite;
}

@keyframes kmbScan {
    from { top: -120px; }
    to   { top: 100vh; }
}
*/

/* ══════════════════════════════════════════════════════════
   TARJETA
   ══════════════════════════════════════════════════════════ */
.login-card {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 380px;
    background: #121D28;
    border: 1px solid #1F2E3C;
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(28, 145, 202, 0.08),
        0 30px 70px -20px rgba(0, 0, 0, 0.65),
        0 0 40px -12px rgba(28, 145, 202, 0.18);
    overflow: hidden;
    animation: kmbCardIn 0.55s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes kmbCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Franja superior con logo + barrido de "escáner" */
.login-scan-strip {
    position: relative;
    height: 64px;
    background: linear-gradient(180deg, #0D1822 0%, #121D28 100%);
    border-bottom: 1px solid #1F2E3C;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    /* Barrido sobre la franja del logo — comentado a pedido explícito del usuario
       (2026-09-16): no se quería ver la línea recorriendo el logo de Consede.
    .login-scan-strip::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #1C91CA;
        box-shadow: 0 0 14px 2px rgba(28, 145, 202, 0.8);
        animation: kmbSweep 2.6s ease-in-out infinite;
    }

@keyframes kmbSweep {
    0%, 100% { left: 14%; opacity: 0.9; }
    50%      { left: 86%; opacity: 0.5; }
}
    */

.login-scan-mark {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #0A1119;
    border: 1px solid #1F2E3C;
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    z-index: 1;
}

    .login-scan-mark span {
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: #E7EDF2;
    }

.login-card-body {
    padding: 1.6rem 1.7rem 1.6rem;
}

/* Renglón de estatus: "caseta en línea" + reloj */
.login-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: #7C8B99;
}

.login-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #7FD99A;
}

.login-badge-live .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
    animation: kmbPulse 1.6s ease-in-out infinite;
}

@keyframes kmbPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.login-clock {
    font-variant-numeric: tabular-nums;
}

/* ── Encabezado del formulario ───────────────────────────── */
.form-header {
    margin-bottom: 1.4rem;
}

.form-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #E7EDF2 !important;
    margin: 0 0 0.3rem 0 !important;
    line-height: 1.3 !important;
    font-family: 'Inter', sans-serif !important;
    border: none !important;
    padding: 0 !important;
}

.form-subtitle {
    font-size: 0.82rem !important;
    color: #7C8B99 !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

/* ── ALERTA DE ERROR ─────────────────────────────────────── */
.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    background-color: rgba(192, 39, 45, 0.12);
    border: 1px solid rgba(192, 39, 45, 0.35);
    border-radius: 8px;
    padding: 0.65rem 0.8rem;
    margin-bottom: 1.1rem;
    font-size: 0.82rem;
    color: #F2A0A4;
    animation: loginAlertIn 0.2s ease;
    font-family: 'Inter', sans-serif;
}

@keyframes loginAlertIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.login-alert-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: #C0272D;
    display: flex;
}

.login-alert-text {
    flex: 1;
    line-height: 1.5;
}

.login-alert-close {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: #F2A0A4 !important;
    opacity: 0.7;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 1px;
    transition: opacity 0.15s;
    box-shadow: none !important;
}

    .login-alert-close:hover {
        opacity: 1 !important;
        background: none !important;
    }

/* ── FORMULARIO ──────────────────────────────────────────── */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.login-field-label {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #7C8B99 !important;
    display: block !important;
    margin-bottom: 0 !important;
    font-family: 'Inter', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Wrapper del input con ícono */
.login-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #0A1119;
    border: 1px solid #1F2E3C;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .login-field-wrapper:focus-within {
        border-color: #1C91CA;
        box-shadow: 0 0 0 3px rgba(28, 145, 202, 0.16);
    }

    .login-field-wrapper.field-error-state {
        border-color: #C0272D;
        box-shadow: 0 0 0 3px rgba(192, 39, 45, 0.14);
    }

.login-field-icon {
    position: absolute;
    left: 0.8rem;
    color: #7C8B99;
    display: flex;
    align-items: center;
    pointer-events: none;
    transition: color 0.15s;
    z-index: 1;
}

.login-field-wrapper:focus-within .login-field-icon {
    color: #1C91CA;
}

/* El input — override agresivo de Bootstrap */
.login-field-input,
.login-field-input:focus,
.login-field-input:active,
.login-field-input:not(:placeholder-shown) {
    width: 100% !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    color: #E7EDF2 !important;
    padding: 0.62rem 0.8rem 0.62rem 2.45rem !important;
    border-radius: 8px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

    .login-field-input::placeholder {
        color: #4C5A66 !important;
        font-size: 0.875rem !important;
        opacity: 1 !important;
    }

    .login-field-input:disabled {
        opacity: 0.6 !important;
        cursor: not-allowed !important;
        background: transparent !important;
    }

    /* Quitar el borde verde/rojo que Bootstrap añade en valid/invalid */
    .login-field-input.valid,
    .login-field-input.invalid,
    .login-field-input.modified {
        border: none !important;
        box-shadow: none !important;
        background-image: none !important;
        padding-right: 0.8rem !important;
    }

    /* Input con botón toggle (contraseña) */
    .login-field-input.has-toggle {
        padding-right: 2.6rem !important;
    }

/* Toggle mostrar/ocultar contraseña */
.login-field-toggle {
    position: absolute !important;
    right: 0.6rem !important;
    background: none !important;
    border: none !important;
    padding: 0.3rem !important;
    cursor: pointer !important;
    color: #7C8B99 !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 6px !important;
    transition: color 0.15s !important;
    box-shadow: none !important;
    z-index: 2 !important;
}

    .login-field-toggle:hover {
        color: #1C91CA !important;
        background: none !important;
    }

/* Mensaje de error de validación */
.login-field-error {
    font-size: 0.76rem !important;
    color: #F2A0A4 !important;
    display: block !important;
    margin-top: 0.15rem !important;
    font-family: 'Inter', sans-serif !important;
}

/* ── BOTÓN PRINCIPAL ─────────────────────────────────────── */
.btn-login {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    background-color: #1C91CA !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 0.7rem 1.4rem !important;
    cursor: pointer !important;
    margin-top: 0.15rem !important;
    transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.2s ease !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
}

    .btn-login:hover:not(:disabled) {
        background-color: #2CA0D6 !important;
        box-shadow: 0 0 0 4px rgba(28, 145, 202, 0.18), 0 8px 22px -6px rgba(28, 145, 202, 0.55) !important;
        color: #ffffff !important;
    }

    .btn-login:active:not(:disabled) {
        transform: translateY(1px) !important;
    }

    .btn-login:disabled,
    .btn-login[disabled] {
        opacity: 0.72 !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: none !important;
        background-color: #1C91CA !important;
    }

/* Spinner dentro del botón */
.login-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.30);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: loginSpin 0.65s linear infinite;
    flex-shrink: 0;
}

@keyframes loginSpin {
    to { transform: rotate(360deg); }
}

/* ── SOPORTE ─────────────────────────────────────────────── */
.login-support {
    margin-top: 1.4rem;
    text-align: center;
    font-size: 0.78rem;
    color: #7C8B99;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-family: 'Inter', sans-serif;
}

    .login-support a {
        color: #6BB8DD !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: color 0.15s;
    }

        .login-support a:hover {
            color: #1C91CA !important;
            text-decoration: underline !important;
        }

.login-legal-links {
    margin-top: 0.6rem;
    text-align: center;
    font-size: 0.72rem;
    color: #55606B;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: 'Inter', sans-serif;
}

    .login-legal-links a {
        color: #55606B !important;
        text-decoration: none !important;
    }

        .login-legal-links a:hover {
            color: #6BB8DD !important;
            text-decoration: underline !important;
        }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 460px) {
    .login-card {
        border-radius: 12px;
    }

    .login-card-body {
        padding: 1.4rem 1.25rem 1.4rem;
    }
}

@media (max-width: 640px) {
    .login-wrapper {
        align-items: flex-start;
        padding-top: 3rem;
    }
}

/* Accesibilidad — respeta usuarios que pidieron menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .login-scanline,
    .login-scan-strip::after,
    .login-badge-live .dot,
    .login-card {
        animation: none !important;
    }
}