/* Paleta validada con el validador de la skill dataviz: los dos modos pasan las seis
   comprobaciones (banda de luminosidad, croma, separación CVD, suelo de visión normal y
   contraste sobre su superficie). El par azul/rojo se eligió por polaridad —ganado contra
   perdido— y porque su separación es holgada: ΔE CVD 21,6 en claro y 19,2 en oscuro. */
:root {
  color-scheme: light;
  --plano:            #f9f9f7;
  --superficie:       #fcfcfb;
  --tinta-primaria:   #0b0b0b;
  --tinta-secundaria: #52514e;
  --tinta-muda:       #898781;
  --rejilla:          #e1e0d9;
  --eje:              #c3c2b7;
  --carril:           #eeede8;
  --borde:            rgba(11, 11, 11, 0.10);
  --serie-1:          #2a78d6;
  --serie-ganado:     #2a78d6;
  --serie-perdido:    #e34948;
  --grave:            #d03b3b;
}
/* El modo oscuro son sus propios pasos sobre la superficie oscura, no un volteo automático. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plano:            #0d0d0d;
    --superficie:       #1a1a19;
    --tinta-primaria:   #ffffff;
    --tinta-secundaria: #c3c2b7;
    --tinta-muda:       #898781;
    --rejilla:          #2c2c2a;
    --eje:              #383835;
    --carril:           #242422;
    --borde:            rgba(255, 255, 255, 0.10);
    --serie-1:          #3987e5;
    --serie-ganado:     #3987e5;
    --serie-perdido:    #e66767;
    --grave:            #e66767;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plano: #0d0d0d; --superficie: #1a1a19;
  --tinta-primaria: #ffffff; --tinta-secundaria: #c3c2b7; --tinta-muda: #898781;
  --rejilla: #2c2c2a; --eje: #383835; --carril: #242422;
  --borde: rgba(255,255,255,0.10);
  --serie-1: #3987e5; --serie-ganado: #3987e5; --serie-perdido: #e66767; --grave: #e66767;
}

* { box-sizing: border-box }
body {
  margin: 0; padding: 16px;
  background: var(--plano); color: var(--tinta-primaria);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
#app { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px }

.controles { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end }
.control { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--tinta-secundaria) }
.control select {
  font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta-primaria);
}
.controles-derecha { margin-left: auto; display: flex; align-items: center; gap: 10px }
.momento { font-size: 12px; color: var(--tinta-muda) }
.boton {
  font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta-primaria);
}
.boton:hover { border-color: var(--eje) }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px }
.kpi {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
  border-top: 3px solid var(--eje);
}
.kpi-ganado  { border-top-color: var(--serie-ganado) }
.kpi-perdido { border-top-color: var(--serie-perdido) }
.kpi-nombre { font-size: 12px; color: var(--tinta-secundaria) }
/* Cifras grandes con figuras proporcionales; tabular-nums se reserva para columnas. */
.kpi-valor { font-size: 25px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.2 }
.kpi-pie { font-size: 11.5px; color: var(--tinta-muda) }

.panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 14px 16px }
.panel-titulo { margin: 0; font-size: 14px; font-weight: 600 }
.panel-sub { margin: 2px 0 10px; font-size: 12px; color: var(--tinta-muda) }
.nota { margin: 8px 0 0; font-size: 13px; color: var(--tinta-secundaria) }

.leyenda { display: flex; gap: 16px; margin-bottom: 6px }
.leyenda-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-secundaria) }
.punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block }
.punto-ganado { background: var(--serie-ganado) }
.punto-perdido { background: var(--serie-perdido) }

.marca { transition: opacity .12s }
svg:hover .marca { opacity: .45 }
svg .marca:hover { opacity: 1 }
.marca.marcada { opacity: .72 }

.avisos { background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--eje); border-radius: 8px; padding: 10px 14px }
.avisos-titulo { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--tinta-secundaria) }
.avisos-lista { margin: 0; padding-left: 18px }
.aviso { font-size: 12.5px; color: var(--tinta-secundaria); margin: 2px 0 }
.aviso.grave { color: var(--grave); font-weight: 500 }

.tabla-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px }
.tabla-caja summary { cursor: pointer; font-size: 13px; color: var(--tinta-secundaria) }
.tabla { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12.5px }
.tabla th, .tabla td { padding: 5px 8px; border-bottom: 1px solid var(--rejilla); text-align: left }
.tabla th { color: var(--tinta-muda); font-weight: 600 }
.tabla td.num { text-align: right; font-variant-numeric: tabular-nums }

.alcance { margin: 0; font-size: 12px; color: var(--tinta-muda); text-align: center; padding-bottom: 4px }

.estado { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 28px; text-align: center }
.estado-titulo { margin: 0 0 6px; font-size: 15px; font-weight: 600 }
.estado-mensaje { margin: 0 auto 8px; font-size: 13px; color: var(--tinta-secundaria); max-width: 60ch }
.estado-pie { margin: 0 0 12px; font-size: 12px; color: var(--tinta-muda) }
.estado-error .estado-titulo { color: var(--grave) }
.barra-progreso { height: 5px; background: var(--carril); border-radius: 3px; overflow: hidden; max-width: 320px; margin: 10px auto }
.barra-progreso-relleno { height: 100%; background: var(--serie-1); border-radius: 3px; transition: width .2s }

/* Ninguna caja ancha desborda el body: la tabla y las gráficas se desplazan dentro de la suya. */
.panel svg, .tabla-caja { max-width: 100%; overflow-x: auto }