:root { color-scheme: light; --fondo:#f4f3f0; --sup:#fcfcfb; --tx:#0b0b0b; --tx2:#52514e; --linea:#e2e0da; --serie:#2a78d6; --suave:#ecebe6; --error:#a3261b; }
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --fondo:#111110; --sup:#1a1a19; --tx:#f0efec; --tx2:#c3c2b7; --linea:#33322f; --serie:#3987e5; --suave:#262624; --error:#f0897f; }
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--fondo); color:var(--tx); font:15px/1.45 system-ui,sans-serif; }
h1 { font-size:22px; margin:0; } h2 { font-size:15px; margin:0 0 12px; }
.cabecera { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px; max-width:1180px; margin:0 auto; }
.cabecera p { margin:2px 0 0; color:var(--tx2); font-size:13px; }
main { max-width:1180px; margin:0 auto; padding:0 16px 40px; }
button { font:600 14px system-ui,sans-serif; padding:9px 16px; border:0; border-radius:7px; background:var(--serie); color:#fff; cursor:pointer; }
button.sec { background:var(--suave); color:var(--tx); }
input, select { font:14px system-ui,sans-serif; padding:7px; border:1px solid var(--linea); border-radius:6px; background:var(--sup); color:var(--tx); max-width:100%; }
.filtros { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-bottom:16px; }
.filtros label { display:grid; gap:3px; font-size:12px; color:var(--tx2); }
.atajos { display:flex; gap:12px; padding-bottom:9px; }
button.enlace { background:none; color:var(--tx2); padding:0; font-weight:400; font-size:13px; text-decoration:underline; }
.tarjetas { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-bottom:12px; }
.tarjeta, .panel { background:var(--sup); border:1px solid var(--linea); border-radius:10px; padding:14px; }
.tarjeta { display:grid; gap:2px; align-content:start; }
.tarjeta strong { font-size:26px; font-weight:650; line-height:1.15; font-variant-numeric:tabular-nums; }
.etiqueta, .tarjeta small, .cifra small, .vacio, .maximo, .extremos { color:var(--tx2); font-size:12px; }
.panel.ancho { margin-bottom:12px; }
.rejilla { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr)); gap:12px; margin-bottom:12px; }
.barras { display:grid; gap:7px; }
.fila { display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr) 92px; gap:8px; align-items:center; font-size:13px; }
.pista { width:100%; height:18px; display:block; }
.marca { fill:var(--serie); }
.hit { fill:transparent; } g:hover .hit { fill:var(--suave); }
.cifra { text-align:right; font-variant-numeric:tabular-nums; }
.vacio { margin:0; }
.dias .lienzo { width:100%; height:150px; display:block; border-bottom:1px solid var(--linea); margin-top:4px; }
.extremos { display:flex; justify-content:space-between; margin-top:4px; }
table { border-collapse:collapse; width:100%; margin-top:10px; font-size:13px; }
th, td { text-align:left; padding:5px 6px; border-bottom:1px solid var(--linea); } td:last-child, th:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.aviso { color:var(--tx2); font-size:13px; }
.tabla { overflow-x:auto; }
summary { cursor:pointer; font-weight:600; }
.error { color:var(--error); }
.entrada { display:grid; place-items:center; min-height:100vh; padding:16px; }
.acceso { background:var(--sup); border:1px solid var(--linea); border-radius:10px; padding:22px; width:min(100%,340px); display:grid; gap:12px; }
.acceso label { display:grid; gap:4px; font-size:13px; }
.acceso input:not([type=hidden]) { width:100%; }
@media (max-width:520px) { .fila { grid-template-columns:1fr 84px; } .fila .pista { grid-column:1 / -1; grid-row:2; } }