/* ════════════════════════════════════════════════════════════════
   Huellas · sistema visual del panel (css/ui.css)
   Tokens nuevos apoyados en los nombres de marca que ya existen (--morado, --naranja, --crema, --tinta, --gris, --borde)
   y componentes con prefijo hl-. CSS plano, sin compilar. El modo oscuro queda para cuando todo el panel use tokens:
   hoy varias plantillas tienen colores fijos que no cambiarían de tema.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* superficies y texto */
  --surface: #ffffff;
  --surface-2: #f7f0e4;
  --line: var(--borde);
  --text-main: var(--tinta);
  --text-soft: var(--gris);
  /* marca */
  --primary: var(--morado);
  --primary-soft: #ece6f4;
  --accent: var(--naranja);
  --accent-soft: #f8e4d8;
  /* estado: independiente de la marca */
  --ok: #3e7a24;   --ok-soft: #e4f0da;
  --warn: #9a6212; --warn-soft: #fbebcf;
  --crit: #a11d1d; --crit-soft: #fbe1e1;
  /* series de gráficos */
  --serie-1: #6a4fa3;
  --serie-2: #c4622f;
  /* forma y movimiento */
  --radio-s: 8px; --radio-m: 12px; --radio-l: 18px;
  --sombra-1: 0 1px 2px rgb(46 34 51 / .06), 0 4px 14px rgb(46 34 51 / .05);
  --sombra-2: 0 2px 4px rgb(46 34 51 / .06), 0 12px 32px rgb(46 34 51 / .10);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ——— KPI ——— */
.hl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.hl-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio-l); padding: 14px 16px 12px; box-shadow: var(--sombra-1);
  display: grid; gap: 3px; min-width: 0; text-align: left; font: inherit; color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease); }
.hl-kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.hl-kpi.hl-kpi--filtro { cursor: pointer; }
.hl-kpi.hl-kpi--filtro:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hl-kpi.activo { border-color: var(--kpi-color, var(--primary)); box-shadow: 0 0 0 1px var(--kpi-color, var(--primary)), var(--sombra-1); }
.hl-kpi__rotulo { font-size: 12px; font-weight: 600; color: var(--text-soft); letter-spacing: .02em; }
.hl-kpi__valor { font-family: var(--serif); font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--kpi-color, var(--text-main)); }
.hl-kpi__nota { font-size: 11px; color: var(--text-soft); }
.hl-kpi__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.hl-kpi svg { width: 88px; height: 28px; color: var(--primary); overflow: visible; flex: none; }
.hl-delta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-delta.sube { background: var(--ok-soft); color: var(--ok); }
.hl-delta.baja { background: var(--crit-soft); color: var(--crit); }
.hl-delta.neutro { background: var(--surface-2); color: var(--text-soft); }

/* ——— chips y pastillas de estado ——— */
.hl-chip, .hl-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 2px 10px; white-space: nowrap; background: var(--surface-2); color: var(--text-soft); }
.hl-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.hl-chip.ok, .hl-pill.ok { background: var(--ok-soft); color: var(--ok); }
.hl-chip.warn, .hl-pill.warn { background: var(--warn-soft); color: var(--warn); }
.hl-chip.crit, .hl-pill.crit { background: var(--crit-soft); color: var(--crit); }
.hl-chip.primary, .hl-pill.primary { background: var(--primary-soft); color: var(--primary); }
.hl-chip.accent, .hl-pill.accent { background: var(--accent-soft); color: var(--accent); }
.hl-alerta { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; font-weight: 700; line-height: 1.35; }
.hl-alerta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex: none; background: var(--warn); }
.hl-alerta.rojo { color: var(--crit); } .hl-alerta.rojo::before { background: var(--crit); }
.hl-alerta.amarillo { color: var(--warn); }

/* ——— tablas ——— */
.hl-tabla-caja { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio-l); box-shadow: var(--sombra-1); overflow: hidden; min-width: 0; }
.hl-tabla-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.hl-tabla-cab h3 { margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--primary); letter-spacing: -.01em; }
.hl-tabla-cab .hl-sub { font-size: 12px; color: var(--text-soft); margin-top: 3px; line-height: 1.4; max-width: 70ch; }
.hl-tabla-pie { padding: 10px 18px 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-soft); line-height: 1.55; }
.hl-tabla-scroll { overflow-x: auto; }
.hl-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hl-tabla th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); padding: 9px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.hl-tabla td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.hl-tabla tbody tr { transition: background-color .15s var(--ease); }
.hl-tabla tbody tr:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.hl-tabla tbody tr:last-child td { border-bottom: 0; }
.hl-tabla .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.hl-tabla th.num { text-align: right; }
.hl-tabla .sub { display: block; font-size: 11px; color: var(--text-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }
.hl-tabla tr.urgente td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.hl-tabla .grupo-ml { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.hl-tabla th.grupo-ml { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.hl-tabla .ancha { min-width: 900px; }

/* ——— gráfico (contenedor para Chart.js; los colores del gráfico se leen de los tokens) ——— */
.hl-grafico { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio-l); box-shadow: var(--sombra-1); padding: 14px 18px 10px; display: grid; gap: 8px; min-width: 0; }
.hl-grafico__lienzo { position: relative; height: 280px; }

@media (prefers-reduced-motion: reduce) {
  .hl-kpi, .hl-tabla tbody tr { transition: none; }
  .hl-kpi:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   Tokens de color para texto y fondos tintados + tema oscuro del panel.
   Los valores claros son los que ya usaba el sitio; el oscuro se activa con <html data-tema="oscuro">
   (lo pone render() solo dentro del panel y según la preferencia guardada: claro / oscuro / auto).
   La tienda pública nunca recibe el atributo, así que no cambia.
   Los documentos que se imprimen o exportan a PDF (etiquetas, cotización, comprobante, PDF de Finanzas) usan colores fijos a propósito.
   ════════════════════════════════════════════════════════════════ */
:root {
  --txt: #2e2233;                                  /* texto principal (antes var(--tinta) usado como color) */
  --t-morado: #453069; --t-magenta: #8a2846; --t-naranja: #c4622f; --t-verde: #5fa13b;
  --t-ok: #2f6b21; --t-warn: #8a4a12; --t-crit: #a11d1d; --t-info: #2a6db5;
  --tint-warn: #fdeeda; --tint-ok: #e7f2df; --tint-crit: #f9e6ec; --tint-info: #e6f0fb;
  --tint-gris: #eef1f5; --tint-prim: #f7f1fa; --tint-crema: #fff8ee;
  --btn-gris: #c9bfd0; --t-warn2: #c98a1e;
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --crema: #17121b; --surface: #231b29; --surface-2: #2b2231; --borde: #3b3043; --gris: #b4a7bb;
  --txt: #f0e8f3;
  --t-morado: #c1b0ea; --t-magenta: #f29ab8; --t-naranja: #f2a073; --t-verde: #93d26d;
  --t-ok: #9fdc82; --t-warn: #f0c27a; --t-crit: #f5a0a0; --t-info: #8fc0f2;
  --tint-warn: #3d2f1b; --tint-ok: #1f3320; --tint-crit: #3d2028; --tint-info: #1c2c40;
  --tint-gris: #2a2830; --tint-prim: #2d2538; --tint-crema: #2c241d;
  --btn-gris: #4a3f52; --t-warn2: #e4ac2f;
  --text-main: var(--txt); --text-soft: var(--gris);
  --primary: #c1b0ea; --primary-soft: #2d2538; --accent: #f2a073; --accent-soft: #3a281d;
  --ok: #93d26d; --ok-soft: #1f3320; --warn: #e0b060; --warn-soft: #3d2f1b; --crit: #f29a9a; --crit-soft: #3d2028;
  --serie-1: #a68fe0; --serie-2: #e8895a;
  --sombra-1: 0 1px 2px rgb(0 0 0 / .35), 0 4px 14px rgb(0 0 0 / .25);
  --sombra-2: 0 2px 4px rgb(0 0 0 / .35), 0 12px 32px rgb(0 0 0 / .35);
}
:root[data-tema="oscuro"] .btn.gris { background: var(--btn-gris); }
:root[data-tema="oscuro"] .card, :root[data-tema="oscuro"] .stat { box-shadow: 0 2px 10px rgb(0 0 0 / .35); }