/* =========================================================
   Auth Pages — login, forgot password, reset password
   ========================================================= */

body {
    font-family: var(--font-family-base);
    background: #f0f4f8;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    margin: 0;
    color: var(--dark-color);
}

/* Utility — requerida por login.js */
.hidden { display: none !important; }

/* ── Card central ─────────────────────────────────────────── */
.auth-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    border: 1px solid #e2e8f0;
    padding: 40px;
}

/* ── Logo + nombre ─────────────────────────────────────────── */
.auth-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 28px;
}

.auth-logo > div { width: 72px; height: 72px; margin-bottom: 10px; }
.auth-logo > div svg { width: 100%; height: 100%; }

.auth-logo h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark-color);
    margin: 0;
}

/* ── Subtítulo ─────────────────────────────────────────────── */
.auth-heading {
    margin-bottom: 20px;
}

.auth-heading h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0 0 4px;
}

.auth-heading p {
    font-size: var(--font-size-sm);
    color: #64748b;
    margin: 0;
}

/* ── Formulario ────────────────────────────────────────────── */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Checkbox Recordarme ───────────────────────────────────── */
.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: #64748b;
    user-select: none;
}

.auth-remember:hover { color: var(--primary-color); }

.auth-remember input[type="checkbox"] {
    accent-color: var(--primary-color);
    width: 14px;
    height: 14px;
}

/* ── Botón ancho completo ──────────────────────────────────── */
.btn-auth {
    width: 100%;
    justify-content: center;
}

/* ── Enlace inferior (volver / olvidé contraseña) ─────────── */
.auth-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: #64748b;
    text-decoration: none;
    margin-top: 4px;
    padding: 4px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-family-base);
    font-weight: 600;
}

.auth-link:hover { color: var(--primary-color); }

/* ── Mensajes de error / éxito ─────────────────────────────── */
.auth-msg {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-msg.error  { background: #fee2e2; border: 1px solid #fca5a5; color: #dc2626; }
.auth-msg.success{ background: #dcfce7; border: 1px solid #86efac; color: #16a34a; }
.auth-msg.info   { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }

/* ── Bloque info 2FA ───────────────────────────────────────── */
.auth-2fa-info {
    padding: 12px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.auth-2fa-info i { color: var(--primary-color); flex-shrink: 0; margin-top: 2px; }

.auth-2fa-info strong {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--dark-color);
    margin-bottom: 2px;
}

.auth-2fa-info span {
    font-size: var(--font-size-xs);
    color: #64748b;
}

/* ── Input especial: código mono centrado ──────────────────── */
.input-mono {
    text-align: center !important;
    letter-spacing: 0.5em !important;
    font-size: 1.1rem !important;
    font-family: monospace !important;
}

/* ── Captcha ───────────────────────────────────────────────── */
.captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.captcha-row img {
    height: 44px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

/* ── Validación contraseña ─────────────────────────────────── */
.pw-checks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.pw-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: #94a3b8;
}

.pw-check.ok { color: var(--success-color); }

/* ── Separador ─────────────────────────────────────────────── */
.auth-divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 4px 0;
}

.auth-card-wide {
    width: 75%;
    max-width: 1200px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    border: 1px solid #e2e8f0;
    padding: 40px;
    max-height: 65vh;
    display: flex;
    flex-direction: column;
}

.auth-card-wide .terms-content {
    max-height: 40vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 24px 0;
    padding: 24px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
}

/* ── Label de aceptación de términos ───────────────────────── */
.terms-accept-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    line-height: 1.5;
}

.dark .terms-accept-label { color: #cbd5e1; }

.terms-accept-label input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* ── Spinner (usado en botones durante loading) ─────────────── */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }