/**
 * tokens.css — vendorizado de hotentico-design (repo `hotentico-design`,
 * commit `cced7e5` + el arreglo del `:root` plano del 20/08/2026, "Rediseñar el sistema por legibilidad: escala, piso,
 * medida y tintas").
 *
 * Copia LITERAL de `../../design/globals.css`. NO SE EDITA ACÁ — se edita en
 * `hotentico-design` y se re-sincroniza corriendo de nuevo el `cat` que
 * generó este archivo. Se copia (no se importa) porque este repo es su
 * propio repo git (`hotentico-reportes-semanales`) y el `Dockerfile` sólo
 * copia `backend/`, `templates/` y `assets/` — el contenedor nunca puede
 * leer `../design/` en runtime.
 */

/**
 * Hoténtico Design System — base CSS
 *
 * Para proyectos con Tailwind v4: incluir con @import en globals.css.
 * Para proyectos sin Tailwind: usar las variables CSS directamente vía var(--color-*).
 *
 * Repositorio: https://github.com/nicowegher/hotentico-design
 */

/* ── Design tokens ─────────────────────────────────────────── */

@theme inline {
  /* Arco iris de marca */
  --color-hotentico-red:    #E10500;
  --color-hotentico-orange: #FA500F;
  --color-hotentico-amber:  #FF8205;
  --color-hotentico-gold:   #FFAF00;
  --color-hotentico-yellow: #FFD800;

  /* Superficies */
  --color-warm-ivory:       #fffaeb;
  --color-cream:            #fff0c2;
  --color-cream-dark:       #ffe295;
  --color-hotentico-black:  #1f1f1f;
  --color-pure-white:       #ffffff;
  --color-warm-gray:        #5e4a3a;

  /* Tipografía */
  --font-sans: "Inter", ui-sans-serif, system-ui, Arial, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Escala tipográfica — ratio 1,25 ──────────────────────
   * Ocho pasos. Dos niveles adyacentes en una misma vista deben estar a un
   * paso COMPLETO de distancia; si no entra, la diferencia se marca por color,
   * tracking o superficie, nunca por 1px de tamaño.
   * --text-micro y --print-micro son el PISO: nada baja de ahí. */
  --text-micro:    11px;   /* solo uppercase + letter-spacing >= .1em */
  --text-label:    13px;
  --text-body:     17px;
  --text-lead:     21px;
  --text-h3:       26px;
  --text-h2:       33px;
  --text-h1:       41px;
  --text-display:  clamp(2.5rem, 6.5vw, 5rem);

  --print-micro:   8pt;    /* piso de impresión */
  --print-body:    10pt;
  --print-lead:    12.5pt;
  --print-h3:      15.5pt;
  --print-h2:      19.5pt;
  --print-h1:      24.5pt;
  --print-display: 30.5pt;

  /* Medida de línea — todo bloque de prosa la lleva. Tablas y gráficos, no. */
  --measure:        68ch;
  --measure-narrow: 52ch;

  /* ── Tintas ───────────────────────────────────────────────
   * amber, gold y yellow son SUPERFICIE (barras, franjas, fondos, series de
   * gráfico) — nunca texto: sobre ivory dan 2,38 / 1,77 / 1,34:1. Cuando
   * tienen que ser texto se usa su tinta: mismo matiz, bajado hasta cruzar
   * 4,5:1. */
  --color-ink-amber:  #b55b00;  /* de #FF8205 · 4,51:1 sobre ivory */
  --color-ink-gold:   #9b6a00;  /* de #FFAF00 · 4,52:1 */
  --color-ink-yellow: #877200;  /* de #FFD800 · 4,54:1 */

  /* ── Semánticos ───────────────────────────────────────────
   * Separados del arcoíris a propósito: el rojo de marca es identidad, no
   * alarma. Antes #E10500 significaba "Propuesta Hoténtico" en el forecast y
   * "caída" en el KPI de reportes-semanales. */
  --color-pos:  #0F6B4F;  /* 6,22:1 sobre ivory */
  --color-neg:  #B3261E;  /* 6,26:1 */
  --color-warn: #b55b00;  /* = ink-amber */

  /* ── Series de datos ──────────────────────────────────────
   * Extensión fría para dashboards y gráficos. No compiten con el arcoíris. */
  --color-data-blue:         #2563a8;
  --color-data-blue-light:   #5b8fc9;
  --color-data-teal:         #1f8c7a;
  --color-data-teal-light:   #3db5a0;
  --color-data-violet:       #7c5cbf;
  --color-data-violet-light: #a47fbf;
  --color-data-neutral:      #9a8a72;  /* serie de referencia / piso */

  /* Fondo profundo — portadas de PDF, más oscuro que hotentico-black */
  --color-black-deep: #190f05;

  /* ── Texto sobre fondo oscuro (#1f1f1f) ───────────────────
   * Tres escalones fijos. Nada por debajo de --on-dark-muted. */
  --on-dark-strong: rgba(255, 255, 255, 0.95);  /* 15,0:1 — títulos */
  --on-dark-body:   rgba(255, 255, 255, 0.78);  /* 10,5:1 — cuerpo, links */
  --on-dark-muted:  rgba(255, 255, 255, 0.62);  /*  7,1:1 — labels (mínimo) */

  /* Sombra float — 5 capas, tinte ámbar */
  --shadow-golden-float:
    rgba(127, 99, 21, 0.12) -8px 16px 39px,
    rgba(127, 99, 21, 0.10) -33px 64px 72px,
    rgba(127, 99, 21, 0.06) -73px 144px 97px,
    rgba(127, 99, 21, 0.04) -130px 255px 131px,
    rgba(127, 99, 21, 0.01) -203px 398px 143px;

  --shadow-golden-sm:
    rgba(127, 99, 21, 0.10) 0px 8px 24px,
    rgba(127, 99, 21, 0.06) 0px 24px 48px;
}

/* ── Variables CSS nativas (compatibles sin Tailwind) ──────── */

:root {
  --background: #fffaeb;
  --foreground: #1f1f1f;

  /* ── Alias cortos para los proyectos SIN Tailwind ─────────────
   * reportes-semanales/, presupuestos/ y reportes/ ya venían declarando estos
   * nombres a mano en cada archivo. Acá quedan definidos una sola vez: esos
   * proyectos importan globals.css y borran su bloque local.
   * Tailwind v4 ya emite las --color-* de @theme inline; estos son para el resto. */
  --red:        #E10500;
  --orange:     #FA500F;
  --amber:      #FF8205;
  --gold:       #FFAF00;
  --yellow:     #FFD800;
  --ivory:      #fffaeb;
  --cream:      #fff0c2;
  --cream-dark: #ffe295;
  --black:      #1f1f1f;
  --black-deep: #190f05;
  --gray:       #5e4a3a;
  --white:      #ffffff;

  --ink-amber:  #b55b00;
  --ink-gold:   #9b6a00;
  --ink-yellow: #877200;

  --pos:  #0F6B4F;
  --neg:  #B3261E;
  --warn: #b55b00;

  --data-blue:         #2563a8;
  --data-blue-light:   #5b8fc9;
  --data-teal:         #1f8c7a;
  --data-teal-light:   #3db5a0;
  --data-violet:       #7c5cbf;
  --data-violet-light: #a47fbf;
  --data-neutral:      #9a8a72;

  --on-dark-strong: rgba(255, 255, 255, 0.95);
  --on-dark-body:   rgba(255, 255, 255, 0.78);
  --on-dark-muted:  rgba(255, 255, 255, 0.62);

  --measure:        68ch;
  --measure-narrow: 52ch;

  /* ── Tipografía — la escala y las dos familias ────────────────
   * ⚠️ Estas NO son una duplicación cosmética del @theme de arriba: son la
   * única forma de que existan fuera de Tailwind. `@theme` es un at-rule que
   * sólo entiende el compilador de Tailwind v4; un browser que recibe este
   * archivo tal cual (CSS plano, sin build) descarta el bloque ENTERO, así
   * que ahí `var(--text-label)` y `var(--font-sans)` no resuelven a nada.
   * Los colores y --measure ya estaban acá abajo por ese motivo; la escala y
   * las familias faltaban, y los tres proyectos sin Tailwind
   * —reportes-semanales/, presupuestos/, reportes/— venían escribiendo los
   * tamaños a mano sin poder usarlas. Verificado con Chromium el 20/08/2026.
   * Si cambia un paso, cambian los DOS bloques. */
  --font-sans: "Inter", ui-sans-serif, system-ui, Arial, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-micro:    11px;   /* piso — sólo uppercase + letter-spacing >= .1em */
  --text-label:    13px;
  --text-body:     17px;
  --text-lead:     21px;
  --text-h3:       26px;
  --text-h2:       33px;
  --text-h1:       41px;
  --text-display:  clamp(2.5rem, 6.5vw, 5rem);

  --print-micro:   8pt;    /* piso de impresión */
  --print-body:    10pt;
  --print-lead:    12.5pt;
  --print-h3:      15.5pt;
  --print-h2:      19.5pt;
  --print-h1:      24.5pt;
  --print-display: 30.5pt;
}

/* ── Cifras ───────────────────────────────────────────────────
 * .cifra es la face de datos: KPIs, valores destacados, totales de fila.
 * NO va en tablas densas ni en cifras dentro de prosa — una mono es más ancha
 * que Inter y ahí el ancho es el recurso escaso. Para esos casos, .num.
 */
.cifra {
  font-family: var(--font-data, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

/* La unidad (%, pts, USD) nunca va en la mono: su espacio es de ancho completo
 * y la cifra sale desarmada. Va en Inter, en un span aparte. */
.cifra + .unidad,
.unidad {
  font-family: var(--font-sans, "Inter", ui-sans-serif, system-ui, Arial, sans-serif);
  font-size: 0.62em;
  margin-left: 0.28em;
  color: var(--gray, #5e4a3a);
}

/* Alineación de columnas sin cambiar de familia. */
.num,
table td,
table th {
  font-variant-numeric: tabular-nums;
}

/* Prosa: medida de línea. Tablas y figuras quedan exentas a propósito. */
.measure        { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", ui-sans-serif, system-ui, Arial, sans-serif;
}

/* ── Sombras ───────────────────────────────────────────────── */

.shadow-golden {
  box-shadow:
    rgba(127, 99, 21, 0.12) -8px 16px 39px,
    rgba(127, 99, 21, 0.10) -33px 64px 72px,
    rgba(127, 99, 21, 0.06) -73px 144px 97px,
    rgba(127, 99, 21, 0.04) -130px 255px 131px,
    rgba(127, 99, 21, 0.01) -203px 398px 143px;
}

.shadow-golden-sm {
  box-shadow:
    rgba(127, 99, 21, 0.10) 0px 8px 24px,
    rgba(127, 99, 21, 0.06) 0px 24px 48px;
}

/* ── Fondo cuadrillé (secciones de contenido) ──────────────── */

.bg-grid {
  background-image:
    linear-gradient(rgba(127, 99, 21, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 99, 21, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Prose — artículos de blog ─────────────────────────────── */

/* La medida es lo que más cambia la lectura de un artículo largo: sin ella la
 * columna corre a ~107 caracteres por línea, contra los 60-75 que se leen
 * cómodo. Las tablas y los bloques de código la anulan más abajo. */
.prose-hotentico {
  color: #1f1f1f;
  font-size: var(--text-body, 17px);
  line-height: 1.75;
  max-width: var(--measure, 68ch);
}

.prose-hotentico p {
  margin-bottom: 1.5rem;
  color: #5e4a3a;
}

.prose-hotentico h2 {
  font-size: var(--text-h3, 26px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #1f1f1f;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
}

.prose-hotentico h3 {
  font-size: var(--text-lead, 21px);
  font-weight: 400;
  line-height: 1.15;
  color: #1f1f1f;
  margin-top: 2rem;
  margin-bottom: 0.875rem;
}

.prose-hotentico strong {
  font-weight: 400;
  color: #1f1f1f;
}

.prose-hotentico em {
  font-style: italic;
  color: #5e4a3a;
}

.prose-hotentico ul,
.prose-hotentico ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  color: #5e4a3a;
}

.prose-hotentico li {
  margin-bottom: 0.5rem;
}

.prose-hotentico ul li {
  list-style-type: disc;
}

.prose-hotentico ol li {
  list-style-type: decimal;
}

.prose-hotentico blockquote {
  border-left: 3px solid #FA500F;
  padding-left: 1.25rem;
  margin: 2rem 0;
  color: #5e4a3a;
  font-style: italic;
}

.prose-hotentico hr {
  border: none;
  border-top: 1px solid rgba(255, 216, 0, 0.4);
  margin: 3rem 0;
}

.prose-hotentico a {
  color: #FA500F;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose-hotentico a:hover {
  color: #1f1f1f;
}

/* Excepciones a la medida: estos bloques no son prosa y necesitan el ancho. */
.prose-hotentico table,
.prose-hotentico pre,
.prose-hotentico figure,
.prose-hotentico img,
.prose-table-wrap {
  max-width: none;
  width: 100%;
}