/* ============================================================================
 *  TOKENS · Sistema de diseño ProinfoHR (traducción web)
 *  Versión: 2026-05-18
 *  Fuente: SAT/design-system.md (Flutter Material 3 → CSS).
 *  Solo variables, reset y reglas globales. Los componentes viven en components.css.
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..700,0..1,-50..200');

:root {
  /* ── MARCA (invariantes) ──────────────────────────────────────────────── */
  --seed:          #2563EB;
  --seed-hover:    #1D4FD8;
  --brand-dark:    #1E3A8A;
  --brand-accent:  #3B82F6;

  /* Gradient oficial — solo hero header, brand panel, splash, logo badge */
  --hero-gradient: linear-gradient(
    135deg,
    var(--brand-dark) 0%,
    var(--seed) 55%,
    var(--brand-accent) 100%
  );

  /* ── SEMÁNTICOS (iguales en light y dark) ─────────────────────────────── */
  --success:       #10B981;
  --success-light: #34D399;
  --warning:       #F59E0B;
  --danger:        #EF4444;
  --danger-hover:  #DC2626;

  /* Acentos secundarios (uso puntual) */
  --indigo:        #6366F1;
  --pink:          #EC4899;

  /* ── PALETA LIGHT (Material 3) ────────────────────────────────────────── */
  --surface:                  #FFFFFF;
  --surface-dim:              #F5F7FB;  /* scaffold + input fill + AppBar bg */
  --surface-container-lowest: #FFFFFF;
  --surface-container-low:    #F9FAFC;
  --surface-container:        #F1F4F9;
  --outline:                  #CBD5E1;
  --outline-variant:          #E5E7EB;
  --on-surface:               #0F172A;
  --on-surface-variant:       #64748B;

  /* ── SOMBRAS (AppShadows del design-system §5) ────────────────────────── */
  /* soft: chips, cards pequeñas, stat pills, filter chip, buscador */
  --shadow-soft:  0 4px 12px rgba(0, 0, 0, 0.05);
  /* card: cards principales, formulario auth, sheets con profundidad extra */
  --shadow-card:  0 8px 24px rgba(0, 0, 0, 0.06),
                  0 1px 4px  rgba(0, 0, 0, 0.03);
  /* brand: SOLO hero card dashboard */
  --shadow-brand: 0 10px 24px rgba(30, 58, 138, 0.18);

  /* ── ESPACIADO (px) ───────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;   /* padding lateral canónico de pantalla */
  --space-8:  18px;   /* padding inputs estándar */
  --space-9:  20px;   /* padding cards principales */
  --space-10: 24px;
  --space-11: 32px;
  --space-12: 36px;
  --space-13: 48px;

  /* ── RADII ────────────────────────────────────────────────────────────── */
  --radius-xs:  4px;    /* checkbox */
  --radius-sm:  10px;   /* indicador interior tabbar, icon container feed */
  --radius-md:  12px;   /* tile opción, snackbar, prefix icon */
  --radius-lg:  14px;   /* inputs, botones, tabbar pill, stat pill, filter chip */
  --radius-xl:  18px;   /* cards de contenido */
  --radius-2xl: 20px;   /* cards principales, alert dialog, hero card */
  --radius-3xl: 24px;   /* top de bottom sheets, card auth */
  --radius-hero-bottom: 28px;

  /* ── DIMENSIONES RECURRENTES ──────────────────────────────────────────── */
  --btn-height:       54px;
  --input-height:     58px;
  --tabbar-height:    52px;
  --icon-size:        22px;
  --avatar-hero:      46px;
  --header-icon-btn:  42px;
  --stat-pill-icon:   34px;
  --quick-icon:       40px;
  --feed-icon:        32px;
  --empty-icon:       64px;
  --app-tile-icon:    44px;
  --logo-badge:       48px;
  --auth-card-max-w:  440px;

  /* ── TIPOGRAFÍA ───────────────────────────────────────────────────────── */
  --font-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  --font-icon: 'Material Symbols Rounded';

  /* ── ANIMACIONES ──────────────────────────────────────────────────────── */
  --duration-press:    120ms;
  --duration-entry:    420ms;
  --duration-shimmer:  1400ms;
  --ease-out-cubic:    cubic-bezier(0.215, 0.610, 0.355, 1.000);
  --ease-out:          cubic-bezier(0, 0, 0.2, 1);

  /* z-index */
  --z-modal:     1000;
  --z-snackbar:  1100;
}

/* ============================================================================
 *  RESET / BASE
 * ========================================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-surface);
  background-color: var(--surface-dim);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

/* ============================================================================
 *  TIPOGRAFÍA GLOBAL — design-system §3
 *  Headings w700+ con letter-spacing negativo. Inter en todo.
 * ========================================================================= */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--on-surface);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: 28px;   letter-spacing: -0.3px; }
h2 { font-size: 24px;   letter-spacing: -0.2px; }
h3 { font-size: 20px;   letter-spacing: -0.2px; }
h4 { font-size: 17px;   letter-spacing: -0.2px; }
h5 { font-size: 15.5px; letter-spacing: -0.2px; }
h6 { font-size: 14px;   letter-spacing: 0; }

p { margin: 0; }

a {
  color: var(--seed);
  text-decoration: none;
  font-weight: 600;
}
a:hover { text-decoration: underline; }

/* Caption ALL-CAPS (≤ 11 px) — design-system §3.3 / §11.7 */
.caption-allcaps {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.text-muted { color: var(--on-surface-variant); }

/* ============================================================================
 *  MATERIAL SYMBOLS ROUNDED — clase utilitaria
 *  Uso: <span class="ms">arrow_forward</span>
 *       <span class="ms ms-filled ms-lg">check_circle</span>
 * ========================================================================= */

.ms {
  font-family: var(--font-icon);
  font-weight: 400;
  font-style: normal;
  font-size: var(--icon-size);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.ms-filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.ms-sm     { font-size: 16px; }
.ms-md     { font-size: 20px; }
.ms-lg     { font-size: 26px; }
.ms-xl     { font-size: 32px; }

/* ============================================================================
 *  UTILIDADES MÍNIMAS
 * ========================================================================= */

.hidden { display: none !important; }

/* El atributo HTML `hidden` debe ganar siempre a reglas como
 * `.field { display: flex }`. Sin esto, ocultar un .field via `hidden`
 * no surte efecto (bug del form de crear usuario en SAT v2). */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Anti-flicker para elementos visibles solo a admin.
 * Uso: <body data-role-loaded="false">
 *      document.body.dataset.roleLoaded = "true"  // cuando auth resuelva */
[data-role-loaded="false"] .admin-only { visibility: hidden; }

/* ============================================================================
 *  ANIMACIONES GLOBALES
 * ========================================================================= */

/* PageEntryAnimation — design-system §7.5 (fade + translateY 18px 420ms) */
@keyframes app-page-entry {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-entry {
  animation: app-page-entry var(--duration-entry) var(--ease-out-cubic) both;
}

/* Shimmer para skeletons — design-system §7.4 */
@keyframes app-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--outline-variant) 0%,
    var(--surface-container-low) 50%,
    var(--outline-variant) 100%
  );
  background-size: 200% 100%;
  animation: app-shimmer var(--duration-shimmer) linear infinite;
  border-radius: 16px;
}