/* =========================================================================
   Línea de diseño CORE — Login (kernel)
   Tokens y componentes compartidos por todas las vistas de auth:
   view.php, verify_2fa.php, recuperar.php, change_password.php,
   cambiar_contraseña_primerLog.php
   Prefijo: login-
   ========================================================================= */

:root {
    /* Backgrounds */
    --login-bg: #ffffff;
    --login-bg-subtle: #f7f8fc;
    --login-bg-page: #f0f2f5;

    /* Borders */
    --login-border: #dfe3e8;
    --login-border-light: #eef0f4;

    /* Primary (azul corporativo) */
    --login-primary: #2563eb;
    --login-primary-light: #eff6ff;
    --login-primary-dark: #1d4ed8;

    /* Success */
    --login-success: #059669;
    --login-success-light: #ecfdf5;

    /* Danger */
    --login-danger: #dc2626;
    --login-danger-light: #fef2f2;

    /* Warning */
    --login-warning: #d97706;
    --login-warning-light: #fffbeb;

    /* Info */
    --login-info: #0ea5e9;
    --login-info-light: #e0f2fe;

    /* Texto */
    --login-text: #1e293b;
    --login-text-secondary: #475569;
    --login-text-muted: #94a3b8;

    /* Radios */
    --login-radius: 0.625rem;
    --login-radius-sm: 0.375rem;

    /* Sombras */
    --login-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --login-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --login-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --login-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

    /* Espaciado */
    --login-section-gap: 1rem;
}

/* -------------------------------------------------------------------------
   Base — el body del login no comparte layout con el resto del sistema,
   no aplicamos html { font-size: 17px } global porque el login se renderiza
   antes que el navbar/MY_Controller, y el resto del kernel asume 16px.
   ------------------------------------------------------------------------- */
body.login-body {
    background: var(--login-bg-page);
    color: var(--login-text);
    min-height: 100vh;
}

/* -------------------------------------------------------------------------
   Layout A — split (logo + form). Usado en view.php y recuperar.php.
   container-fluid de BS4 trae padding lateral 15px que rompe el split
   edge-to-edge → lo neutralizamos. El row interno también necesita altura
   explícita porque las columnas flex de BS4 no heredan 100vh por sí solas.
   ------------------------------------------------------------------------- */
.login-split {
    min-height: 100vh;
    padding-left: 0;
    padding-right: 0;
}

.login-split > .row {
    min-height: 100vh;
    margin-left: 0;
    margin-right: 0;
}

.login-split__brand {
    background: var(--login-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-split__brand--readonly {
    background: #A8D9FF;
}

.login-split__brand img {
    max-width: 220px;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.login-split__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

/* -------------------------------------------------------------------------
   Layout B — centered. Usado en verify_2fa.php (OTP).
   ------------------------------------------------------------------------- */
.login-centered {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* -------------------------------------------------------------------------
   Card canónica del login.
   ------------------------------------------------------------------------- */
.login-card {
    background: var(--login-bg);
    border: 1px solid var(--login-border-light);
    border-radius: var(--login-radius);
    box-shadow: var(--login-shadow-md);
    padding: 2rem 2rem 1.75rem;
    width: 100%;
    max-width: 420px;
}

.login-card--wide { max-width: 480px; }

.login-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--login-text);
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}

.login-card__subtitle {
    color: var(--login-text-muted);
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
}

.login-card__title--center,
.login-card__subtitle--center { text-align: center; }

/* -------------------------------------------------------------------------
   Form controls del login.
   ------------------------------------------------------------------------- */
.login-card .form-group { margin-bottom: 1rem; }

.login-card label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--login-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.4rem;
    display: block;
}

.login-card .form-control {
    border-radius: var(--login-radius-sm);
    border: 1px solid var(--login-border);
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    color: var(--login-text);
    background: var(--login-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-card .form-control:focus {
    border-color: var(--login-primary);
    box-shadow: 0 0 0 3px var(--login-primary-light);
    outline: none;
}

.login-card .form-control-lg {
    font-size: 1.05rem;
    padding: 0.625rem 0.875rem;
}

/* OTP / código 2FA. Default: estilo TOTP de 6 dígitos (grande, espaciado).
   Variante --recovery: monospace y menor letter-spacing para que XXXX-XXXX-XXXX-XXXX
   (19 chars) entre cómodo en la card. Toggle vía JS en verify_2fa.php. */
.login-otp-input {
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: 0.5em;
    text-align: center;
    padding: 0.875rem 0.5rem;
    font-variant-numeric: tabular-nums;
    text-indent: 0.25em;
}

.login-otp-input--recovery {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    text-indent: 0;
    text-transform: uppercase;
    padding: 0.75rem 0.5rem;
}

.login-otp-input::placeholder {
    color: var(--login-text-muted);
    opacity: 0.6;
}

.login-otp-input--recovery::placeholder {
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    font-family: inherit;
    opacity: 0.55;
}

/* Toggle "Usar código de recuperación" debajo del input */
.login-mode-toggle {
    margin: 0.5rem 0 1.25rem;
    font-size: 0.9rem;
}

.login-mode-toggle .custom-control-label {
    color: var(--login-text-secondary);
    cursor: pointer;
    user-select: none;
}

.login-mode-toggle .custom-control-input:checked ~ .custom-control-label {
    color: var(--login-primary-dark);
    font-weight: 600;
}

.login-mode-toggle .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--login-primary);
    border-color: var(--login-primary);
}

/* -------------------------------------------------------------------------
   Botones — overrides para alinear con tokens del design system.
   ------------------------------------------------------------------------- */
.login-card .btn {
    border-radius: var(--login-radius-sm);
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-card .btn-primary {
    background: var(--login-primary);
    border-color: var(--login-primary);
    color: #fff;
}
.login-card .btn-primary:hover,
.login-card .btn-primary:focus {
    background: var(--login-primary-dark);
    border-color: var(--login-primary-dark);
    box-shadow: 0 0 0 3px var(--login-primary-light);
}

.login-card .btn-block { width: 100%; display: block; }

/* -------------------------------------------------------------------------
   Alerts del login.
   ------------------------------------------------------------------------- */
.login-alert {
    padding: 0.75rem 1rem;
    border-radius: var(--login-radius-sm);
    border-left: 3px solid;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.login-alert--success { background: var(--login-success-light); border-color: var(--login-success); color: #065f46; }
.login-alert--info    { background: var(--login-info-light);    border-color: var(--login-info);    color: #075985; }
.login-alert--warning { background: var(--login-warning-light); border-color: var(--login-warning); color: #92400e; }
.login-alert--danger  { background: var(--login-danger-light);  border-color: var(--login-danger);  color: #991b1b; }

/* -------------------------------------------------------------------------
   Links auxiliares (recuperar, cancelar, ayuda).
   ------------------------------------------------------------------------- */
.login-links {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
}

.login-links a {
    color: var(--login-primary);
    text-decoration: none;
    display: inline-block;
    margin: 0.25rem 0.5rem;
}

.login-links a:hover {
    color: var(--login-primary-dark);
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Toast (errores flash) — alinear con tokens sin tocar Bootstrap toast base.
   ------------------------------------------------------------------------- */
.login-toast .toast-header.bg-danger {
    background: var(--login-danger) !important;
}
.login-toast .toast-header.bg-success {
    background: var(--login-success) !important;
}

/* -------------------------------------------------------------------------
   Toggle ver contraseña — ajustar altura del botón al input-group-lg.
   ------------------------------------------------------------------------- */
.login-card .input-group .btn-outline-secondary {
    border-color: var(--login-border);
    color: var(--login-text-muted);
    background: var(--login-bg);
    padding: 0 0.875rem;
}

.login-card .input-group .btn-outline-secondary:hover {
    color: var(--login-primary);
    border-color: var(--login-primary);
    background: var(--login-primary-light);
}

.login-card .input-group .form-control:focus + .input-group-append .btn-outline-secondary {
    border-color: var(--login-primary);
}

/* -------------------------------------------------------------------------
   Responsive — colapsar split en pantallas chicas.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .login-split__form {
        min-height: 100vh;
    }
    .login-card { box-shadow: var(--login-shadow); }
}