:root{--f:#0d0f12;--p:#161a20;--p2:#1e242c;--b:#2a313b;--t:#e8ecf1;--s:#8b95a3;--v:#30d158;--r:#ff453a;--a:#ffb020;--az:#0a84ff;--m:#bf5af2}
*{box-sizing:border-box}
html,body{margin:0;background:var(--f);color:var(--t);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input{font:inherit;color:inherit}
h1{font-size:20px;margin:0}h2{font-size:16px;margin:0 0 8px}
.sub{color:var(--s);font-size:12px}
.num{font-variant-numeric:tabular-nums}

#cabecera{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;background:var(--p);border-bottom:1px solid var(--b)}
#cabecera .tit{flex:1 1 220px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--p2);border:1px solid var(--b);border-radius:999px;padding:3px 10px;font-size:12px;white-space:nowrap}
.chip b{font-variant-numeric:tabular-nums}
.btn{background:var(--az);border:0;border-radius:8px;padding:7px 12px;cursor:pointer;font-weight:600}
.btn.sec{background:var(--p2);border:1px solid var(--b);font-weight:500}
.btn.peq{padding:3px 8px;font-size:12px}
.btn:hover{filter:brightness(1.15)}
#pestanas{display:flex;gap:4px;padding:8px 16px 0;background:var(--p);border-bottom:1px solid var(--b);position:sticky;top:0;z-index:500}
#pestanas button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;cursor:pointer;color:var(--s)}
#pestanas button.activa{color:var(--t);border-bottom-color:var(--r)}
#barraAdmin{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 16px;background:#3a2a0a;border-bottom:1px solid #6b4d12}
#barraAdmin[hidden]{display:none}
#barraAdmin input{background:var(--f);border:1px solid var(--b);border-radius:6px;padding:4px 8px;width:min(320px,60vw)}

main{padding:14px 16px 40px}
.vista{display:grid;gap:14px}
.vista[hidden]{display:none}
#vistaStints{grid-template-columns:minmax(300px,380px) minmax(0,1fr);align-items:start}
.lista{display:grid;gap:10px}

.stint{background:var(--p);border:1px solid var(--b);border-left:4px solid var(--c,var(--b));border-radius:10px;padding:10px 12px;cursor:pointer}
.stint.activo{border-color:var(--az);border-left-color:var(--c,var(--az));background:var(--p2)}
.stint .fila1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.stint .piloto{font-weight:700;font-size:15px}
.stint .piloto.sin-nombre{color:var(--s);font-weight:500;font-style:italic}
.stint .datos{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:12px;color:var(--s)}
.stint .datos b{color:var(--t);font-variant-numeric:tabular-nums}
.stint svg{display:block;width:100%;height:26px;margin-top:6px}
.stint .edicion{display:grid;gap:6px;margin-top:8px;cursor:default}
.stint .edicion input{background:var(--f);border:1px solid var(--b);border-radius:6px;padding:5px 8px;width:100%}
.stint .sesiones{display:flex;flex-wrap:wrap;gap:4px}
.ses-chip{display:inline-flex;align-items:center;gap:4px;background:var(--f);border:1px solid var(--b);border-radius:6px;padding:2px 6px;font-size:11px;color:var(--s)}
.ses-chip button{background:none;border:0;color:var(--a);cursor:pointer;padding:0 2px}
.excluidos{opacity:.7}
.filtro{display:flex;gap:8px;align-items:center;background:var(--p2);border:1px solid var(--az);border-radius:10px;padding:8px 12px}

.detalle{display:grid;gap:12px;min-width:0}
.panel{background:var(--p);border:1px solid var(--b);border-radius:12px;padding:12px;min-width:0}
.tiles{display:flex;flex-wrap:wrap;gap:8px}
.tile{background:var(--p);border:1px solid var(--b);border-radius:10px;padding:7px 12px;min-width:104px}
.tile b{display:block;font-size:18px;font-variant-numeric:tabular-nums}
.tile span{color:var(--s);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.acciones{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.mapa{height:340px;border-radius:12px;border:1px solid var(--b);background:#1a1f26}
.graf{background:var(--p);border:1px solid var(--b);border-radius:12px;padding:8px;height:240px;position:relative;min-width:0}
.graf.baja{height:200px}
.graf[hidden]{display:none}
.graficas{display:grid;gap:12px;min-width:0}

table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:6px 8px;border-bottom:1px solid var(--b);text-align:right;white-space:nowrap}
th{color:var(--s);font-weight:500;font-size:12px;position:sticky;top:0;background:var(--p)}
th:first-child,td:first-child{text-align:left}
tbody tr{cursor:pointer}
tbody tr:hover{background:#ffffff08}
tr.mejor td.tm{color:var(--v);font-weight:700}
tr.invalida td{color:var(--s)}
tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--col)}
.barra-t{display:inline-block;height:8px;border-radius:4px;background:var(--az);vertical-align:middle;opacity:.7}
.tabla-scroll{overflow:auto;max-height:420px}
.muro{display:flex;flex-wrap:wrap;gap:6px}
.muro span{border-radius:6px;padding:2px 8px;font-size:12px;background:#ffd60a22;border:1px solid #ffd60a66}
.muro span.urg{background:#ff453a22;border-color:#ff453a88}
.leyenda{background:#0d0f12d0;color:var(--t);padding:6px 9px;border-radius:8px;font-size:12px}
.leyenda i{display:block;height:8px;width:150px;border-radius:4px;margin:4px 0;background:linear-gradient(90deg,#2f6bff,#26c6da,#30d158,#ffd60a,#ff9f0a,#ff453a)}
.vacio{color:var(--s);padding:30px;text-align:center}
.comparar{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:14px;align-items:start}
.cmp{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--b)}
.cmp .col{width:12px;height:12px;border-radius:3px;flex:none}
.cmp .txt{flex:1;min-width:0}
.cmp button{background:none;border:0;color:var(--s);cursor:pointer;font-size:16px}
.volver{display:none}

#carga{position:fixed;inset:0;background:var(--f);display:flex;align-items:center;justify-content:center;z-index:2000}
#carga[hidden]{display:none}
#carga .caja{width:min(360px,90vw);display:grid;gap:8px;text-align:center}
#carga .barra{height:6px;background:var(--p2);border-radius:3px;overflow:hidden}
#carga i{display:block;height:100%;width:0;background:var(--r);transition:width .2s}

@media (max-width:900px){
  main{padding:12px}
  #vistaStints,.comparar{grid-template-columns:minmax(0,1fr)}
  body.con-detalle #listaStints{display:none}
  body:not(.con-detalle) #detalle{display:none}
  .volver{display:inline-block}
  .mapa{height:280px}
}