/* ===========================================================================
   TYP · Sistema de diseño para presentaciones ejecutivas
   ---------------------------------------------------------------------------
   Archivo canónico de tokens y componentes. Se incrusta en cada deck
   (los artefactos publicados no pueden cargar CSS externo).

   Origen de la identidad: logotipo t&p — azul marino del wordmark y la
   matriz de puntos que va de verde a cian.

   Paletas de datos validadas con el verificador de daltonismo:
   categórica clara y oscura pasan las 5 pruebas; el semáforo pasa
   contraste de texto ≥4.5:1 en los 5 pasos.
   =========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  /* Marca — tomados del logotipo.
     navy      = tinta: títulos de sección, enlaces, serie principal.
     navy-deep = FONDO sólido de portada; se mantiene oscuro en ambos temas,
                 porque encima siempre va texto claro.
     navy-soft = lavado de fondo para realces.                              */
  --typ-navy:        #1E417A;   /* wordmark t&p */
  --typ-navy-deep:   #16305A;   /* fondo de portada — oscuro en ambos temas */
  --typ-navy-soft:   #E8EEF8;   /* lavado para realces */
  --on-navy:         #FFFFFF;   /* texto sobre navy-deep */
  --on-navy-2:       #C3D5EE;   /* texto secundario sobre navy-deep */
  --on-navy-3:       #9DC0F0;   /* etiqueta sobre navy-deep */
  --typ-verde:       #8AC75B;   /* extremo verde de la matriz */
  --typ-teal:        #3EBE9A;   /* medio */
  --typ-cian:        #12B7C4;   /* extremo cian */

  /* Neutros — grises con sesgo azul, elegidos no heredados */
  --paper:      #F7F8FA;
  --surface:    #FFFFFF;
  --surface-2:  #FBFCFD;
  --ink:        #101828;
  --ink-2:      #5A6577;
  --muted:      #8B95A5;
  --hair:       #E4E8EE;
  --hair-soft:  #EFF2F6;
  --chip:       #F2F4F8;

  /* Series categóricas — orden fijo, nunca ciclar, nunca reasignar por rank */
  --s1: #2C6BC7;  /* azul TYP  */
  --s2: #E2701F;  /* naranja   */
  --s3: #0E9AAB;  /* cian TYP  */
  --s4: #D9A400;  /* amarillo  */
  --s5: #D4649B;  /* magenta   */
  --s6: #5F9B2E;  /* verde TYP */
  --s7: #5A4BB8;  /* violeta   */
  --s8: #D14B45;  /* rojo      */
  --ctx:  #C7CDD7;              /* serie de contexto: año anterior */
  --ctx-2: #9AA4B2;

  /* Rampa secuencial (magnitud) — un solo tono, claro→oscuro */
  --seq-1: #DCE8F8; --seq-2: #B4CDF0; --seq-3: #7FA9E4;
  --seq-4: #4A83D6; --seq-5: #2C6BC7; --seq-6: #1E4E96; --seq-7: #16305A;

  /* Semáforo TYP — 5 pasos de desempeño vs meta.
     Codifica la convención histórica de los reportes en Excel.       */
  --sem-critico-fill:  #7B1D2B;  --sem-critico-on:  #FFFFFF;
  --sem-bajo-fill:     #C8443C;  --sem-bajo-on:     #FFFFFF;
  --sem-cerca-fill:    #D89020;  --sem-cerca-on:    #101828;
  --sem-cumplido-fill: #24734A;  --sem-cumplido-on: #FFFFFF;
  --sem-superado-fill: #4F5BC4;  --sem-superado-on: #FFFFFF;
  /* variante tinta: el número coloreado sobre fondo claro, sin relleno */
  --sem-critico-ink:  #7B1D2B;  --sem-bajo-ink:     #A82F28;
  --sem-cerca-ink:    #8A5A00;  --sem-cumplido-ink: #1F6B43;
  --sem-superado-ink: #3F49A8;

  /* Dirección de una cifra (sube/baja) — separado del semáforo a propósito */
  --up:   #1F6B43;
  --down: #A82F28;

  /* Estado — para aplicaciones: condición de un registro, avisos y errores.
     Separado del semáforo a propósito: el semáforo mide contra meta; esto no.
     Mismos tonos que sem-bajo / sem-cerca para que la casa se vea coherente.
     fill+on = chip con relleno · ink = texto sobre fondo claro · soft = banda. */
  --alerta-fill: #C8443C;  --alerta-on: #FFFFFF;  --alerta-ink: #A82F28;  --alerta-soft: #FBEAE8;
  --aviso-fill:  #D89020;  --aviso-on:  #101828;  --aviso-ink:  #8A5A00;  --aviso-soft:  #FCF1DC;
  --info-ink:    var(--typ-navy);                 --info-soft:  var(--typ-navy-soft);
  --ok-soft:     #E6F2EA;   /* banda de estado bueno; con --up encima mide 5.6:1 */

  /* Chrome de aplicaciones (2026-10-12). Los decks no los usan.
     hair-ctl = borde de CONTROLES (inputs, selects, botones): WCAG 1.4.11
                pide 3:1 y --hair mide 1.3:1. #808B9C da ≥3.1:1 hasta sobre --chip.
     scrim    = velo detrás de un panel o modal.  sombra = elevación de tarjeta. */
  --hair-ctl:     #808B9C;
  --scrim:        rgba(16,24,40,.45);
  --sombra:       0 1px 2px rgba(16,24,40,.06);
  --sombra-panel: -8px 0 28px rgba(16,24,40,.22);

  /* Métrica */
  --r-chip: 6px;  --r-card: 10px;  --r-lamina: 12px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 28px; --sp-7: 40px;

  /* Tipografía — Segoe UI es la cara de la casa: está en todas las máquinas
     de TYP y es la misma de PowerPoint, así el deck web y el pptx concuerdan. */
  --font-ui: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: Consolas, "Cascadia Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --typ-navy: #5C8ED8; --typ-navy-deep: #142943; --typ-navy-soft: #16283F;
    --paper: #0E1116; --surface: #161B24; --surface-2: #1A202A;
    --ink: #F0F3F7; --ink-2: #A9B4C4; --muted: #7A8595;
    --hair: #262D38; --hair-soft: #1E252F; --chip: #1E252F;
    --s1:#4A8AE0; --s2:#D96F2A; --s3:#17A3B3; --s4:#BC8A00;
    --s5:#D66C9F; --s6:#66A634; --s7:#8A7EE8; --s8:#E4665F;
    --ctx: #3A424F; --ctx-2: #6C7686;
    --seq-1:#16305A; --seq-2:#1E4E96; --seq-3:#2C6BC7; --seq-4:#4A83D6;
    --seq-5:#7FA9E4; --seq-6:#B4CDF0; --seq-7:#DCE8F8;
    --sem-critico-ink:#F08A8A; --sem-bajo-ink:#EE7A72; --sem-cerca-ink:#E0A83C;
    --sem-cumplido-ink:#4BB77E; --sem-superado-ink:#9098EC;
    --up: #4BB77E; --down: #EE7A72;
    --alerta-ink: #EE7A72; --alerta-soft: #3A1C1C;
    --aviso-ink:  #E0A83C; --aviso-soft:  #3A2C12;
    --info-ink:   #9DC0F0;   /* navy oscuro sobre navy-soft queda en 4.48:1 */
    --ok-soft: #173222;  --hair-ctl: #6C7686;
    --scrim: rgba(0,0,0,.62);  --sombra: 0 1px 2px rgba(0,0,0,.35);
    --sombra-panel: -8px 0 28px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --typ-navy: #5C8ED8; --typ-navy-deep: #142943; --typ-navy-soft: #16283F;
  --paper: #0E1116; --surface: #161B24; --surface-2: #1A202A;
  --ink: #F0F3F7; --ink-2: #A9B4C4; --muted: #7A8595;
  --hair: #262D38; --hair-soft: #1E252F; --chip: #1E252F;
  --s1:#4A8AE0; --s2:#D96F2A; --s3:#17A3B3; --s4:#BC8A00;
  --s5:#D66C9F; --s6:#66A634; --s7:#8A7EE8; --s8:#E4665F;
  --ctx: #3A424F; --ctx-2: #6C7686;
  --seq-1:#16305A; --seq-2:#1E4E96; --seq-3:#2C6BC7; --seq-4:#4A83D6;
  --seq-5:#7FA9E4; --seq-6:#B4CDF0; --seq-7:#DCE8F8;
  --sem-critico-ink:#F08A8A; --sem-bajo-ink:#EE7A72; --sem-cerca-ink:#E0A83C;
  --sem-cumplido-ink:#4BB77E; --sem-superado-ink:#9098EC;
  --up: #4BB77E; --down: #EE7A72;
  --alerta-ink: #EE7A72; --alerta-soft: #3A1C1C;
  --aviso-ink:  #E0A83C; --aviso-soft:  #3A2C12;
  --info-ink:   #9DC0F0;
  --ok-soft: #173222;  --hair-ctl: #6C7686;
  --scrim: rgba(0,0,0,.62);  --sombra: 0 1px 2px rgba(0,0,0,.35);
  --sombra-panel: -8px 0 28px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------- 2. BASE */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: var(--sp-7) 20px 80px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.55;
}
.typ-wrap { max-width: 1020px; margin: 0 auto; }

/* Escala tipográfica */
.t-display { font-size: 30px; font-weight: 650; letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
.t-hero    { font-size: 44px; font-weight: 650; letter-spacing: -.02em; line-height: 1.05; }
.t-h1      { font-size: 21px; font-weight: 650; letter-spacing: -.012em; line-height: 1.3; text-wrap: balance; }
.t-h2      { font-size: 17px; font-weight: 650; letter-spacing: -.008em; }
.t-body    { font-size: 14.5px; line-height: 1.55; }
.t-small   { font-size: 13px; }
.t-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.t-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- 3. PORTADA */
/* Banda de la primera página: fondo navy-deep en ambos temas, con texto
   claro encima (--on-navy*). Sin marca gráfica — la identidad la cargan
   el color y la tipografía. No usar esta banda más de una vez.         */
.portada {
  background: var(--typ-navy-deep);
  border-radius: var(--r-lamina);
  padding: 30px 32px 26px;
  margin-bottom: var(--sp-5);
}
.portada .eyebrow {
  color: var(--on-navy-3); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px;
}
.portada h1 {
  color: var(--on-navy); font-size: 30px; font-weight: 650;
  letter-spacing: -.015em; margin: 0 0 8px; text-wrap: balance;
}
.portada p { color: var(--on-navy-2); margin: 0; max-width: 66ch; font-size: 14px; }

/* --------------------------------------------------- 4. LÁMINA (la unidad) */
.lamina {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lamina);
  padding: var(--sp-6) 28px var(--sp-5);
  margin: var(--sp-5) 0;
}
.lamina > .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--typ-navy); margin-bottom: var(--sp-2);
}
.lamina > h2 {
  font-size: 21px; font-weight: 650; letter-spacing: -.012em;
  margin: 0 0 6px; text-wrap: balance; max-width: 62ch;
}
.lamina > .mensaje {
  color: var(--ink-2); margin: 0 0 18px; max-width: 74ch;
}
.nota {
  font-size: 11.5px; color: var(--muted); margin-top: var(--sp-2);
}

/* Rejillas */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 760px) { .g2, .g3 { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- 5. KPI */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-3);
}
.kpi {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-card); padding: 14px 16px 12px;
}
.kpi .lbl { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.kpi .val { font-size: 26px; font-weight: 650; letter-spacing: -.01em; }  /* cifras proporcionales a propósito */
.kpi .dlt { font-size: 12.5px; margin-top: 2px; color: var(--ink-2); }
.kpi .dlt b.up   { color: var(--up);   font-weight: 600; }
.kpi .dlt b.down { color: var(--down); font-weight: 600; }

/* ----------------------------------------------------------- 6. TABLAS */
.tbl-scroll { overflow-x: auto; }
table.typ {
  border-collapse: collapse; width: 100%;
  font-size: 13.5px; font-variant-numeric: tabular-nums;
}
table.typ th {
  text-align: right; font-size: 11.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--hair); padding: 4px 8px 6px;
}
table.typ th:first-child, table.typ td:first-child { text-align: left; padding-left: 2px; }
table.typ td { text-align: right; padding: 5.5px 8px; border-bottom: 1px solid var(--hair-soft); }
table.typ tr:last-child td { border-bottom: none; }
table.typ tr.total td { border-top: 1.5px solid var(--hair); font-weight: 650; }
table.typ td.up   { color: var(--up); }
table.typ td.down { color: var(--down); }
/* columna de texto que no es la primera (veredictos, comentarios) */
table.typ th.izq, table.typ td.izq { text-align: left; }

/* -------------------------------------------------- 7. SEMÁFORO TYP */
/* Regla: el color es dato, pero NUNCA es el único canal.
   El chip siempre lleva el número; en tabla, además, la columna se entiende
   sin color. Nunca uses el semáforo para identidad (eso son las series).   */
.sem {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; padding: 2px 8px; border-radius: var(--r-chip);
  font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.sem-critico  { background: var(--sem-critico-fill);  color: var(--sem-critico-on); }
.sem-bajo     { background: var(--sem-bajo-fill);     color: var(--sem-bajo-on); }
.sem-cerca    { background: var(--sem-cerca-fill);    color: var(--sem-cerca-on); }
.sem-cumplido { background: var(--sem-cumplido-fill); color: var(--sem-cumplido-on); }
.sem-superado { background: var(--sem-superado-fill); color: var(--sem-superado-on); }
/* variante tinta: para tablas densas donde el relleno satura la página */
.semi { font-weight: 650; font-variant-numeric: tabular-nums; }
.semi-critico  { color: var(--sem-critico-ink); }
.semi-bajo     { color: var(--sem-bajo-ink); }
.semi-cerca    { color: var(--sem-cerca-ink); }
.semi-cumplido { color: var(--sem-cumplido-ink); }
.semi-superado { color: var(--sem-superado-ink); }

/* --------------------------------------------------- 7b. ESTADO (apps) */
/* Condición de un registro, avisos y errores. No mide contra meta: para eso
   es el semáforo. Siempre con texto: el color nunca viaja solo.            */
.est {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-chip);
  font-size: 12.5px; font-weight: 650; white-space: nowrap;
}
.est-alerta { background: var(--alerta-fill); color: var(--alerta-on); }
.est-aviso  { background: var(--aviso-fill);  color: var(--aviso-on); }
.est-neutro { background: var(--chip);        color: var(--ink-2); }
/* banda: aviso de ancho completo (datos desactualizados, error de carga) */
.banda { border-radius: 8px; padding: 10px 14px; font-size: 13.5px; }
.banda-alerta { background: var(--alerta-soft); color: var(--alerta-ink); }
.banda-aviso  { background: var(--aviso-soft);  color: var(--aviso-ink); }
.banda-info   { background: var(--info-soft);   color: var(--info-ink); }
/* texto de error de un campo */
.err { font-size: 12.5px; color: var(--alerta-ink); margin-top: 4px; }

/* ------------------------------------------------- 8. PIEZAS MENORES */
.callout {
  background: var(--typ-navy-soft); border-radius: 8px;
  padding: 12px 16px; margin: var(--sp-3) 0 var(--sp-1);
  font-size: 13.5px; color: var(--ink);
}
.callout b { font-weight: 650; }

ul.bullets { margin: var(--sp-3) 0 0; padding-left: 18px; color: var(--ink-2); }
ul.bullets li { margin: 5px 0; }
ul.bullets b { color: var(--ink); font-weight: 600; }

/* Veredicto — para láminas de validación de cifras */
.verd { font-weight: 650; white-space: nowrap; }
.verd.ok   { color: var(--up); }
.verd.warn { color: var(--down); }
.verd.neut { color: var(--ink-2); }

/* Procedencia — de dónde salió el dato. Convención de extracción TYP. */
.proc {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; vertical-align: 2px;
}
.proc-exacto { background: var(--chip); color: var(--ink-2); }
.proc-vision { background: var(--chip); color: var(--sem-cerca-ink); }

/* Bloque de gráfica: título corto arriba, marca abajo. El título dice qué
   se mide y en qué unidad; la conclusión ya la dijo el <h2> de la lámina. */
.chart-box { margin: 6px 0 4px; }
.chart-title {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px;
}

/* Leyenda de gráficas */
.legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin: var(--sp-2) 0 2px; }
.legend .it { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.sw.line { height: 3px; border-radius: 2px; width: 16px; }

/* Chrome de gráficas SVG */
svg text { font-family: var(--font-ui); }
.ax     { font-size: 11px; fill: var(--muted); }
.axlbl  { font-size: 11.5px; fill: var(--ink-2); }
.vallbl { font-size: 11.5px; font-weight: 600; fill: var(--ink); }
.grid-l { stroke: var(--hair-soft); stroke-width: 1; }   /* sólida, nunca punteada */
.base-l { stroke: var(--hair); stroke-width: 1; }

/* Pie de fuente y método — obligatorio en todo deck de consejo */
.fuente {
  margin-top: var(--sp-6); font-size: 12.5px; color: var(--muted);
  border-top: 1px solid var(--hair); padding-top: var(--sp-4); max-width: 82ch;
}
.fuente b { color: var(--ink-2); }

/* Accesibilidad y salida impresa */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--typ-navy); outline-offset: 2px; border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  body { padding: 10px; background: #fff; }
  .lamina { break-inside: avoid; border-color: #ccc; }
  .portada { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}