:root {
  color-scheme: dark;
  --bg: #061713; --panel: #10302A; --panel-2: #0B2922; --border: rgba(216,221,217,.10);
  --text: #FFFFFF; --text-dim: #D8DDD9; --text-faint: #9DB1A9;
  --verde: #0B2922; --esmeralda: #0D5E51; --dorado: #E2BE59; --menta: #4CC9A4; --plata: #D8DDD9;
  --grid: rgba(255,255,255,.08); --eje: rgba(255,255,255,.18); --track: rgba(255,255,255,.07);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #9085e9; --s7: #e66767;
  --bueno: #0ca30c; --alerta: #fab219; --critico: #e66767;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; padding: 0 16px 64px; }
a { color: var(--menta); }
.wrap { max-width: 1180px; margin: 0 auto; }
.num { font-variant-numeric: tabular-nums; }

header.cabecera { margin: 0 -16px 20px; padding: 24px 16px 20px; background: radial-gradient(130% 140% at 50% 0%, var(--esmeralda) 0%, var(--verde) 60%, var(--bg) 100%); border-bottom: 1px solid rgba(226,190,89,.35); }
.cabecera .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cabecera h1 { font-size: 22px; font-weight: 800; margin: 0 0 2px; }
.cabecera h1 span { color: var(--dorado); }
.cabecera p { margin: 0; color: var(--text-dim); font-size: 13px; }
.cabecera .estado { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--menta); animation: pulse 2s infinite; }
.dot.error { background: var(--critico); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(76,201,164,.5); } 70% { box-shadow: 0 0 0 6px rgba(76,201,164,0); } 100% { box-shadow: 0 0 0 0 rgba(76,201,164,0); } }

.filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 14px; }
.filtros label { font-size: 12px; color: var(--text-faint); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.filtros select, .filtros input[type=date], .filtros button { font: inherit; font-size: 13px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.filtros button { cursor: pointer; background: var(--esmeralda); border-color: transparent; font-weight: 700; }
.filtros button:hover { filter: brightness(1.1); }
.segmento { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.segmento button { border: 0; border-radius: 0; background: var(--panel-2); color: var(--text-dim); font-weight: 600; padding: 6px 12px; }
.segmento button.activo { background: var(--esmeralda); color: #fff; }
.mostrando { color: var(--text-faint); font-size: 12.5px; margin: 0 0 18px; }
.mostrando b { color: var(--text-dim); }

nav.productos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 24px; }
nav.productos a { display: block; text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; border-top: 3px solid var(--borde-prod, var(--dorado)); transition: transform .15s; }
nav.productos a:hover { transform: translateY(-2px); }
nav.productos .nombre { font-size: 12px; color: var(--text-faint); font-weight: 600; }
nav.productos .valor { font-size: 20px; font-weight: 800; margin-top: 2px; }
nav.productos .sub { font-size: 11.5px; color: var(--text-faint); }

section.seccion { margin-bottom: 36px; scroll-margin-top: 12px; }
section.seccion > h2 { font-size: 18px; font-weight: 800; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
section.seccion > h2 .chip { width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: var(--chip, var(--dorado)); }
section.seccion > .descripcion { color: var(--text-faint); font-size: 13px; margin: 0 0 14px; max-width: 900px; }
.aviso { background: rgba(226,190,89,.10); border: 1px solid rgba(226,190,89,.35); color: var(--text-dim); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin: 0 0 14px; }
.aviso.error { background: rgba(230,103,103,.10); border-color: rgba(230,103,103,.4); }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.kpi { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); padding: 16px 18px; border-left: 3px solid var(--acento, transparent); }
.kpi .valor { font-size: 28px; font-weight: 800; line-height: 1.15; }
.kpi .valor.sin { color: var(--text-faint); font-size: 22px; }
.kpi .label { margin-top: 4px; color: var(--text-dim); font-size: 12.5px; font-weight: 700; }
.kpi .sub { margin-top: 2px; color: var(--text-faint); font-size: 12px; }
.kpis .kpi:first-child .valor { font-size: 34px; }

.bloques { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); padding: 18px 20px 20px; min-width: 0; }
.panel.ancho { grid-column: 1 / -1; }
.panel h3 { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dorado); margin: 0 0 2px; }
.panel .sub { color: var(--text-faint); font-size: 12px; margin: 0 0 14px; }
.panel .cabecera-panel { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.panel .ver-tabla { font: inherit; font-size: 11.5px; color: var(--text-faint); background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; cursor: pointer; white-space: nowrap; }
.panel .ver-tabla:hover { color: var(--text); }
.vacio { color: var(--text-faint); font-size: 13px; padding: 18px 0; text-align: center; border: 1px dashed var(--border); border-radius: 10px; }

.leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-dim); margin: 0 0 8px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.leyenda i.linea { height: 2px; width: 14px; border-radius: 1px; }

svg.grafico { display: block; width: 100%; height: auto; overflow: visible; }
svg.grafico text { fill: var(--text-faint); font-size: 11px; font-family: inherit; }
svg.grafico text.valor { fill: var(--text-dim); font-weight: 600; }
svg.grafico .grid { stroke: var(--grid); stroke-width: 1; }
svg.grafico .eje { stroke: var(--eje); stroke-width: 1; }
svg.grafico .hit { fill: transparent; cursor: crosshair; }
svg.grafico .resaltado { fill: rgba(255,255,255,.06); }
svg.grafico .crosshair { stroke: var(--text-faint); stroke-width: 1; }

.barras-h { display: grid; gap: 8px; }
.fila-barra { display: grid; grid-template-columns: minmax(120px, 36%) 1fr auto; align-items: center; gap: 10px; cursor: default; }
.fila-barra .label { font-size: 12.5px; color: var(--text-dim); overflow-wrap: anywhere; line-height: 1.3; }
.fila-barra .label small { display: block; color: var(--text-faint); font-size: 11px; font-weight: 400; line-height: 1.3; }
.fila-barra .track { background: var(--track); border-radius: 0 4px 4px 0; height: 18px; position: relative; }
.fila-barra .barra { height: 100%; border-radius: 0 4px 4px 0; background: var(--color, var(--s1)); min-width: 2px; transition: filter .1s; }
.fila-barra:hover .barra { filter: brightness(1.15); }
.fila-barra .valor { font-size: 12.5px; font-weight: 700; color: var(--text-dim); white-space: nowrap; min-width: 70px; text-align: right; }

table.tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tabla th { text-align: left; color: var(--text-faint); font-weight: 600; font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--eje); white-space: nowrap; }
table.tabla td { padding: 6px 8px; border-bottom: 1px solid var(--grid); color: var(--text-dim); vertical-align: top; }
table.tabla td.num, table.tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabla td.estado-OK { color: var(--menta); font-weight: 700; }
table.tabla td.estado-Error { color: var(--critico); font-weight: 700; }
table.tabla tr:last-child td { border-bottom: 0; }
.tabla-scroll { overflow-x: auto; }

#tooltip { position: fixed; pointer-events: none; z-index: 10; background: #0B2922; border: 1px solid rgba(216,221,217,.25); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--text-dim); box-shadow: 0 6px 20px rgba(0,0,0,.45); display: none; max-width: 300px; }
#tooltip .t { font-weight: 700; color: #fff; margin-bottom: 4px; }
#tooltip .fila { display: flex; justify-content: space-between; gap: 14px; }
#tooltip .fila b { color: #fff; font-variant-numeric: tabular-nums; }
#tooltip .fila i { width: 12px; height: 3px; border-radius: 1px; display: inline-block; margin-right: 6px; vertical-align: middle; }
#tooltip .fila.total { border-top: 1px solid var(--grid); margin-top: 4px; padding-top: 4px; }

footer { color: var(--text-faint); font-size: 11.5px; margin-top: 30px; text-align: center; }
body.cargando .contenido { opacity: .55; transition: opacity .2s; }
.error-carga { background: rgba(230,103,103,.12); border: 1px solid rgba(230,103,103,.4); border-radius: 12px; padding: 16px; margin: 20px 0; }

@media (max-width: 900px) {
  nav.productos { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .bloques { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  nav.productos { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
  .fila-barra { grid-template-columns: minmax(90px, 40%) 1fr auto; }
}