/* ============================================================
   AsistenciaControlER — Design Tokens (10.2.1)
   ------------------------------------------------------------
   Sistema de variables base. Cargar SIEMPRE antes que
   components.css y layouts.css. No reemplaza Bootstrap; lo
   complementa y override sutil de --bs-* para coherencia.
   Paleta: sobria-educativa (azul institucional + verde acción).
   ============================================================ */

:root {
    /* ─── Marca / Brand ─────────────────────────────── */
    --brand-900: #142848;
    --brand-700: #1E3A5F;   /* azul institucional oscuro: headers tabla, hero */
    --brand-500: #2D5BAA;   /* azul medio: links, primary buttons accent */
    --brand-300: #6B8EC9;
    --brand-100: #DCE6F4;
    --brand-50:  #EEF3FA;

    /* ─── Acento (verde acción) ─────────────────────── */
    --accent-700: #0A7551;
    --accent-500: #0E9F6E;  /* CTAs positivos, success destacado */
    --accent-300: #6BCDA9;
    --accent-100: #D5F0E4;

    /* ─── Superficies ───────────────────────────────── */
    --surface-0:  #FFFFFF;  /* cards, modales */
    --surface-50: #F8FAFC;  /* secondary surfaces */
    --bg-app:     #F6F8FB;  /* fondo general app */

    /* ─── Texto / Ink ──────────────────────────────── */
    --ink-900: #0F172A;     /* texto principal */
    --ink-700: #334155;     /* texto secundario */
    --ink-500: #5A6473;     /* texto muted (10.6.6 — AA en bg-app: 5.63:1) */
    --ink-400: #94A3B8;
    --ink-300: #CBD5E1;     /* bordes */
    --ink-200: #E2E8F0;     /* bordes sutiles */
    --ink-100: #F1F5F9;

    /* ─── Estados semánticos ───────────────────────── */
    --success: #16A34A;
    --success-bg: #DCFCE7;
    --warning: #D97706;
    --warning-bg: #FEF3C7;
    --danger:  #DC2626;
    --danger-bg: #FEE2E2;
    --info:    #0284C7;
    --info-bg: #DBEAFE;

    /* ─── Espaciado (escala 4px) ───────────────────── */
    --space-1:  0.25rem;    /*  4px */
    --space-2:  0.5rem;     /*  8px */
    --space-3:  0.75rem;    /* 12px */
    --space-4:  1rem;       /* 16px */
    --space-5:  1.25rem;    /* 20px */
    --space-6:  1.5rem;     /* 24px */
    --space-7:  2rem;       /* 32px */
    --space-8:  4rem;       /* 64px */

    /* ─── Radios ────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-pill: 999px;

    /* ─── Sombras (sobrias) ────────────────────────── */
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.05);
    --shadow-focus: 0 0 0 3px rgba(45, 91, 170, 0.18);

    /* ─── Transiciones ─────────────────────────────── */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ─── Tipografía ───────────────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    --fs-xs:   0.75rem;     /* 12 */
    --fs-sm:   0.875rem;    /* 14 */
    --fs-base: 1rem;        /* 16 */
    --fs-lg:   1.125rem;    /* 18 */
    --fs-xl:   1.25rem;     /* 20 */
    --fs-2xl:  1.5rem;      /* 24 */
    --fs-3xl:  1.875rem;    /* 30 */
    --fs-4xl:  2.25rem;     /* 36 */

    --lh-tight: 1.2;
    --lh-snug:  1.4;
    --lh-base:  1.55;
    --lh-loose: 1.7;

    /* ─── Override sutil de variables Bootstrap 5.3 ─── */
    --bs-primary:        var(--brand-500);
    --bs-primary-rgb:    45, 91, 170;
    --bs-link-color:     var(--brand-500);
    --bs-link-color-rgb: 45, 91, 170;
    --bs-link-hover-color: var(--brand-700);
    --bs-body-color:     var(--ink-900);
    --bs-body-bg:        var(--bg-app);
    --bs-body-font-family: var(--font-sans);
    --bs-border-color:   var(--ink-200);
    --bs-secondary-color: var(--ink-500);
}

/* ─── Aplicar tipografía a body ───────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    color: var(--ink-900);
    background-color: var(--bg-app);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Headings con jerarquía consistente ──────────── */
h1, .h1 { font-weight: 700; line-height: var(--lh-tight); color: var(--ink-900); }
h2, .h2 { font-weight: 600; line-height: var(--lh-tight); color: var(--ink-900); }
h3, .h3 { font-weight: 600; line-height: var(--lh-snug);  color: var(--ink-900); }
h4, .h4 { font-weight: 600; line-height: var(--lh-snug);  color: var(--ink-900); }
h5, .h5 { font-weight: 600; line-height: var(--lh-snug);  color: var(--ink-700); }
h6, .h6 { font-weight: 600; line-height: var(--lh-snug);  color: var(--ink-700); }

/* ─── Links neutros (override sutil) ───────────────── */
a { color: var(--brand-500); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--brand-700); text-decoration: underline; }

/* ─── Foco accesible global ────────────────────────── */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}

/* ─── Reduced motion respect ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}