/* ───────────────────────────────────────────────────────────────────────────
   TEMA HORIZON · una sola fuente de verdad para TODOS los paneles.

   Vive acá y se sirve desde el panel madre:
       https://panel.horizon-group.online/tema.css

   Cada panel lo carga en el <head>, ANTES de su propio CSS:
       <link rel="stylesheet" href="https://panel.horizon-group.online/tema.css">

   Y después mapea sus variables a estas. Ejemplo real (horizon-tareas):
       :root { --bg: var(--hz-bg); --txt: var(--hz-ink); --sol: var(--hz-sol); }

   Así se cambia la marca en un archivo y cambian los 15 paneles.

   REGLA: cada panel deja sus propios valores como respaldo en su CSS. Si este
   archivo no carga (madre caída), el panel sigue viéndose bien, no en blanco.

   Decisiones de color, no negociables:
   · Fondo blanco, letra BIEN NEGRA (#100E0A), contraste mínimo 5:1.
   · El amarillo es acento de RELLENO, con letra negra encima.
   · El amarillo NO se usa como color de texto: sobre blanco da 1,7:1 y no se lee.
     Para texto amarillo va --hz-sol-ink (dorado, ≈5:1).
   · Nada de font-weight 300 en texto corrido. Micro-texto: 13,5 a 15 px.
   12-nov-2026.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Superficies */
  --hz-bg: #FFFFFF;           /* fondo de la página */
  --hz-card: #FFFFFF;         /* tarjetas y paneles */
  --hz-raised: #FBFAF7;       /* algo por encima del fondo */
  --hz-soft: #F5F3EE;         /* relleno suave, filas alternas */
  --hz-soft-2: #FAF9F6;
  --hz-line: #E5E2DA;         /* bordes */
  --hz-line-2: #CFCBC1;       /* bordes con más presencia */

  /* ── Texto (CLAUDE.md: letras bien negras, contraste ≥5:1) */
  --hz-ink: #100E0A;          /* texto principal */
  --hz-ink-2: #3C3831;        /* secundario */
  --hz-mut: #6A6459;          /* apagado, mínimo legible sobre blanco */

  /* ── Acento: el amarillo de HORIZON */
  --hz-sol: #FFDE05;          /* RELLENO. Siempre con --hz-on-sol encima */
  --hz-sol-2: #FFC300;        /* relleno alternativo, un punto más cálido */
  --hz-sol-deep: #C9A200;     /* bordes y hover */
  --hz-sol-ink: #8A6A00;      /* el amarillo cuando es TEXTO. Nunca --hz-sol */
  --hz-sol-bg: rgba(255, 222, 5, 0.20);  /* fondo tenue, para chips */
  --hz-sol-line: rgba(201, 162, 0, 0.55);
  --hz-on-sol: #100E0A;       /* lo que va ARRIBA del amarillo */

  /* ── Estado. Pensados para leerse sobre blanco, no para semáforos. */
  --hz-ok: #1B7F3B;    --hz-ok-bg: rgba(27, 127, 59, 0.12);
  --hz-warn: #8A6A00;  --hz-warn-bg: rgba(255, 222, 5, 0.20);
  --hz-bad: #C62F1B;   --hz-bad-bg: rgba(198, 47, 27, 0.10);
  --hz-info: #1F6FB2;  --hz-info-bg: rgba(31, 111, 178, 0.10);

  /* ── Color por cliente (el mismo en todos los paneles) */
  --hz-kika: #7C3AED;
  --hz-santi: #1F6FB2;
  --hz-pepe: #1B7F3B;
  --hz-lucas: #C2410C;
  --hz-horizon: #8A6A00;

  /* ── Forma y texto */
  --hz-r: 16px;               /* radio de tarjeta */
  --hz-r-sm: 10px;
  --hz-shadow: 0 2px 10px rgba(16, 14, 10, 0.06);
  --hz-shadow-lift: 0 12px 28px rgba(16, 14, 10, 0.10);
  --hz-font: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hz-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --hz-fs-micro: 13.5px;      /* piso de micro-texto. Nada más chico. */
}

/* ───────────── Componentes base. Opcionales: un panel los adopta cuando
   le toca tocar ese pedazo, no hay que reescribir todo de golpe. ───────── */

.hz-card {
  background: var(--hz-card);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-r);
  box-shadow: var(--hz-shadow);
  padding: 18px 20px;
}

.hz-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--hz-sol); color: var(--hz-on-sol);
  border: 1px solid transparent; border-radius: 999px;
  padding: 10px 16px; font: 700 14px var(--hz-font); cursor: pointer;
}
.hz-btn:hover { background: var(--hz-sol-2); }
.hz-btn--ghost { background: transparent; color: var(--hz-ink); border-color: var(--hz-line-2); }
.hz-btn--ghost:hover { border-color: var(--hz-sol-deep); color: var(--hz-sol-ink); }

.hz-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--hz-soft); color: var(--hz-ink-2);
  border: 1px solid var(--hz-line); border-radius: 999px;
  padding: 6px 12px; font: 700 var(--hz-fs-micro) var(--hz-font);
}
.hz-pill--on { background: var(--hz-sol-bg); color: var(--hz-ink); border-color: var(--hz-sol-line); }

/* Tarjeta de número. El subtítulo NO es decorativo: un número sin comparación
   ni objetivo no deja decidir nada. Ver reference_diseno_dashboards_evidencia. */
.hz-kpi { display: flex; flex-direction: column; }
.hz-kpi__v { font: 900 32px/1 var(--hz-font); letter-spacing: -1px; color: var(--hz-ink); }
.hz-kpi__k { font: 600 13px var(--hz-font); color: var(--hz-ink-2); margin-top: 6px; }
.hz-kpi__sub { font: 600 12px/1.35 var(--hz-font); color: var(--hz-mut); margin-top: 7px; }

/* Barra con marca de objetivo. Reemplaza medidores y donas de avance. */
.hz-bullet { position: relative; height: 10px; background: var(--hz-soft); border-radius: 999px; overflow: hidden; }
.hz-bullet__fill { height: 100%; background: var(--hz-sol); border-radius: 999px; transition: width .4s ease; }
.hz-bullet__target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--hz-ink); }

.hz-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Estado vacío: dice por qué está vacío y qué sigue, no solo "sin datos". */
.hz-empty { color: var(--hz-mut); font: 600 14px var(--hz-font); text-align: center; padding: 28px 14px; }

/* Dato del período en curso: va punteado para no mezclarlo con uno cerrado. */
.hz-parcial { border-bottom: 1.5px dashed var(--hz-sol-deep); }