/* ═══════════════════════════════════════════════════════════════════════════
   TEMA-PAGINAS.CSS — Rediseño minimalista por página (login + dashboard)
   ───────────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de tema.css: es la última capa y manda sobre
   cascade.css / elegante.css (que fijan colores en duro con !important).

   Reglas de la casa:
     · Solo se usan los tokens --t-* de tema.css. Nada de colores fijos
       (se permite rgba() únicamente como superposición neutra).
     · Lo que ya cubre tema.css (body, contenedores, navbar, alertas, foco,
       scrollbars, selector de tema del navbar) NO se repite aquí.
     · Las reglas exclusivas de oscuro se marcan con [data-tema="dark"].
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. LOGIN
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1.1 Fondo — se elimina el degradado azul/morado y las capas animadas
   ─────────────────────────────────────────────────────────────────────────── */
.modern-login {
    background: var(--t-bg) !important;
    background-image: none !important;
    /* La tarjeta se posiciona sola; el body es el marco de referencia del
       selector de tema (position:absolute). */
    position: relative;
}

/* cascade.css pinta dos capas decorativas (radiales animadas + patrón de
   puntos). Minimalismo: fuera. */
.modern-login::before,
.modern-login::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.2 Selector de tema del login (esquina superior derecha)
       Los botones llevan data-tema-set="auto|claro|oscuro"; tema.js los cablea
       por delegación y les añade la clase .active. Sin onclick inline (CSP).
   ─────────────────────────────────────────────────────────────────────────── */
.login-tema {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    display: flex;
    gap: 0.2rem;
    padding: 0.2rem !important;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 999px;
    box-shadow: var(--t-shadow-sm);
}

.login-tema-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0 !important;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--t-text-muted);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--t-transition);
}

.login-tema-btn:hover {
    background: var(--t-primary-soft);
    color: var(--t-primary);
}

/* Opción activa — la marca tema.js según la preferencia guardada */
.login-tema-btn.active {
    background: var(--t-accent-soft);
    color: var(--t-accent);
}

.login-tema-btn:focus-visible {
    box-shadow: var(--t-ring) !important;
    border-radius: 999px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.3 Tarjeta — sobria y centrada. En oscuro NADA blanco.
   ─────────────────────────────────────────────────────────────────────────── */
.login-container {
    padding: 1.5rem !important;
}

.login-card {
    /* cascade.css usa --login-gradient-card (blanco fijo): se anula */
    background: var(--t-surface) !important;
    background-image: none !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-lg) !important;
    box-shadow: var(--t-shadow-md) !important;
    color: var(--t-text) !important;
    max-width: 420px !important;
    padding: 2.25rem 2rem !important;
    backdrop-filter: none !important;
    transform: none !important;
    overflow: visible !important;
}

/* Sin franja degradada superior ni borde cónico giratorio */
.login-card::before,
.login-card::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* Minimalismo: la tarjeta no “salta” al pasar el ratón */
.login-card:hover {
    transform: none !important;
    box-shadow: var(--t-shadow-md) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.4 Logo y marca
       (van DENTRO de la tarjeta: el texto blanco fijo de cascade.css sería
        invisible sobre la superficie clara)
   ─────────────────────────────────────────────────────────────────────────── */
.logo-section {
    margin-bottom: 1.5rem !important;
}

.logo-modern {
    max-height: 60px !important;
    margin-bottom: 0.75rem !important;
    filter: none !important;
}
.logo-modern:hover {
    transform: none !important;
    filter: none !important;
}

.brand-text h2 {
    color: var(--t-text) !important;
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    letter-spacing: -0.2px !important;
}

.brand-text p {
    color: var(--t-text-muted) !important;
    font-size: 0.875rem !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Distintivo "PRUEBAS": en oscuro tema.css fuerza .text-dark a texto claro,
   que sobre el amarillo de .bg-warning no contrasta. Se devuelve a texto
   oscuro usando el token invertido. */
[data-tema="dark"] .modern-login .badge.bg-warning.text-dark {
    color: var(--t-text-invert) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.5 Formulario
   ─────────────────────────────────────────────────────────────────────────── */
.login-form .form-group {
    margin-bottom: 1.1rem !important;
}

.login-form .form-label {
    color: var(--t-text) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 0.35rem !important;
    opacity: 1 !important;
}

/* Campos — superficie sutilmente hundida sobre la tarjeta, borde 1px.
   Solo se tocan padding-top/bottom para no romper el hueco del icono
   (padding-left) que cascade.css ajusta por breakpoint. */
.login-form .form-control-modern {
    background: var(--t-surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius) !important;
    color: var(--t-text) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    font-weight: 400 !important;
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
    transition: var(--t-transition) !important;
}

.login-form .form-control-modern::placeholder {
    color: var(--t-text-faint) !important;
    opacity: 1 !important;
}

.login-form .form-control-modern:hover {
    border-color: var(--t-border-strong) !important;
}

/* Foco: anillo del sistema, sin desplazamiento */
.login-form .form-control-modern:focus {
    background: var(--t-surface) !important;
    border-color: var(--t-primary) !important;
    box-shadow: var(--t-ring) !important;
    border-radius: var(--t-radius) !important;
    transform: none !important;
    outline: none !important;
}

.login-form .input-icon {
    color: var(--t-text-faint) !important;
    transition: color 0.18s ease !important;
}

/* cascade.css intenta colorear el icono con `~` (hermano posterior), pero el
   icono va ANTES del input y nunca casa. :focus-within sí funciona. */
.login-form .input-wrapper:focus-within .input-icon {
    color: var(--t-primary) !important;
    transform: translateY(-50%) !important;
}

/* Botón de ver/ocultar contraseña */
.login-form .password-toggle {
    color: var(--t-text-faint) !important;
    border-radius: var(--t-radius-sm) !important;
    padding: 8px !important;
}
.login-form .password-toggle:hover {
    color: var(--t-primary) !important;
    background: var(--t-primary-soft) !important;
    transform: translateY(-50%) !important;
}
.login-form .password-toggle:active {
    transform: translateY(-50%) !important;
}

/* Enlace "¿Olvidaste tu contraseña?" — el hover de cascade.css usa
   --login-secondary (#1E293B fijo), invisible en oscuro. */
.login-form .form-options {
    margin: 1rem 0 !important;
}
.login-form .forgot-link {
    color: var(--t-primary) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    border-radius: var(--t-radius-sm) !important;
}
.login-form .forgot-link::after {
    content: none !important;
}
.login-form .forgot-link:hover {
    color: var(--t-primary-hover) !important;
    background: var(--t-primary-soft) !important;
    transform: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.6 Botón principal — plano, color primario, sin brillos ni sombras enormes
   ─────────────────────────────────────────────────────────────────────────── */
.login-form .btn-login {
    background: var(--t-primary) !important;
    background-image: none !important;
    color: var(--t-primary-contrast) !important;
    border: 1px solid var(--t-primary) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    transition: var(--t-transition) !important;
}

/* Fuera el barrido de brillo */
.login-form .btn-login::before {
    content: none !important;
    display: none !important;
}

.login-form .btn-login:hover {
    background: var(--t-primary-hover) !important;
    background-image: none !important;
    border-color: var(--t-primary-hover) !important;
    color: var(--t-primary-contrast) !important;
    transform: none !important;
    box-shadow: none !important;
}

.login-form .btn-login:active {
    transform: none !important;
    box-shadow: none !important;
}

.login-form .btn-login:focus,
.login-form .btn-login:focus-visible {
    color: var(--t-primary-contrast) !important;
    box-shadow: var(--t-ring) !important;
    border-radius: var(--t-radius) !important;
}

/* Girador de carga en el color de contraste del botón */
.login-form .btn-login.loading::after {
    border-top-color: var(--t-primary-contrast) !important;
}

/* Botón "Volver al inicio de sesión" del paso MFA */
.login-card .btn-link {
    color: var(--t-primary) !important;
    text-decoration: none !important;
}
.login-card .btn-link:hover {
    color: var(--t-primary-hover) !important;
    text-decoration: underline !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.7 Pie de la tarjeta
   ─────────────────────────────────────────────────────────────────────────── */
.login-footer {
    margin-top: 1.25rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--t-border) !important;
}

/* cascade.css usa --login-success (#10b981 fijo): no llega a 4.5:1 sobre
   fondo claro. Se pasa al token semántico, que sí contrasta en ambos temas. */
.security-badge {
    background: var(--t-success-soft) !important;
    color: var(--t-success) !important;
    border: 1px solid var(--t-success-soft) !important;
    border-radius: 999px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    padding: 0.4rem 0.9rem !important;
    backdrop-filter: none !important;
}
.security-badge:hover {
    background: var(--t-success-soft) !important;
    transform: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.8 Animaciones de entrada — sobrias (cascade.css desplaza 40px y escala)
   ─────────────────────────────────────────────────────────────────────────── */
.fade-in-left,
.fade-in-right {
    animation-name: temaFadeUp !important;
    animation-duration: 0.35s !important;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation-fill-mode: both !important;
}
.fade-in-right {
    animation-delay: 0.06s !important;
}

@keyframes temaFadeUp {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ───────────────────────────────────────────────────────────────────────────
   1.9 Responsivo del login
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .login-card {
        padding: 1.75rem 1.25rem !important;
    }
    .login-tema {
        top: 0.65rem;
        right: 0.65rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. DASHBOARD
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   2.1 Cabecera de bienvenida
   ─────────────────────────────────────────────────────────────────────────── */
.dash-title    { color: var(--t-text) !important; }
.dash-subtitle { color: var(--t-text-muted) !important; }
.dash-welcome  { border-bottom: 1px solid var(--t-border) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   2.2 Panel contenedor
   ─────────────────────────────────────────────────────────────────────────── */
.dash-panel {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-lg) !important;
    box-shadow: var(--t-shadow-sm) !important;
    color: var(--t-text) !important;
}
.dash-panel:hover {
    box-shadow: var(--t-shadow-sm) !important;
    border-color: var(--t-border-strong) !important;
}

.dash-loading { color: var(--t-text-muted) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   2.3 KPI strip — se sustituyen los 4 degradados de color por tarjetas
       neutras; el color semántico queda en el icono (chip -soft).
   ─────────────────────────────────────────────────────────────────────────── */
.kpi-card {
    background: var(--t-surface) !important;
    background-image: none !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow-sm) !important;
    color: var(--t-text) !important;
    transition: var(--t-transition) !important;
}

/* Fuera el círculo blanco decorativo */
.kpi-card::before {
    content: none !important;
    display: none !important;
}

/* Son clicables: hover sobrio, sin salto */
.kpi-card:hover {
    transform: none !important;
    background: var(--t-surface-2) !important;
    border-color: var(--t-border-strong) !important;
    box-shadow: var(--t-shadow-sm) !important;
}

.kpi-card:focus-visible {
    box-shadow: var(--t-ring) !important;
    border-radius: var(--t-radius) !important;
}

/* Icono como chip de color semántico */
.kpi-icon {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--t-radius-sm);
    font-size: 1.05rem !important;
    opacity: 1 !important;
    background: var(--t-surface-3);
    color: var(--t-text-muted);
    margin-bottom: 0.15rem;
}

.kpi-value { color: var(--t-text) !important; }
.kpi-label { color: var(--t-text-muted) !important; opacity: 1 !important; }
.kpi-sub   { color: var(--t-text-muted) !important; opacity: 1 !important; }

/* Variantes: el nombre de la clase mantiene su lectura de color, pero ahora
   sale de los tokens semánticos y solo tiñe el icono. */
.kpi-rojo,
.kpi-verde,
.kpi-dorado,
.kpi-gris {
    background: var(--t-surface) !important;
    background-image: none !important;
    color: var(--t-text) !important;
    box-shadow: var(--t-shadow-sm) !important;
}

.kpi-rojo   .kpi-icon { background: var(--t-danger-soft);  color: var(--t-danger); }
.kpi-verde  .kpi-icon { background: var(--t-success-soft); color: var(--t-success); }
.kpi-dorado .kpi-icon { background: var(--t-accent-soft);  color: var(--t-accent); }
.kpi-gris   .kpi-icon { background: var(--t-surface-3);    color: var(--t-text-muted); }

/* ───────────────────────────────────────────────────────────────────────────
   2.4 Cabecera interna del panel (dp-header)
   ─────────────────────────────────────────────────────────────────────────── */
.dp-header { border-bottom: 1px solid var(--t-border) !important; }
.dp-title  { color: var(--t-text) !important; }

.dp-icon       { color: var(--t-primary) !important; }
.dp-icon-verde { color: var(--t-success) !important; }
.dp-icon-dark  { color: var(--t-text) !important; }

.dp-select {
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-sm) !important;
    color: var(--t-text) !important;
}
.dp-select:focus {
    border-color: var(--t-primary) !important;
    box-shadow: var(--t-ring) !important;
}

.dp-btn-refresh {
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-sm) !important;
    color: var(--t-text-muted) !important;
}
.dp-btn-refresh:hover {
    background: var(--t-primary-soft) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-primary) !important;
}

.dp-meta          { color: var(--t-text-muted) !important; }
.dp-section-title { color: var(--t-text-muted) !important; }
.dp-periodo-lbl   { color: var(--t-text-faint) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   2.5 KPI row interno (dp-kpi-*)
   ─────────────────────────────────────────────────────────────────────────── */
.dp-kpi-item {
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-sm) !important;
    transition: var(--t-transition) !important;
}
.dp-kpi-item:hover {
    transform: none !important;
    background: var(--t-surface-3) !important;
}

.dp-kpi-num { color: var(--t-text) !important; }
.dp-kpi-lbl { color: var(--t-text-muted) !important; }

/* Acentos del kpi row */
.accent-dorado  { border-left: 3px solid var(--t-accent) !important; }
.accent-warning { border-left: 3px solid var(--t-warning) !important; }
.accent-success { border-left: 3px solid var(--t-success) !important; }

.accent-dorado  .dp-kpi-num { color: var(--t-accent) !important; }
.accent-warning .dp-kpi-num { color: var(--t-warning) !important; }
.accent-success .dp-kpi-num { color: var(--t-success) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   2.6 Cajas de estado (dp-estado-box)
       Fondo = token -soft · texto/icono = color pleno (lo heredan
       .dp-estado-num y .dp-estado-lbl vía currentColor).
   ─────────────────────────────────────────────────────────────────────────── */
.dp-estado-box {
    border: 1px solid transparent !important;
    border-radius: var(--t-radius) !important;
    transition: var(--t-transition) !important;
}

/* Clicables: hover sobrio — se refuerza el borde con su propio color */
.dp-estado-box:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: currentColor !important;
}

.dp-estado-box:focus-visible {
    box-shadow: var(--t-ring) !important;
    border-radius: var(--t-radius) !important;
}

/* Sin opacidad: el texto pequeño necesita el color pleno para mantener el
   contraste mínimo sobre el fondo -soft. */
.dp-estado-box i { opacity: 1 !important; }
.dp-estado-num   { color: inherit !important; }
.dp-estado-lbl   { color: inherit !important; opacity: 1 !important; }

.estado-success { background: var(--t-success-soft) !important; border-color: var(--t-success-soft) !important; color: var(--t-success) !important; }
.estado-danger  { background: var(--t-danger-soft)  !important; border-color: var(--t-danger-soft)  !important; color: var(--t-danger)  !important; }
.estado-warning { background: var(--t-warning-soft) !important; border-color: var(--t-warning-soft) !important; color: var(--t-warning) !important; }
.estado-info    { background: var(--t-info-soft)    !important; border-color: var(--t-info-soft)    !important; color: var(--t-info)    !important; }
.estado-primary { background: var(--t-primary-soft) !important; border-color: var(--t-primary-soft) !important; color: var(--t-primary) !important; }
.estado-dark    { background: var(--t-surface-3)    !important; border-color: var(--t-border)       !important; color: var(--t-text)    !important; }
.estado-muted   { background: var(--t-surface-3)    !important; border-color: var(--t-border)       !important; color: var(--t-text-muted) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   2.7 Badges del dashboard (.dash-badge)
   ─────────────────────────────────────────────────────────────────────────── */
.badge-success { background: var(--t-success-soft) !important; color: var(--t-success) !important; border: 1px solid var(--t-success-soft) !important; }
.badge-danger  { background: var(--t-danger-soft)  !important; color: var(--t-danger)  !important; border: 1px solid var(--t-danger-soft)  !important; }
.badge-warning { background: var(--t-warning-soft) !important; color: var(--t-warning) !important; border: 1px solid var(--t-warning-soft) !important; }
.badge-info    { background: var(--t-info-soft)    !important; color: var(--t-info)    !important; border: 1px solid var(--t-info-soft)    !important; }
.badge-dark    { background: var(--t-surface-3)    !important; color: var(--t-text)    !important; border: 1px solid var(--t-border)       !important; }
.badge-muted   { background: var(--t-surface-3)    !important; color: var(--t-text-muted) !important; border: 1px solid var(--t-border)    !important; }

/* ───────────────────────────────────────────────────────────────────────────
   2.8 Barra de filtros de período
   ─────────────────────────────────────────────────────────────────────────── */
.dash-filter-bar {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow-sm) !important;
}

.dash-filter-label { color: var(--t-text-muted) !important; }

.dash-period-btn {
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-border) !important;
    color: var(--t-text-muted) !important;
    transition: var(--t-transition) !important;
}
.dash-period-btn:hover {
    background: var(--t-primary-soft) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-primary) !important;
}
/* El blanco fijo de elegante.css no contrasta sobre el azul aclarado del
   tema oscuro: se usa el token de contraste del primario. */
.dash-period-btn.active {
    background: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-primary-contrast) !important;
    box-shadow: none !important;
}

/* OJO: scripts/index.js marca el rango de fechas inválido con un
   `style.borderColor` en línea. Un !important de autor GANA a los estilos en
   línea sin !important, así que border-color se deja SIN !important para no
   anular ese aviso de error (basta con ir después de elegante.css). */
.dash-date-input {
    background: var(--t-surface-2) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--t-border);
    border-radius: var(--t-radius-sm) !important;
    color: var(--t-text) !important;
}
.dash-date-input:focus {
    background: var(--t-surface) !important;
    border-color: var(--t-primary);
    box-shadow: var(--t-ring) !important;
}

.dash-date-sep { color: var(--t-text-faint) !important; }

.dash-btn-apply {
    background: var(--t-primary) !important;
    color: var(--t-primary-contrast) !important;
    border: 1px solid var(--t-primary) !important;
    border-radius: var(--t-radius-sm) !important;
    box-shadow: none !important;
    transition: var(--t-transition) !important;
}
.dash-btn-apply:hover {
    background: var(--t-primary-hover) !important;
    border-color: var(--t-primary-hover) !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   2.9 Lista y tabla internas del panel
   ─────────────────────────────────────────────────────────────────────────── */
.dp-pag-row:hover  { background: var(--t-surface-2) !important; }
.dp-pag-nombre     { color: var(--t-text) !important; }
.dp-pag-badge {
    background: var(--t-surface-2) !important;
    border: 1px solid var(--t-border) !important;
    color: var(--t-text) !important;
}

.dp-table-wrap { border: 1px solid var(--t-border) !important; border-radius: var(--t-radius-sm) !important; }
.dp-table thead th {
    background: var(--t-surface-2) !important;
    color: var(--t-text-muted) !important;
    border-bottom: 1px solid var(--t-border) !important;
}
.dp-table tbody td {
    color: var(--t-text) !important;
    border-bottom: 1px solid var(--t-border-subtle) !important;
}
.dp-table tbody tr:hover td { background: var(--t-surface-2) !important; }
.dp-empty { color: var(--t-text-faint) !important; }

.dp-footer { border-top: 1px solid var(--t-border-subtle) !important; }
.dp-link   { color: var(--t-primary) !important; }

/* Alerta de morosos */
.dp-alert-morosos {
    background: var(--t-danger-soft) !important;
    border: 1px solid var(--t-danger-soft) !important;
    border-radius: var(--t-radius-sm) !important;
    color: var(--t-danger) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   2.10 Tarjetas de pagadurías (pg-*)
   ─────────────────────────────────────────────────────────────────────────── */
.pg-card {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius) !important;
    transition: var(--t-transition) !important;
}
.pg-card:hover {
    transform: none !important;
    border-color: var(--t-border-strong) !important;
    box-shadow: var(--t-shadow-sm) !important;
}

.pg-card::before        { background: var(--t-border) !important; }
.pg-card-ok::before     { background: var(--t-success) !important; }
.pg-card-warn::before   { background: var(--t-warning) !important; }
.pg-card-danger::before { background: var(--t-danger) !important; }

.pg-nombre  { color: var(--t-text) !important; }
.pg-met-num { color: var(--t-text) !important; }
.pg-met-lbl { color: var(--t-text-muted) !important; }

.pg-riesgo-danger { background: var(--t-danger-soft)  !important; color: var(--t-danger)  !important; border: 1px solid var(--t-danger-soft)  !important; }
.pg-riesgo-warn   { background: var(--t-warning-soft) !important; color: var(--t-warning) !important; border: 1px solid var(--t-warning-soft) !important; }

.pg-bar-row { color: var(--t-text-muted) !important; }
.pg-bar {
    background: var(--t-surface-3) !important;
    border: 1px solid var(--t-border) !important;
}
/* Barras planas (sin degradado) */
.pg-bar-yellow { background: var(--t-accent) !important; background-image: none !important; }
.pg-bar-red    { background: var(--t-danger) !important; background-image: none !important; }
.pg-bar-pct    { color: var(--t-text-muted) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   3. ACCESIBILIDAD — respetar "reducir movimiento"
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .fade-in-left,
    .fade-in-right,
    .login-card,
    .logo-section,
    .login-form,
    .login-footer {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. RECUPERACIÓN DE CONTRASEÑA
      (vistas/olvide_contrasena.php + vistas/reiniciar_contrasena.php)
   ───────────────────────────────────────────────────────────────────────────
   Ambas páginas reutilizan la tarjeta del login (.modern-login, .login-card,
   .login-form, .form-group, .btn-login…), así que la sección 1 ya las cubre
   casi entera. Aquí va solo:
     a) lo que el login NO usa y por tanto nunca se tematizó: .login-header,
        .header-icon, .login-title y .login-subtitle los pinta cascade.css con
        color/degradado FIJO (--login-gradient-btn: #2563EB→#1D4ED8).
     b) las piezas propias del flujo (fortaleza, requisitos, coincidencia…).

   CONTRATO CON EL JS — importante:
   El JavaScript NUNCA fija colores ni estilos en línea. Solo cambia clases
   (.campo-error), atributos (data-nivel, data-cumplido, data-estado, hidden)
   y texto. Todo el color sale de los tokens --t-*, así que el tema oscuro
   funciona sin que el JS sepa nada del tema.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Varias piezas de abajo son flex: su `display` ganaría al [hidden] del
   navegador. Se refuerza para poder ocultar/mostrar solo con el atributo. */
.login-card [hidden] {
    display: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   4.1 Cabecera de la tarjeta
   ─────────────────────────────────────────────────────────────────────────── */
.login-card .login-header {
    margin-bottom: 1.5rem !important;
}

/* cascade.css: círculo de 70px con degradado azul fijo, resplandor azul y un
   ::before que late en bucle. Minimalismo + tokens: chip plano y quieto. */
.login-card .header-icon {
    width: 2.75rem !important;
    height: 2.75rem !important;
    background: var(--t-primary-soft) !important;
    background-image: none !important;
    border-radius: var(--t-radius) !important;
    box-shadow: none !important;
    margin: 0 auto 0.9rem !important;
    transition: none !important;
}
.login-card .header-icon::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}
.login-card .header-icon:hover {
    transform: none !important;
    box-shadow: none !important;
}
.login-card .header-icon i {
    font-size: 1.15rem !important;
    color: var(--t-primary) !important;
}

/* Variantes semánticas del chip de cabecera */
.login-card .header-icon-ok      { background: var(--t-success-soft) !important; }
.login-card .header-icon-ok i    { color: var(--t-success) !important; }
.login-card .header-icon-aviso   { background: var(--t-warning-soft) !important; }
.login-card .header-icon-aviso i { color: var(--t-warning) !important; }

/* cascade.css recorta un degradado sobre el texto (background-clip:text +
   -webkit-text-fill-color:transparent). Se devuelve a texto plano del tema. */
.login-card .login-title {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--t-text) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
    margin-bottom: 0.35rem !important;
}

/* El JS lleva el foco aquí al cambiar de paso (tabindex="-1") */
.login-card .login-title:focus-visible {
    box-shadow: var(--t-ring) !important;
    border-radius: var(--t-radius-sm) !important;
}

/* cascade.css le pone opacity:0.8, que deja --t-text-muted en ~3.4:1 sobre la
   tarjeta clara (mínimo exigido: 4.5:1). Sin opacidad da 5.0:1. */
.login-card .login-subtitle {
    color: var(--t-text-muted) !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
    margin: 0 auto !important;
    max-width: 34ch;
}

/* ───────────────────────────────────────────────────────────────────────────
   4.2 Validación de campos
       Sustituye a  campo.style.borderColor = 'var(--login-error, #C22219)'
   ─────────────────────────────────────────────────────────────────────────── */
.login-form .form-control-modern.campo-error {
    border-color: var(--t-danger) !important;
}
.login-form .form-control-modern.campo-error:focus {
    border-color: var(--t-danger) !important;
    box-shadow: 0 0 0 3px var(--t-danger-soft) !important;
}

.campo-ayuda {
    display: block;
    color: var(--t-text-muted);
    font-size: 0.75rem;
    line-height: 1.45;
    margin-top: 0.4rem;
}

/* Región aria-live: existe siempre en el DOM (para que el lector la anuncie
   al rellenarse) y se colapsa sola mientras esté vacía. */
.campo-error-texto {
    color: var(--t-danger);
    font-size: 0.75rem;
    line-height: 1.45;
    margin: 0.4rem 0 0;
}
.campo-error-texto:empty { display: none; }

/* ───────────────────────────────────────────────────────────────────────────
   4.3 Medidor de fortaleza
       El JS solo escribe data-nivel="0..4" y el rótulo; el ancho y el color
       de la barra salen de aquí (antes: 5 hex fijos por estilo en línea).
   ─────────────────────────────────────────────────────────────────────────── */
.fuerza {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.fuerza-barra {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--t-surface-3);
    border: 1px solid var(--t-border-subtle);
    overflow: hidden;
}

.fuerza-relleno {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--t-border-strong);
    transition: width 0.25s ease, background-color 0.25s ease;
}

/* El rótulo se queda en --t-text a propósito: nombra el nivel con palabras
   ("Muy débil", "Fuerte"…), así que el color no es el único indicador y no
   hace falta tintarlo — --t-success como texto solo llega a 4.36:1 sobre la
   tarjeta clara. El color lo lleva la barra, que es un gráfico. */
.fuerza-texto {
    flex: none;
    color: var(--t-text);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.fuerza[data-nivel="0"] .fuerza-relleno { width:  20%; background: var(--t-danger); }
.fuerza[data-nivel="1"] .fuerza-relleno { width:  40%; background: var(--t-danger); }
.fuerza[data-nivel="2"] .fuerza-relleno { width:  60%; background: var(--t-warning); }
.fuerza[data-nivel="3"] .fuerza-relleno { width:  80%; background: var(--t-info); }
.fuerza[data-nivel="4"] .fuerza-relleno { width: 100%; background: var(--t-success); }

/* ───────────────────────────────────────────────────────────────────────────
   4.4 Requisitos y recomendaciones de la contraseña
   ─────────────────────────────────────────────────────────────────────────── */
.requisitos-bloque {
    background: var(--t-surface-2);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    padding: 0.75rem 0.9rem;
    margin-bottom: 1.1rem;
    text-align: left;
}

.requisitos-titulo {
    color: var(--t-text-muted) !important;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin: 0 0 0.45rem;
}
.requisitos + .requisitos-titulo { margin-top: 0.85rem; }

.requisitos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.requisito {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--t-text-muted) !important;
    font-size: 0.78rem;
    line-height: 1.4;
    transition: var(--t-transition);
}

.requisito-icono {
    flex: none;
    width: 0.9rem;
    font-size: 0.6rem;
    text-align: center;
    color: var(--t-text-muted);
}

/* Cumplido: el verde va en el icono (gráfico: le basta 3:1) y el texto sube a
   --t-text. Además del color, el JS cambia el glifo (círculo → visto) y un
   texto solo-lector, para no señalar el estado únicamente con color. */
.requisito[data-cumplido="si"] {
    color: var(--t-text) !important;
}
.requisito[data-cumplido="si"] .requisito-icono {
    color: var(--t-success);
    font-size: 0.8rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   4.5 Coincidencia de contraseñas
   ─────────────────────────────────────────────────────────────────────────── */
.coincidencia {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.45;
    margin: 0.45rem 0 0;
    color: var(--t-text-muted);
}
.coincidencia:empty { display: none; }

/* Marca redonda decorativa: `content:""` no lo anuncia ningún lector, así que
   el mensaje de texto es la única fuente de información. */
.coincidencia::before {
    content: "";
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    margin-top: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}

/* En "ok" el texto se queda en --t-text (--t-success solo da 4.36:1 sobre la
   tarjeta clara) y el verde va en la marca. --t-danger sí pasa: 4.8:1 claro /
   6.0:1 oscuro, así que el error se tiñe entero. */
.coincidencia[data-estado="ok"] {
    color: var(--t-text) !important;
}
.coincidencia[data-estado="ok"]::before {
    background: var(--t-success);
}
.coincidencia[data-estado="no"] {
    color: var(--t-danger) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   4.6 Estado del formulario y botón deshabilitado
   ─────────────────────────────────────────────────────────────────────────── */
.form-estado {
    color: var(--t-text-muted) !important;
    font-size: 0.75rem;
    line-height: 1.45;
    text-align: center;
    margin: 0.55rem 0 0;
}
.form-estado:empty { display: none; }

/* El botón principal se deshabilita mientras el formulario no sea válido. El
   motivo se escribe en .form-estado (aria-live), nunca solo con el color. */
.login-form .btn-login:disabled {
    background: var(--t-surface-3) !important;
    background-image: none !important;
    border-color: var(--t-border) !important;
    color: var(--t-text-faint) !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
}
.login-form .btn-login:disabled:hover {
    background: var(--t-surface-3) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text-faint) !important;
}

/* Botón secundario: mismo esqueleto que .btn-login, en tono neutro. Sirve
   tanto para <button> como para <a>. */
.login-form .btn-login.btn-login-suave {
    background: var(--t-surface-2) !important;
    background-image: none !important;
    border-color: var(--t-border) !important;
    color: var(--t-text) !important;
    text-decoration: none !important;
}
.login-form .btn-login.btn-login-suave:hover {
    background: var(--t-surface-3) !important;
    border-color: var(--t-border-strong) !important;
    color: var(--t-text) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   4.7 Confirmación "revisa tu correo"
       El backend responde SIEMPRE el mismo mensaje genérico (exista o no el
       usuario) para no permitir enumerarlos: estas notas explican la espera
       sin dar por hecho que la cuenta existe.
   ─────────────────────────────────────────────────────────────────────────── */
.estado-notas {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0.75rem 0.9rem;
    background: var(--t-surface-2);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}
.estado-notas li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--t-text-muted) !important;
    font-size: 0.78rem;
    line-height: 1.45;
}
.estado-notas i {
    flex: none;
    width: 0.9rem;
    margin-top: 0.2rem;
    color: var(--t-text-muted);
    font-size: 0.72rem;
    text-align: center;
}
.estado-notas strong {
    color: var(--t-text) !important;
    font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────────────────
   4.8 Aviso de enlace no válido
       (se abrió /reiniciar_contrasena sin token en la URL)
   ─────────────────────────────────────────────────────────────────────────── */
.aviso-enlace {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--t-warning-soft);
    border: 1px solid var(--t-warning-soft);
    border-radius: var(--t-radius);
    padding: 0.8rem 0.9rem;
    margin-bottom: 1.1rem;
    text-align: left;
}
.aviso-enlace > i {
    flex: none;
    margin-top: 0.15rem;
    color: var(--t-warning);
}
.aviso-enlace strong {
    color: var(--t-text) !important;
    font-size: 0.85rem;
}
/* --t-text-muted sobre el fondo -soft se queda en 4.42:1 en tema claro (justo
   por debajo del mínimo). La jerarquía la marcan el tamaño y el grosor, así
   que el texto va a --t-text: 14.5:1 claro / 11.1:1 oscuro. */
.aviso-enlace p {
    color: var(--t-text) !important;
    font-size: 0.78rem;
    line-height: 1.45;
    margin: 0.2rem 0 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   4.9 Reducir movimiento
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fuerza-relleno,
    .requisito {
        transition: none !important;
    }
}