/* ═══════════════════════════════════════════════════════════
   gestion-fran · design tokens (DARK PREMIUM · identidad interna de Fran)
   ─────────────────────────────────────────────────────────
   Calca frandemoli.com / lafabrica-panel: monocromo cálido en oscuro,
   énfasis por luminosidad (hueso brillante), tipografías Archivo + Inter.
   Colores funcionales pastel para el semáforo del cockpit.
   Fuentes: Archivo + Inter variables, self-hosteadas en assets/fonts (woff2).
   ═══════════════════════════════════════════════════════════ */

/* ═══ Fuentes (variables: un archivo cubre todos los pesos) ═══ */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Fondos cálidos oscuros */
  --bg:            #0D0C0B;
  --surface:       #141312;
  --surface-2:     #1A1816;
  --surface-3:     #211E1B;

  /* Bordes (hueso translúcido) */
  --border:        rgba(236,231,221,0.09);
  --border-md:     rgba(236,231,221,0.16);
  --border-strong: rgba(236,231,221,0.28);

  /* Texto */
  --text:          #ECE7DD;   /* hueso */
  --hi:            #FBF8F1;    /* hueso brillante = énfasis */
  --text-muted:    #9C9388;
  --text-subtle:   #6B645B;

  /* Funcionales (pastel cálido, no agresivos) */
  --ok:            #7FA07F;   /* verde */
  --warn:          #C6A368;   /* ámbar */
  --alert:         #CB7E6C;   /* terracota (no rojo) */
  --info:          #7E93A8;

  /* Tipografías */
  --f-display:     'Archivo', system-ui, sans-serif;
  --f-body:        'Inter', system-ui, sans-serif;

  /* Escala tipográfica de datos (números que nunca se rompen) */
  --fs-hero: clamp(28px, 7vw, 40px);     /* el número héroe de cada vista */
  --fs-kpi:  clamp(17px, 4.6vw, 24px);   /* celdas .kpi en grids de 2+ columnas */

  /* Espaciado */
  --sp-1: 8px;  --sp-2: 12px;  --sp-3: 16px;  --sp-4: 24px;  --sp-5: 32px;

  /* Radios */
  --r-sm: 8px;  --r: 12px;  --r-lg: 16px;

  /* Sombras */
  --shadow:    0 12px 32px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.65);

  /* Transiciones */
  --t-fast: 180ms ease;
  --t:      260ms ease;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slow: 500ms var(--ease-out);
}

/* ═══ Reset ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
::selection { background: var(--hi); color: var(--bg); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #2A2520; border-radius: 4px; }

/* ═══ Tipografía base ═══ */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; color: var(--text); }
strong { color: var(--hi); font-weight: 600; }
.eyebrow { font-family: var(--f-body); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); }

/* Énfasis: número clave con subrayado que se dibuja al revelar */
.hl { position: relative; color: var(--hi); white-space: nowrap; }
.hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: 2px;
  background: var(--hi); transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease-out) 300ms;
}
.reveal.is-visible .hl::after { transform: scaleX(1); }

/* ═══ Reveal (opacity + blur + translate) ═══ */
.reveal {
  opacity: 0; transform: translateY(20px); filter: blur(6px);
  transition: opacity 700ms ease, transform 700ms var(--ease-out), filter 700ms ease;
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }