/* ==========================================================================
   Backoffice de Pasionar — tokens «Cancha clara»

   1. @font-face — Archivo (UI, títulos y cifras con tabular-nums y ancho angosto), Alegreya (sólo el
      título del login) y Chivo Mono (código). Mismos binarios que la landing, servidos desde
      /admin/assets/fonts/ (CSP default-src 'self'). Fallbacks con métricas ajustadas.
   2. Primitivos de marca: sólo los usa este archivo.
   3. Semánticos: lo único que consumen los componentes. Claro «cancha de día» por defecto; oscuro
      «noche de partido» por data-theme o, sin elección guardada, por prefers-color-scheme.

   Lenguaje visual: lienzo cálido, tarjetas blancas suaves (radio 20 px, sombra corta), números grandes.
   UNA sola tarjeta oscura en todo el panel: «Ahora en la cancha» (--night-*), igual en los dos temas.
   Marca: PASION en dorado (--accent) y AR en celeste (--data). Un color fijo por concepto (--series-*):
   cuentas nuevas = azul, hinchas activos y el embudo = naranja, respuestas de lugar/canal = turquesa,
   violeta y magenta; positivo/negativo (verde/rojo) sólo en Finanzas y siempre con signo o texto.
   Ningún dato depende sólo del color: cada marca lleva texto, signo, flecha o patrón.
   Ratios WCAG documentados junto a cada tema (texto ≥ 4,5:1, marcas ≥ 3:1 sobre la tarjeta).
   ========================================================================== */

@font-face {
  font-family: "Alegreya";
  src: url("/admin/assets/fonts/Alegreya.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/admin/assets/fonts/Archivo.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/admin/assets/fonts/ChivoMono.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Fallback";
  src: local("Georgia");
  size-adjust: 93.5%;
  ascent-override: 108.7%;
  descent-override: 36.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 106.3%;
  ascent-override: 82.6%;
  descent-override: 19.8%;
  line-gap-override: 0%;
}

:root {
  /* ---- Primitivos ---- */
  --gold-300: #ffbe4d;
  --gold-800: #8a5a00;
  --gold-ink: #231300;
  --sky-300: #7cc4f0;
  --sky-700: #1b6aa3;
  --mint-300: #8fd4a4;
  --mint-800: #1d6a3e;
  --brick-300: #ff9d8c;
  --brick-800: #a8332b;
}

/* ---- Cancha de día (claro, por defecto) ----
   Sobre tarjeta #ffffff: text 17,4 · muted 9,3 · faint 6,1 · accent 5,9 · data 5,6 · series-*-text ≥ 6,0.
   Sobre lienzo #f5f0e9: ninguno baja de 5,3. Marcas (azul/naranja) ≥ 3,4:1 sobre la tarjeta. */
:root {
  --canvas: #f5f0e9;
  --rail: #f5f0e9;
  --card: #ffffff;
  --card-2: #fbf8f4;
  --field: #ffffff;
  --dialog: #ffffff;
  --chip: #efe8df;
  --hover: rgba(60, 20, 35, 0.05);
  --text: #241018;
  --text-muted: #57404a;
  --text-faint: #6e5660;
  --rule: #e9e1d7;
  --rule-strong: #cdbfb2;
  --shadow-card: 0 1px 2px rgba(40, 20, 10, 0.05), 0 8px 24px -12px rgba(40, 20, 10, 0.14);
  --shadow-dialog: 0 30px 60px -24px rgba(60, 20, 35, 0.4);
  --accent: var(--gold-800);
  --accent-fill: var(--gold-300);
  --on-accent: var(--gold-ink);
  --accent-wash: #fff1cc;
  --data: var(--sky-700);
  --data-wash: #e3eef8;
  --positive: var(--mint-800);
  --negative: var(--brick-800);
  --negative-wash: #fbe7e4;
  --warn-bg: #fff1cc;
  --warn-text: #6b4500;
  --warn-line: #d9a22e;
  --ok-bg: #e4f1ec;
  --ok-text: #1f5e48;
  --skeleton: rgba(60, 20, 35, 0.07);
  --backdrop: rgba(36, 16, 24, 0.48);
  --focus-ring: #1d4f9f;

  /* Series: un color por concepto. -soft = fondo de ícono/patrón; -text = texto del mismo concepto. */
  --series-signups: #2563c9;
  --series-signups-soft: #dbe7fb;
  --series-signups-text: #1d4f9f;
  --series-active: #c9560c;
  --series-active-soft: #fde6d4;
  --series-active-text: #9a3e00;
  --series-completed: #e08a4c;
  --series-voted: #f0b98f;
  --series-answer-1: #0f8670;
  --series-answer-2: #6a4bc8;
  --series-answer-3: #b1306f;
  --series-other: #8c7a82;
  --series-dist: #2563c9;
  --series-revenue: #0f8670;
  --series-expenses: #b1306f;

  /* Mapa de calor de cohortes (más color = más porcentaje) y su tinta legible. */
  --heat-0: #f1ece5;
  --heat-1: #dbe7fb;
  --heat-2: #b0cbf3;
  --heat-3: #6c9de6;
  --heat-4: #2f6fd0;
  --heat-ink-low: #241018;
  --heat-ink-3: #0b1020;
  --heat-ink-4: #ffffff;
  color-scheme: light;
}

/* ---- Noche de partido (oscuro) ----
   Sobre tarjeta #21141c: text 16,0 · muted 11,0 · faint 7,1 · accent 10,6 · data 9,1 · series-*-text ≥ 9.
   Marcas ≥ 5:1 sobre la tarjeta. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #150b11;
    --rail: #150b11;
    --card: #21141c;
    --card-2: #2a1a24;
    --field: #2a1a24;
    --dialog: #21141c;
    --chip: #33232d;
    --hover: rgba(255, 233, 220, 0.06);
    --text: #fbf1ea;
    --text-muted: #e1cfc7;
    --text-faint: #bea9a1;
    --rule: #3a2933;
    --rule-strong: #5c4752;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -18px rgba(0, 0, 0, 0.8);
    --shadow-dialog: 0 30px 60px -20px rgba(0, 0, 0, 0.75);
    --accent: var(--gold-300);
    --accent-wash: #3a2b0e;
    --data: var(--sky-300);
    --data-wash: #1d2a38;
    --positive: var(--mint-300);
    --negative: var(--brick-300);
    --negative-wash: #3d1f1c;
    --warn-bg: #3a2c0c;
    --warn-text: #ffd27a;
    --warn-line: #9b7420;
    --ok-bg: #183424;
    --ok-text: #8fd4a4;
    --skeleton: rgba(255, 233, 220, 0.07);
    --backdrop: rgba(8, 3, 6, 0.72);
    --focus-ring: #9cc0ff;
    --series-signups: #6ea2ff;
    --series-signups-soft: #1f2b48;
    --series-signups-text: #a9c6ff;
    --series-active: #ff9a52;
    --series-active-soft: #3d2417;
    --series-active-text: #ffb27c;
    --series-completed: #d97a3c;
    --series-voted: #a8613a;
    --series-answer-1: #2fb497;
    --series-answer-2: #9b7ce6;
    --series-answer-3: #e0609e;
    --series-other: #9a8790;
    --series-dist: #6ea2ff;
    --series-revenue: #2fb497;
    --series-expenses: #e0609e;
    --heat-0: #2c1d27;
    --heat-1: #2a4572;
    --heat-2: #315a9c;
    --heat-3: #3b6dc0;
    --heat-4: #6ea2ff;
    --heat-ink-low: #fbf1ea;
    --heat-ink-3: #ffffff;
    --heat-ink-4: #0b1020;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #150b11;
  --rail: #150b11;
  --card: #21141c;
  --card-2: #2a1a24;
  --field: #2a1a24;
  --dialog: #21141c;
  --chip: #33232d;
  --hover: rgba(255, 233, 220, 0.06);
  --text: #fbf1ea;
  --text-muted: #e1cfc7;
  --text-faint: #bea9a1;
  --rule: #3a2933;
  --rule-strong: #5c4752;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  --shadow-dialog: 0 30px 60px -20px rgba(0, 0, 0, 0.75);
  --accent: var(--gold-300);
  --accent-wash: #3a2b0e;
  --data: var(--sky-300);
  --data-wash: #1d2a38;
  --positive: var(--mint-300);
  --negative: var(--brick-300);
  --negative-wash: #3d1f1c;
  --warn-bg: #3a2c0c;
  --warn-text: #ffd27a;
  --warn-line: #9b7420;
  --ok-bg: #183424;
  --ok-text: #8fd4a4;
  --skeleton: rgba(255, 233, 220, 0.07);
  --backdrop: rgba(8, 3, 6, 0.72);
  --focus-ring: #9cc0ff;
  --series-signups: #6ea2ff;
  --series-signups-soft: #1f2b48;
  --series-signups-text: #a9c6ff;
  --series-active: #ff9a52;
  --series-active-soft: #3d2417;
  --series-active-text: #ffb27c;
  --series-completed: #d97a3c;
  --series-voted: #a8613a;
  --series-answer-1: #2fb497;
  --series-answer-2: #9b7ce6;
  --series-answer-3: #e0609e;
  --series-other: #9a8790;
  --series-dist: #6ea2ff;
  --series-revenue: #2fb497;
  --series-expenses: #e0609e;
  --heat-0: #2c1d27;
  --heat-1: #2a4572;
  --heat-2: #315a9c;
  --heat-3: #3b6dc0;
  --heat-4: #6ea2ff;
  --heat-ink-low: #fbf1ea;
  --heat-ink-3: #ffffff;
  --heat-ink-4: #0b1020;
  color-scheme: dark;
}

:root {
  /* ---- La tarjeta oscura «Ahora en la cancha»: siempre de noche, en los dos temas ----
     Sobre #1b0f17: night-text 16,9 · night-muted 10,3 · night-accent 11,1 · stale-text 12,4. */
  --night: #1b0f17;
  --night-2: #2a1922;
  --night-text: #fbf1ea;
  --night-muted: #d6c6cf;
  --night-accent: var(--gold-300);
  --night-rule: rgba(255, 233, 220, 0.14);
  --night-glow-gold: rgba(255, 190, 77, 0.16);
  --night-glow-sky: rgba(37, 99, 201, 0.24);
  --live-bg: #ff8a80;
  --live-ink: #2a0705;
  --live-dot: #7a0f08;
  --stale-bg: rgba(255, 190, 77, 0.14);
  --stale-line: rgba(255, 190, 77, 0.5);
  --stale-text: #ffe2a8;

  /* ---- Tipografía ---- */
  --font-display: "Archivo", "Archivo Fallback", Arial, Helvetica, sans-serif;
  --font-login: "Alegreya", "Alegreya Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", "Archivo Fallback", Arial, Helvetica, sans-serif;
  --font-num: "Archivo", "Archivo Fallback", Arial, Helvetica, sans-serif;
  --font-mono: "Chivo Mono", "Courier New", monospace;
  --stretch-num: 80%;

  --fs-page: clamp(1.75rem, 1.2vw + 1.2rem, 2.125rem);  /* Archivo 700 · ancho 85 · título de página */
  --fs-login: clamp(2.25rem, 3vw + 1.25rem, 3.25rem);  /* Alegreya 800 · sólo login */
  --fs-section: 1.125rem;                              /* Archivo 700 · títulos de bloque */
  --fs-title: 0.9375rem;                               /* Archivo 700 · título de tarjeta */
  --fs-body: 0.9375rem;                                /* Archivo 400 */
  --fs-table: 0.8125rem;                               /* tablas y meta */
  --fs-label: 0.75rem;                                 /* etiquetas en mayúsculas */
  --fs-kpi: clamp(2.5rem, 1.6vw + 1.6rem, 2.875rem);   /* cifra grande de KPI */
  --fs-kpi-sm: 1.75rem;
  --tracking-label: 0.08em;

  /* ---- Espacio (escala de 4 px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --gutter: clamp(1rem, 2.6vw, 2.25rem);
  --grid-gap: 20px;
  --rail-width: 15rem;
  --content-max: 86rem;

  /* ---- Forma: tarjetas suaves ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --target: 44px;

  /* ---- Movimiento ---- */
  --dur-fast: 150ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}