/* ============================================================================
 *  TOKENS · NeatEduca Backoffice — dirección "Editorial / Suizo"
 *  Versión: 2026-06-18
 *  Filosofía: superficies planas + bordes hairline (sin sombras blandas),
 *  esquinas pequeñas, neutros cálidos (zinc/papel), un único acento cobalto,
 *  display grotesca (Space Grotesk) y números monoespaciados tabulares.
 *  Solo variables, reset y reglas globales. Componentes → components.css.
 *  Capa de patrones editorial → editorial.css (se carga la última).
 * ========================================================================= */

/* NeatTech · "Neat Precision" — Satoshi (títulos) · Hanken Grotesk (cuerpo) · Spline Sans Mono (datos) */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..600,0..1,-50..200');

:root {
  /* ── MARCA (NeatTech "Neat Precision") ────────────────────────────────────
   * `--brand` = ÚNICA variable a cambiar por producto. Todo lo demás se deriva.
   * NeatEduca = verde fresco #13A452. El resto de tokens de acento apuntan a --brand. */
  --brand:         #13A452;
  --brand-ink:     color-mix(in srgb, var(--brand) 82%, #000);   /* oscuro (cabecera tabla, hover) */
  --brand-soft:    color-mix(in srgb, var(--brand) 9%, #fff);    /* tinte muy claro (hover fila, focus) */
  --brand-line:    color-mix(in srgb, var(--brand) 26%, #fff);
  --brand-accent:  color-mix(in srgb, var(--brand) 55%, #fff);   /* claro para acentos sobre oscuro */

  --seed:          var(--brand);
  --seed-hover:    var(--brand-ink);
  --seed-soft:     var(--brand-soft);

  /* Superficies de marca oscuras (login/otros contextos) = verde muy oscuro */
  --brand-dark:    #0B3A24;
  --navy:          #0B3A24;
  --navy-2:        #124A2E;
  --on-navy:       #A2C3AE;
  --acc-navy:      color-mix(in srgb, var(--brand) 60%, #fff);

  /* "Hero"/marca = degradado petrol (para glass en dashboard/login) */
  --hero-gradient: linear-gradient(155deg, color-mix(in srgb, var(--brand) 88%, #fff) 0%, var(--brand) 48%, var(--brand-ink) 100%);

  /* ── SEMÁNTICOS (Meridian) ────────────────────────────────────────────── */
  --success:       #0E9F6E;
  --success-light: #1FB985;
  --warning:       #B45309;
  --danger:        #DC2626;
  --danger-hover:  #B91C1C;

  --indigo:        #4F46E5;
  --pink:          #C9398A;

  /* Estados "pill" (fondo suave + tinta) para tablas modernas */
  --pill-success-bg: #E9F6EF; --pill-success-fg: #127A4E;
  --pill-warn-bg:    #FBF1E6; --pill-warn-fg:    #9A5B12;
  --pill-danger-bg:  #FBECEA; --pill-danger-fg:  #A9362B;
  --pill-info-bg:    var(--brand-soft); --pill-info-fg: var(--brand-ink);
  --pill-neutral-bg: #EEF0F1; --pill-neutral-fg: #565C61;

  /* ── NEUTROS (porcelana fría "Neat Precision") ────────────────────────── */
  --surface:                  #FFFFFF;
  --surface-dim:              #F3F4F4;  /* canvas (scaffold) */
  --surface-container-lowest: #FFFFFF;
  --surface-container-low:    #FAFBFB;
  --surface-container:        #EEF0F1;
  --outline:                  #D5D9DB;  /* línea media */
  --outline-variant:          #E7E9EA;  /* hairline */
  --on-surface:               #15181B;  /* tinta */
  --on-surface-variant:       #565C61;  /* gris medio */

  /* ── SOMBRAS (nítidas y sutiles, premium) ─────────────────────────────── */
  --shadow-soft:  0 1px 2px rgba(16, 20, 26, 0.05);
  --shadow-card:  0 1px 2px rgba(16, 20, 26, 0.05), 0 6px 18px rgba(16, 20, 26, 0.05);
  --shadow-brand: 0 10px 28px rgba(11, 58, 36, 0.20);
  --shadow-pop:   0 12px 28px rgba(16, 20, 26, 0.14);  /* menús/modales/drawer */
  --ring:         0 0 0 1px var(--outline-variant);  /* hairline ring util */

  /* ── ESPACIADO (px) ───────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;
  --space-8:  18px;
  --space-9:  20px;
  --space-10: 24px;
  --space-11: 32px;
  --space-12: 36px;
  --space-13: 48px;

  /* ── RADII (Meridian: algo más suaves que el editorial) ───────────────── */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-xl:  14px;
  --radius-2xl: 16px;
  --radius-3xl: 18px;
  --radius-hero-bottom: 2px;

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

  /* ── TIPOGRAFÍA ───────────────────────────────────────────────────────── */
  --font-base:    'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;
  --font-display: 'Satoshi', var(--font-base);
  --font-mono:    'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --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: 16px;   /* base subida (antes 14) — look más moderno/legible */
  line-height: 1.55;
  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 — titulares con display grotesca, tracking ceñido
 * ========================================================================= */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--on-surface);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
h5 { font-size: 16px; }
h6 { font-size: 14.5px; letter-spacing: 0; }

p { margin: 0; }

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

/* Caption ALL-CAPS */
.caption-allcaps {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

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

/* Números tabulares para datos/dinero */
.num, .tnum { font-variant-numeric: tabular-nums; }

/* ============================================================================
 *  MATERIAL SYMBOLS ROUNDED
 * ========================================================================= */

.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: 17px; }
.ms-md     { font-size: 21px; }
.ms-lg     { font-size: 28px; }
.ms-xl     { font-size: 34px; }

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

.hidden { display: none !important; }
[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;
}

[data-role-loaded="false"] .admin-only { visibility: hidden; }

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

@keyframes app-page-entry {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-entry { animation: app-page-entry var(--duration-entry) var(--ease-out-cubic) both; }

@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: var(--radius-md);
}