/* =============================================================================
   portal_rrhh - tokens del diseño bento (prefijo --rrhh-).
   Paleta rojos respetando el look actual del portal.
   Dark se activa con [data-theme="dark"] en <html>.

   Cargado DESPUES de rrhh.css legacy, asi estos valores ganan sobre los
   tokens compartidos (ej. --rrhh-accent) en dark mode.
   ============================================================================= */
:root {
    --rrhh-accent: #C62828;
    --rrhh-accent-ink: #FFFFFF;
    --rrhh-ok: #2E7D32;
    --rrhh-warn: #E65100;
    --rrhh-bad: #B71C1C;
    --rrhh-info: #EF5350;

    --rrhh-radius: 16px;
    --rrhh-radius-sm: 12px;
    --rrhh-radius-xs: 8px;

    --rrhh-font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --rrhh-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Light (default) — rojos pastel, mismo look que el portal actual */
    --rrhh-bg: #FFF5F5;
    --rrhh-bg-raised: #FFEBEE;
    --rrhh-card: #FFFFFF;
    --rrhh-card-2: #FFF9F9;
    --rrhh-border: #FFCDD2;
    --rrhh-border-strong: #EF9A9A;
    --rrhh-ink: #2D1010;
    --rrhh-ink-mid: #795548;
    --rrhh-ink-dim: #A88684;
    --rrhh-ink-faint: #E8C6C6;
    --rrhh-hair: rgba(198, 40, 40, 0.08);
    --rrhh-grid-dot: rgba(198, 40, 40, 0.04);
    --rrhh-glow: 0 10px 30px rgba(198, 40, 40, 0.18);
    --rrhh-chip-bg: rgba(198, 40, 40, 0.06);
    --rrhh-chip-border: rgba(198, 40, 40, 0.12);
}

:root[data-theme="dark"] {
    /* === Fondos con CONTRASTE FUERTE entre niveles (estilo apps modernas
           como Linear/Vercel). bg casi negro, cards claramente elevadas,
           bordes bien visibles. Tint rojizo minimo (solo identidad). === */
    --rrhh-bg: #131013;              /* fondo casi negro */
    --rrhh-bg-raised: #1C181B;       /* zonas elevadas */
    --rrhh-card: #262128;            /* cards — CLARAMENTE distintas de bg */
    --rrhh-card-2: #332D36;          /* tiles anidadas / hover */

    /* === Bordes bien marcados === */
    --rrhh-border: #4D4553;
    --rrhh-border-strong: #6B6173;

    /* === Texto con alto contraste WCAG AA+ en TODOS los niveles.
           ink-mid (secundario) y ink-dim (terciario) suben mucho para que
           el texto NO bold sea legible en cards. === */
    --rrhh-ink: #F5F1F4;             /* primario ~96% blanco */
    --rrhh-ink-mid: #D0C4CC;         /* secundario ~80% — labels de seccion */
    --rrhh-ink-dim: #A298A3;         /* terciario ~63% — muted "Bienvenido," */
    --rrhh-ink-faint: #3A3339;       /* lineas MUY sutiles */

    /* === Accents BRILLANTES para que resalten sobre fondos oscuros === */
    --rrhh-accent: #FF6B6B;
    --rrhh-accent-ink: #FFFFFF;
    --rrhh-info: #FFB4B4;             /* info coral mas claro */
    --rrhh-ok: #7FD88F;
    --rrhh-warn: #FFC47D;
    --rrhh-bad: #FF8080;

    /* === Decoracion con mas presencia === */
    --rrhh-hair: rgba(255, 255, 255, 0.12);    /* mas visible en dividers */
    --rrhh-grid-dot: rgba(255, 255, 255, 0.05);
    --rrhh-glow: 0 0 40px rgba(255, 107, 107, 0.25);
    --rrhh-chip-bg: rgba(255, 107, 107, 0.18);
    --rrhh-chip-border: rgba(255, 107, 107, 0.42);

    /* === Override de vars LEGACY (rrhh.css las usa via var() para estilar body,
           form-control, alerts y text-muted). Si no las override, el body
           hereda el rose legacy #FFCDD2 en vez del gris-blanco del DS. === */
    --rrhh-text: #F5F1F4;                /* = --rrhh-ink, body color */
    --rrhh-text-muted: #D0C4CC;          /* = --rrhh-ink-mid, muted text */
    --rrhh-card-bg: #262128;             /* = --rrhh-card, para .card-rrhh */
    --rrhh-card-border: #4D4553;         /* = --rrhh-border, para .card-rrhh */
    --rrhh-primary: #FF6B6B;             /* rojo primario alineado al accent */
    --rrhh-primary-light: #FFA4A4;
    --rrhh-primary-dark: #E54D4D;
}