:root{
  --fondo:#0b0e13; --panel:#141922; --panel2:#1b2230; --borde:#273043;
  --texto:#e8ecf4; --tenue:#8b96ab; --acento:#e10600;
  --amarillo:#f5c518; --verde:#37d67a; --violeta:#b44cff; --pit:#5a6478;
  --asfalto:#2a3348; --pista:#39435a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
.oculto{display:none !important}
a{color:inherit; text-decoration:none}

/* ---------------- barra ---------------- */
#barra{
  display:flex; align-items:center; gap:20px; padding:10px 18px;
  background:var(--panel); border-bottom:1px solid var(--borde); flex:0 0 auto;
}
.marca{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.logo{
  background:var(--acento); color:#fff; font-weight:800; font-style:italic;
  padding:3px 9px; border-radius:4px; letter-spacing:-1px; font-size:18px;
}
.nombre{font-weight:700; font-size:17px; letter-spacing:-.3px}
#nav{display:flex; gap:4px; flex:1 1 auto}
#nav a{
  padding:7px 13px; border-radius:6px; font-size:14px; color:var(--tenue);
  white-space:nowrap;
}
#nav a:hover{background:var(--panel2); color:var(--texto)}
#nav a.activa{background:var(--panel2); color:var(--texto); font-weight:600}
.derecha{flex:0 0 auto}
select,button{
  background:var(--panel2); color:var(--texto); border:1px solid var(--borde);
  border-radius:6px; padding:7px 10px; font-size:13px; font-family:inherit; cursor:pointer;
}
button:hover{background:#232c3d}
button:disabled{opacity:.5; cursor:default}
:focus-visible{outline:2px solid var(--acento); outline-offset:1px}

#vista{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden}

/* ---------------- vistas con scroll ---------------- */
.scroll{overflow-y:auto; padding:22px 18px 40px}
.ancho{max-width:1080px; margin:0 auto}
h1{font-size:22px; margin:0 0 4px}
.sub{color:var(--tenue); font-size:13px; margin:0 0 22px; text-align:justify; hyphens:auto}

/* ---------------- calendario ---------------- */
.gps{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.gp{
  background:var(--panel); border:1px solid var(--borde); border-radius:9px;
  padding:13px 15px; display:flex; flex-direction:column; gap:9px;
}
.gp.futuro{opacity:.5}
.gp-cab{display:flex; align-items:baseline; gap:9px}
.gp-bandera{font-size:19px; line-height:1}
.gp-nombre{font-weight:650; font-size:14px; flex:1 1 auto}
.gp-fecha{font-size:11px; color:var(--tenue); white-space:nowrap}
.gp-circ{font-size:11px; color:var(--tenue); margin-top:-4px}
.podio{display:flex; flex-direction:column; gap:3px; font-size:12px}
.podio div{display:flex; gap:7px; align-items:center}
.podio .p{width:14px; color:var(--tenue); font-variant-numeric:tabular-nums}
.podio .c{font-weight:650}
.podio .e{color:var(--tenue); font-size:11px}
.gp-ses{display:flex; flex-wrap:wrap; gap:5px; margin-top:2px}
.chip{
  font-size:11px; padding:3px 8px; border-radius:20px; border:1px solid var(--borde);
  background:var(--panel2); color:var(--tenue);
}
.chip.jugable{border-color:#3a4b6b; color:var(--texto); cursor:pointer}
.chip.jugable:hover{background:#2b3750}
.chip.res{cursor:pointer}
.chip.res:hover{background:#2b3750; color:var(--texto)}

/* ---------------- tablas ---------------- */
table{width:100%; border-collapse:collapse; font-size:13px}
th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--tenue); font-weight:600; padding:8px 10px;
  border-bottom:1px solid var(--borde); position:sticky; top:0; background:var(--fondo);
}
td{padding:8px 10px; border-bottom:1px solid #1c2331}
tr:hover td{background:var(--panel)}
.num{text-align:right; font-variant-numeric:tabular-nums}
.equipo-barra{border-left:4px solid transparent}
.pts{font-weight:700}
.cod{font-weight:700}
.tenue{color:var(--tenue)}
.medalla-1{color:#f5c518} .medalla-2{color:#c8ccd4} .medalla-3{color:#cd7f32}

/* ---------------- visor ---------------- */
.visor-cab{
  display:flex; align-items:center; gap:12px; padding:8px 16px;
  background:var(--panel); border-bottom:1px solid var(--borde); flex:0 0 auto;
}
.volver{
  width:30px; height:30px; border-radius:6px; background:var(--panel2);
  border:1px solid var(--borde); display:flex; align-items:center;
  justify-content:center; flex:0 0 auto; font-size:15px;
}
.volver:hover{background:#232c3d}
.vc-tit{display:flex; flex-direction:column; min-width:0; flex:1 1 auto}
.vc-gp{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vc-ses{font-size:11px; color:var(--tenue)}
.vc-salto{max-width:320px; flex:0 0 auto}

.visor{flex:1 1 auto; display:flex; min-height:0}
.tabla{
  flex:0 0 400px; background:var(--panel); border-right:1px solid var(--borde);
  display:flex; flex-direction:column; min-height:0;
}
.tabla-cab, .filas li{
  display:grid; grid-template-columns:26px 1fr 62px 62px 74px; gap:6px; align-items:center;
}
.tabla-cab{
  padding:8px 10px; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--tenue); border-bottom:1px solid var(--borde); flex:0 0 auto;
}
.der{text-align:right}
.filas{
  list-style:none; margin:0; padding:4px 0; overflow-y:auto; flex:1 1 auto;
  display:flex; flex-direction:column;
}
.filas li{
  padding:5px 10px 7px; border-left:4px solid transparent; font-size:13px;
  position:relative;
}
.filas li:hover{background:var(--panel2)}
.filas li.fuera{opacity:.4}
.pos{font-variant-numeric:tabular-nums; color:var(--tenue); font-size:12px; text-align:right}
.piloto{display:flex; align-items:center; gap:7px; min-width:0}
.equipo{font-size:10px; color:var(--tenue); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.neu{
  font-size:9px; font-weight:800; width:16px; height:16px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  border:2px solid currentColor; background:#0b0e13;
}
.neu.SOFT{color:#e10600} .neu.MEDIUM{color:#f5c518} .neu.HARD{color:#e8ecf4}
.neu.INTERMEDIATE{color:#37d67a} .neu.WET{color:#3b9dff} .neu.UNKNOWN{color:#5a6478}
.gap,.lider{text-align:right; font-variant-numeric:tabular-nums; font-size:12px}
.gap{font-weight:600}
.lider{color:var(--tenue)}

/* Barras de microsectores: una tira por piloto, debajo de su fila. */
.segs{
  grid-column:1 / -1; display:flex; gap:1px; height:5px; margin-top:5px;
}
.segs i{flex:1 1 0; background:var(--asfalto); border-radius:1px}
.segs i.s1{background:var(--amarillo)}
.segs i.s2{background:var(--verde)}
.segs i.s3{background:var(--violeta)}
.segs i.s4{background:var(--pit)}
/* El borde entre sectores, para que se lea dónde termina cada uno. */
.segs i.corte{margin-right:4px}

.leyenda{
  padding:8px 10px; border-top:1px solid var(--borde); font-size:11px;
  color:var(--tenue); flex:0 0 auto; display:flex; flex-wrap:wrap; gap:10px;
}
.lg{display:inline-flex; align-items:center; gap:5px}
.sw{width:9px; height:9px; border-radius:2px; display:inline-block}
.sw.verde{background:var(--verde)} .sw.violeta{background:var(--violeta)}
.sw.amarillo{background:var(--amarillo)} .sw.pit{background:var(--pit)}

.pista{flex:1 1 auto; position:relative; min-width:0}
.lienzo{width:100%; height:100%; display:block}
.reloj{
  position:absolute; top:12px; right:16px; font-variant-numeric:tabular-nums;
  font-size:13px; color:var(--tenue); background:rgba(11,14,19,.75);
  padding:5px 10px; border-radius:6px; border:1px solid var(--borde);
}
.toggle-seg{
  position:absolute; bottom:12px; right:16px; font-size:11px; padding:5px 9px;
  opacity:.75;
}
.toggle-seg.activa{background:var(--acento); border-color:var(--acento); color:#fff; opacity:1}
.avisos{
  position:absolute; top:12px; left:16px; display:flex; flex-direction:column; gap:6px;
  max-width:min(460px,55%);
}
.msg{
  font-size:12px; padding:6px 10px; border-radius:6px; background:rgba(20,25,34,.92);
  border-left:3px solid var(--tenue); line-height:1.35;
}
.msg.YELLOW,.msg.DOUBLEYELLOW{border-color:var(--amarillo)}
.msg.RED{border-color:var(--acento)}
.msg.GREEN{border-color:var(--verde)}
.msg.CHEQUERED{border-color:#e8ecf4}
.msg.SAFETYCAR{border-color:#f5a623}

.repro{
  flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:10px 16px;
  background:var(--panel); border-top:1px solid var(--borde);
}
.icono{width:38px; height:38px; border-radius:50%; font-size:14px; padding:0; flex:0 0 auto}
.tiempo{font-size:12px; color:var(--tenue); font-variant-numeric:tabular-nums; flex:0 0 auto}
.scrub{flex:1 1 auto; accent-color:var(--acento); cursor:pointer}
.velocidades{display:flex; gap:4px; flex:0 0 auto}
.vel{padding:5px 9px; font-size:12px}
.vel.activa{background:var(--acento); border-color:var(--acento); color:#fff; font-weight:600}

/* ---------------- overlay ---------------- */
.carga{
  position:fixed; inset:0; background:rgba(11,14,19,.93); display:flex;
  align-items:center; justify-content:center; z-index:50;
}
.caja{
  background:var(--panel); border:1px solid var(--borde); border-radius:10px;
  padding:24px 28px; max-width:470px; width:calc(100% - 32px);
}
.caja h2{margin:0 0 8px; font-size:17px}
.caja p{margin:0 0 14px; color:var(--tenue); font-size:13px; text-align:justify; hyphens:auto}
.barra-prog{height:6px; background:var(--panel2); border-radius:3px; overflow:hidden}
#cargaBarra{height:100%; width:0; background:var(--acento); transition:width .4s}

.aviso-datos{
  margin-top:18px; padding:11px 14px; border-radius:8px;
  background:#2a2212; border:1px solid #5a4520; color:#f0cf9a;
  font-size:12.5px; line-height:1.5; text-align:justify; hyphens:auto;
}
.aviso-datos strong{color:#ffd89a}

.vacio{color:var(--tenue); font-size:13px; padding:30px 0; text-align:center}

@media (max-width:900px){
  .visor{flex-direction:column-reverse}
  .tabla{flex:0 0 48%; border-right:none; border-top:1px solid var(--borde)}
  #barra{flex-wrap:wrap; gap:10px}
  #nav{order:3; width:100%; overflow-x:auto}
}


/* ---------------- vivo ---------------- */
.nav-vivo{
  display:flex; align-items:center; gap:7px; font-weight:700;
  background:var(--acento); color:#fff !important;
}
.nav-vivo:hover{background:#c50500}
.nav-vivo.dormido{background:var(--panel2); color:var(--tenue) !important; font-weight:600}
.nav-vivo.dormido .punto-vivo{background:var(--tenue); animation:none}
.punto-vivo{
  width:8px; height:8px; border-radius:50%; background:#fff; display:inline-block;
  animation:latir 1.4s ease-in-out infinite;
}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.25}}
.cuenta{font-weight:600; font-variant-numeric:tabular-nums; font-size:12px; opacity:.9}

.chapa-vivo{
  display:inline-flex; align-items:center; gap:6px; background:var(--acento);
  color:#fff; font-weight:800; font-size:11px; letter-spacing:.5px;
  padding:4px 9px; border-radius:5px; flex:0 0 auto;
}
.estado-vivo{font-size:11px; color:var(--tenue); flex:0 0 auto}
.btn-relato{flex:0 0 auto; font-size:12px}
.btn-relato.activo{background:var(--acento); border-color:var(--acento); color:#fff; font-weight:600}

/* La fila del que viene a tiro se enciende: es lo que hay que mirar. */
.filas li.a-tiro{background:rgba(225,6,0,.16)}
.filas li.a-tiro .gap{color:#ff6b6b}
.filas li.en-boxes{opacity:.6}
.sw.rojo{background:#ff6b6b}
.error-vivo{color:#f0cf9a; font-size:10px; margin-left:auto}

.alertas{
  position:absolute; top:12px; left:16px; display:flex; flex-direction:column;
  gap:6px; max-width:min(420px,55%); pointer-events:none;
}
.alerta{
  font-size:12.5px; padding:7px 11px; border-radius:6px;
  background:rgba(20,25,34,.95); border-left:3px solid var(--tenue);
  animation:entrar .25s ease-out;
}
.alerta.paso{border-color:var(--verde)}
.alerta.atiro{border-color:var(--acento)}
.alerta.abandono{border-color:var(--tenue)}
@keyframes entrar{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* El relato va al pie de la tabla, no encima del circuito: tapaba la curva
   que uno está mirando justo cuando el relator la está contando. */
.relato-texto{
  display:flex; flex-direction:column-reverse; gap:4px;
  max-height:120px; overflow-y:auto; padding:0 10px 10px;
}
.relato-texto div{
  font-size:12px; color:var(--tenue); line-height:1.4;
  border-left:2px solid var(--borde); padding:2px 0 2px 8px;
}
.relato-texto div:last-child{color:var(--texto); border-left-color:var(--acento)}

/* ---------------- portada del vivo ---------------- */
.portada{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:20px; padding:30px; text-align:center;
}
.portada h1{font-size:26px; margin:0}
.portada .que{color:var(--tenue); font-size:14px; max-width:520px; line-height:1.6}
.boton-vivo{
  font-size:19px; font-weight:800; letter-spacing:.5px; padding:18px 44px;
  border-radius:12px; background:var(--acento); border:none; color:#fff;
  display:flex; align-items:center; gap:12px; box-shadow:0 6px 26px rgba(225,6,0,.34);
}
.boton-vivo:hover{background:#c50500}
.boton-vivo:disabled{background:var(--panel2); color:var(--tenue); box-shadow:none}
.reloj-cuenta{
  display:flex; gap:14px; font-variant-numeric:tabular-nums;
}
.reloj-cuenta div{
  background:var(--panel); border:1px solid var(--borde); border-radius:10px;
  padding:12px 18px; min-width:78px;
}
.reloj-cuenta b{display:block; font-size:28px; line-height:1.1}
.reloj-cuenta span{font-size:10px; color:var(--tenue); text-transform:uppercase; letter-spacing:.6px}
.proxima{font-size:15px}
.proxima b{color:var(--texto)}

/* ---------------- botón grande de VIVO ---------------- */
.banner-vivo{
  display:flex; align-items:center; gap:18px; text-decoration:none;
  background:var(--panel); border:1px solid var(--borde); border-radius:14px;
  padding:16px 20px; margin:0 0 22px;
}
.banner-vivo:hover{border-color:#555}
.banner-vivo.al-aire{
  background:linear-gradient(90deg, rgba(225,6,0,.22), rgba(225,6,0,.04));
  border-color:rgba(225,6,0,.55);
}
.bv-txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.bv-txt b{font-size:16px; color:var(--texto)}
.bv-txt em{font-style:normal; font-size:13px; color:var(--tenue)}
.banner-vivo.al-aire .bv-txt em{color:#ff8f8b}

.boton-vivo.grande{
  display:inline-flex; align-items:center; gap:10px; flex:0 0 auto;
  font-size:26px; font-weight:800; letter-spacing:2px;
  padding:14px 30px; border-radius:12px; border:0;
  background:var(--acento); color:#fff;
  box-shadow:0 0 0 0 rgba(225,6,0,.55); animation:latido 2s infinite;
}
.boton-vivo.grande .punto-vivo{width:12px; height:12px}
.boton-vivo.grande em{
  font-style:normal; font-size:11px; font-weight:600; letter-spacing:.6px;
  opacity:.75; text-transform:uppercase;
}
.boton-vivo.grande[data-apagado], .boton-vivo.grande:disabled{
  background:var(--panel2); color:var(--tenue); box-shadow:none; animation:none;
}
@keyframes latido{
  0%  {box-shadow:0 0 0 0 rgba(225,6,0,.55)}
  70% {box-shadow:0 0 0 16px rgba(225,6,0,0)}
  100%{box-shadow:0 0 0 0 rgba(225,6,0,0)}
}
@media (max-width:620px){
  .banner-vivo{flex-direction:column; align-items:flex-start; gap:12px}
  .boton-vivo.grande{font-size:22px; padding:12px 24px}
}

/* ---------------- columna de ritmo ---------------- */
.ritmo{
  text-align:right; font-variant-numeric:tabular-nums; line-height:1.15;
  display:flex; flex-direction:column; align-items:flex-end;
}
.ritmo b{font-size:12px; font-weight:600; color:var(--tenue)}
.ritmo em{font-style:normal; font-size:9px; color:var(--tenue); opacity:.7}
/* El mismo código de color que los microsectores, pero de la vuelta entera:
   de un vistazo se ve quién está apretando y quién administra. */
.ritmo.mejor-sesion b{color:var(--violeta)}
.ritmo.mejoro b{color:var(--verde)}
.ritmo.sin-mejorar b{color:var(--amarillo)}
.toggle-seg.sin-datos{opacity:.5; cursor:not-allowed; text-decoration:line-through}

/* ---------------- grilla de partida (previa) ---------------- */
.grilla{width:100%; max-width:560px; margin-top:8px}
.grilla h2{font-size:15px; margin:0 0 4px; text-transform:uppercase; letter-spacing:1px}
/* En zigzag como la de verdad: la impar adelantada media caja. */
.gr-filas{
  display:grid; grid-template-columns:1fr 1fr; gap:6px 26px; margin-top:12px;
  text-align:left;
}
.gr-caja{
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  background:var(--panel); border-left:4px solid var(--borde); border-radius:6px;
  font-size:13px;
}
.gr-filas > .gr-caja:nth-child(odd){transform:translateY(-14px)}
.gr-pos{
  font-variant-numeric:tabular-nums; color:var(--tenue); font-size:11px;
  min-width:16px; text-align:right;
}
.gr-nom{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.gr-nom b{font-weight:700; font-size:13px}
.gr-largo{
  font-size:11px; color:var(--tenue); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.gr-eq{
  font-size:10px; color:var(--tenue); margin-left:auto; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:38%;
}
@media (max-width:640px){
  /* En el celular la grilla va en una sola columna: en dos, con el nombre
     completo, no entra nada y queda todo cortado. */
  .gr-filas{grid-template-columns:1fr; gap:5px}
  .gr-filas > .gr-caja:nth-child(odd){transform:none}
  .gr-eq{display:none}
}

/* ---------------- una cosa a la vez en el celular ---------------- */
.paneles{display:none; gap:0; margin-left:auto; flex:0 0 auto}
.paneles button{
  font-size:12px; padding:5px 12px; border-radius:0; background:var(--panel2);
  border:1px solid var(--borde); color:var(--tenue);
}
.paneles button:first-child{border-radius:7px 0 0 7px}
.paneles button:last-child{border-radius:0 7px 7px 0; border-left:0}
.paneles button.activo{background:var(--acento); border-color:var(--acento); color:#fff}

@media (max-width:900px){
  .paneles{display:flex}
  /* Se apila y cada panel ocupa todo: el circuito se ve grande de verdad. */
  .visor{flex-direction:column}
  .tabla{flex:1 1 auto; border-right:none; border-top:1px solid var(--borde)}
  .visor.solo-pista .tabla{display:none}
  .visor.solo-tabla .pista{display:none}

  /* Filas más compactas: el equipo se cae, que ya está en el color del borde. */
  .tabla-cab, .filas li{grid-template-columns:22px 1fr 56px 56px 66px; gap:4px}
  .filas li{padding:4px 8px 6px; font-size:12px}
  .equipo{display:none}
  .ritmo b{font-size:11px}
  .leyenda{font-size:10px; gap:7px}

  /* La cabecera no puede desbordar: el selector de sesión se achica y el
     título se corta con puntos suspensivos. */
  .visor-cab{overflow:hidden}
  .vc-salto{max-width:34%; min-width:0; font-size:12px; padding:4px 6px}
  #barra{flex-wrap:nowrap; gap:8px; padding:8px 10px}
  #nav{order:0; width:auto; overflow-x:auto; scrollbar-width:none}
  #nav::-webkit-scrollbar{display:none}
  .marca .nombre{display:none}
  .visor-cab{padding:6px 10px; gap:8px}
  .vc-tit{min-width:0; overflow:hidden}
  .vc-tit .vc-ses{display:none}
  /* Donde hay selector de sesión, el título repite lo mismo: sobra. */
  .visor-cab:has(.vc-salto) .vc-tit{display:none}
  .visor-cab:has(.vc-salto) .vc-salto{max-width:none; flex:1 1 auto}
}
@media (max-width:520px){
  #temporada{display:none}      /* se cambia desde el calendario */
  .visor-cab .vc-tit strong{font-size:13px}
  .paneles button{padding:5px 10px}
}
.banner-vivo.corriendo{
  background:linear-gradient(90deg, rgba(255,176,0,.14), transparent);
  border-color:rgba(255,176,0,.4);
}
.banner-vivo.corriendo .bv-txt em{color:#e8b45a}

/* ---------------- estado de carrera ---------------- */
.marcador{
  display:flex; align-items:baseline; gap:8px; margin-left:auto; flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.mk-vuelta{font-size:14px; font-weight:700}
.mk-reloj{font-size:12px; color:var(--tenue)}

/* La banda que explica por qué la carrera no está corriendo normal. */
.banda-pista{
  position:absolute; top:0; left:0; right:0; padding:9px 16px;
  font-size:13px; font-weight:700; letter-spacing:.4px; text-align:center;
  display:none; z-index:2;
}
.banda-pista.visible{display:block}
.banda-pista b{font-weight:800; letter-spacing:1px}
.banda-pista .sub{display:block; font-weight:500; font-size:12px; opacity:.9; letter-spacing:0}
.banda-pista.roja{background:rgba(225,6,0,.92); color:#fff; animation:latir 1.4s infinite}
.banda-pista.amarilla{background:rgba(255,196,0,.92); color:#221a00}
.banda-pista.sc{background:rgba(255,150,0,.92); color:#231400}
.banda-pista.verde{background:rgba(0,170,90,.9); color:#fff}
@keyframes latir{50%{opacity:.72}}

/* Los avisos de dirección de carrera, al pie de la tabla. Estaban encima del
   circuito y tapaban justo la parte que hay que mirar. */
.cc-caja{
  flex:0 0 auto; border-top:1px solid var(--borde); background:var(--panel);
}
.cc-caja > summary{
  padding:7px 10px; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--tenue); cursor:pointer; display:flex; gap:8px; align-items:baseline;
}
.cc-caja > summary::marker{color:var(--tenue)}
.cc-ultimo{
  text-transform:none; letter-spacing:0; font-size:11px; color:var(--texto);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.cc-caja[open] .cc-ultimo{display:none}
.control-carrera{
  display:flex; flex-direction:column-reverse; gap:4px;
  max-height:132px; overflow-y:auto; padding:0 10px 10px;
}
.cc{
  background:rgba(11,14,19,.88); border:1px solid var(--borde); border-radius:6px;
  padding:5px 9px; font-size:11px; line-height:1.35; color:var(--tenue);
  border-left-width:3px;
}
.cc b{color:var(--texto); font-weight:600; margin-right:5px;
      font-variant-numeric:tabular-nums; font-size:10px}
.cc.roja{border-left-color:var(--acento)}
.cc.amarilla{border-left-color:var(--amarillo)}
.cc.verde{border-left-color:var(--verde)}
.cc.sc{border-left-color:#ff9600}
@media (max-width:900px){
  .control-carrera{max-height:96px}
  .marcador{margin-left:0}
}

/* ---------------- radio del equipo ---------------- */
/* Los mandos van adentro, no en el resumen: un <select> dentro de un <summary>
   se come el clic y el panel no abre. */
.rd-mandos{
  display:flex; align-items:center; gap:8px; padding:0 10px 6px;
}
.rd-quien{
  text-transform:none; letter-spacing:0; font-size:11px; color:var(--texto);
  margin-left:auto;
}
.radio-piloto{
  font-size:11px; padding:2px 4px; background:var(--panel2); color:var(--texto);
  border:1px solid var(--borde); border-radius:5px; max-width:150px;
}
.radio-auto{
  display:inline-flex; align-items:center; gap:4px; text-transform:none;
  letter-spacing:0; font-size:11px; margin-left:auto;
}
.radios{
  display:flex; flex-direction:column-reverse; gap:4px;
  max-height:132px; overflow-y:auto; padding:0 10px 10px;
}
.rd{
  display:flex; align-items:center; gap:8px; font-size:11px; color:var(--tenue);
  background:rgba(11,14,19,.6); border:1px solid var(--borde); border-radius:6px;
  padding:4px 8px; border-left:3px solid var(--borde);
}
.rd.sonando{border-left-color:var(--acento); color:var(--texto)}
.rd button{
  font-size:12px; padding:1px 7px; line-height:1.4; flex:0 0 auto;
  background:var(--panel2); border:1px solid var(--borde); border-radius:5px;
}
.rd .hora{font-variant-numeric:tabular-nums; font-size:10px}
.rd .cod{font-weight:700; color:var(--texto)}
.radios .vacio{color:var(--tenue); font-size:11px; padding:4px 0}

/* ---------------- filas de dos líneas ---------------- */
.tabla-vivo .tabla-cab, .tabla-vivo .filas li{
  grid-template-columns:20px 1fr 52px 52px 56px 56px; gap:4px; row-gap:0;
}
/* La mejor vuelta de cada uno. En violeta la más rápida de la sesión, que es
   la referencia contra la que se lee todo lo demás. */
.tabla-vivo .mejor{
  text-align:right; font-size:11.5px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--texto);
}
.tabla-vivo .mejor.mejor-sesion{color:var(--violeta)}

/* Los tres parciales, en la segunda línea y antes de los microsectores. Son
   cosas distintas: el parcial es el tiempo del sector, la barra es por dónde
   va dentro de ese sector. */
.parciales{
  display:flex; gap:3px; flex:0 0 auto; font-size:9.5px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.parciales i{
  font-style:normal; min-width:38px; text-align:right; color:var(--tenue);
}
.parciales i.mejor-sesion{color:var(--violeta)}
.parciales i.mejoro{color:var(--verde)}
.parciales i.sin-mejorar{color:var(--amarillo)}
/* La lista es lo que se mira: si entra entera sin scroll, mucho mejor. Los
   paneles de abajo ceden primero. */
.tabla-vivo .filas{padding:2px 0}
.tabla-vivo .filas li{padding:1px 8px 2px; font-size:12px; line-height:1.25}
.tabla-vivo .piloto{gap:5px}
.tabla-vivo .ritmo{
  display:block; text-align:right; font-size:11.5px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--tenue);
}
.fila2{grid-column:1/-1; display:flex; align-items:center; gap:6px; min-width:0}
/* 3 px era una raya: con los colores puestos no se distinguía el verde del
   amarillo. Y el corte entre sectores hace falta para saber qué barra
   corresponde a qué parcial. */
.fila2 .segs{flex:1 1 auto; margin-top:0; height:5px; min-width:60px}
.fila2 .extra{
  font-style:normal; font-size:9px; color:var(--tenue); opacity:.75;
  flex:0 0 auto; font-variant-numeric:tabular-nums;
}
.est{font-size:9px; color:var(--acento); font-weight:700; letter-spacing:.5px}

/* El compuesto, con el color de la F1. */
.gom{
  font-style:normal; font-size:8px; font-weight:800; width:13px; height:13px;
  border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; flex:0 0 auto; border:1.5px solid currentColor;
  background:#0b0e13;
}
.gom:empty{display:none}
.g-soft{color:#e1261d} .g-medium{color:#ffd12e} .g-hard{color:#e8e8e8}
.g-intermediate{color:#43b02a} .g-wet{color:#0067ad}
.gom.usada{opacity:.6}

/* ---------------- menú de ajustes ---------------- */
.ajustes{position:relative; flex:0 0 auto}
.ajustes > summary{
  list-style:none; cursor:pointer; padding:4px 8px; border-radius:6px;
  background:var(--panel2); border:1px solid var(--borde); font-size:13px;
}
.ajustes > summary::-webkit-details-marker{display:none}
.ajustes[open] > summary{background:var(--acento); border-color:var(--acento)}
.aj-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:20; width:230px;
  background:var(--panel); border:1px solid var(--borde); border-radius:10px;
  padding:10px 12px; display:flex; flex-direction:column; gap:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.aj-grupo h4{
  margin:0 0 4px; font-size:10px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--tenue); font-weight:600;
}
.aj-grupo label{
  display:flex; align-items:center; gap:7px; font-size:12px; padding:2px 0;
  cursor:pointer;
}

/* Lo que apagan los ajustes. */
body.no-lider .lider, body.no-lider .tabla-cab > *:nth-child(4){visibility:hidden}
body.no-ultima .ritmo, body.no-ultima .tabla-cab > *:nth-child(5){visibility:hidden}
body.no-mejor .mejor, body.no-mejor .tabla-cab > *:nth-child(6){visibility:hidden}
body.no-parciales .parciales{display:none}
/* Sin microsectores la segunda línea no tiene razón de ser: la fila pasa a una
   sola y entran los veintipico en cualquier pantalla. */
body.no-segs .tabla-vivo .fila2{display:none}
body.no-alertas .alertas{display:none}
body.no-mapa .pista{display:none}
body.no-mapa .tabla{flex:1 1 auto; border-right:none}
body.no-radio .radio-caja{display:none}
body.no-control .cc-caja:not(.radio-caja):not(.relato-caja){display:none}

/* La leyenda del vivo, en una línea: el detalle está en su title y en el ⚙. */
.tabla-vivo .leyenda{
  padding:4px 8px; gap:8px; font-size:10px; flex-wrap:nowrap; overflow:hidden;
}
.tabla-vivo .cc-caja > summary{padding:5px 8px}

/* ---------------- pantalla completa ---------------- */
.btn-lleno{flex:0 0 auto; font-size:13px; padding:4px 8px}
/* Se gana la barra del sitio entera y unos milímetros de la cabecera: en una
   carrera eso son dos o tres pilotos más en la tabla. */
body.lleno #barra{display:none}
body.lleno .visor-cab{padding:4px 10px}
body.lleno .vc-tit .vc-ses{display:none}
body.lleno .tabla-vivo .leyenda{display:none}

.destrabar{
  width:100%; font-size:11px; padding:6px 8px; background:var(--acento);
  border:0; color:#fff; border-radius:6px; font-weight:600; cursor:pointer;
}

/* ---------------- cronología: audios y textos juntos ---------------- */
.rd .txt{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
  flex:1 1 auto;
}
.rd.texto{align-items:flex-start}
.rd.texto .txt{white-space:normal; line-height:1.3}
.rd .ico{font-size:10px; opacity:.6; flex:0 0 auto; width:16px; text-align:center}
.rd.penal{border-left-color:#ff9600}
.rd.azul{border-left-color:#3f7fd0}

/* Las alertas sobre el circuito, que aparecen y se van. */
.alerta.control{
  border-left-color:var(--tenue); max-width:100%; white-space:normal;
  line-height:1.35; font-weight:500;
}
.alerta.control.roja{border-left-color:var(--acento); background:rgba(60,10,10,.95)}
.alerta.control.sc{border-left-color:#ff9600; background:rgba(60,36,4,.95)}
.alerta.control.penal{border-left-color:#ff9600}
.alerta.control.amarilla{border-left-color:var(--amarillo)}
.alerta.control.verde{border-left-color:var(--verde)}
.alertas{animation:none}

/* ---------------- el vivo en el celular ---------------- */
.mk-reloj.detenido{opacity:.5}
.mk-reloj.detenido::after{content:" ⏸"}

@media (max-width:900px){
  /* La cabecera del vivo pasa a dos renglones y con un orden pensado: arriba
     el estado de la carrera, abajo los mandos. Antes se apretaba todo en uno y
     el selector Circuito/Tabla se salía de la pantalla. */
  .visor-cab{flex-wrap:wrap; row-gap:6px; padding:6px 10px}
  .visor-cab .chapa-vivo{order:1}
  .visor-cab .marcador{order:2; margin-left:auto}
  .visor-cab .btn-lleno{order:3}
  .visor-cab .ajustes{order:4}
  .visor-cab .paneles{order:5; margin-left:0; flex:0 0 auto}
  .visor-cab .btn-relato{order:6}
  .visor-cab .estado-vivo{order:7; margin-left:auto; font-size:11px}
  /* El GP y el circuito ya están en la portada y en el título de la pestaña. */
  .visor-cab .vc-tit{display:none}
  .mk-vuelta{font-size:13px}
  .mk-reloj{font-size:11px}

  .rd-mandos{flex-wrap:wrap}
  .radio-piloto{max-width:120px}
  .alertas{max-width:82%; font-size:11.5px}
  .alerta{font-size:11.5px; padding:5px 9px}
}
@media (max-width:420px){
  .visor-cab{gap:6px}
  .visor-cab .btn-relato{font-size:11px; padding:3px 7px}
  .paneles button{padding:4px 9px; font-size:11px}
}

/* ---------------- transcripción de la radio ---------------- */
.rd.audio{flex-direction:column; align-items:stretch; gap:3px}
.rd-cab{display:flex; align-items:center; gap:8px}
.tr{
  font-size:11px; color:var(--texto); line-height:1.35; padding-left:26px;
  display:block;
}
.tr.cargando{color:var(--tenue); font-style:italic}
.tr .orig{
  display:block; font-style:normal; font-size:10px; color:var(--tenue);
  opacity:.75; margin-top:1px;
}

/* ---------------- carteles del guion (visor de replays) ---------------- */
.modal-guion{
  background:rgba(16,20,28,.96); border:1px solid var(--borde);
  border-left:3px solid var(--tenue); border-radius:7px; padding:7px 11px;
  font-size:12.5px; line-height:1.4; color:var(--texto);
  max-width:min(460px,60%); animation:entrar .25s ease-out;
}
.modal-guion b{display:block; font-size:10px; color:var(--tenue); margin-bottom:2px;
               letter-spacing:.5px}
.modal-guion.radio{border-left-color:#5aa9e6}
.modal-guion.radio b{color:#8ecbff}
.modal-guion.roja{border-left-color:var(--acento); background:rgba(52,10,10,.96)}
.modal-guion.sc{border-left-color:#ff9600; background:rgba(52,32,4,.96)}
.modal-guion.penal{border-left-color:#ff9600}
.modal-guion.amarilla{border-left-color:var(--amarillo)}
.modal-guion.verde{border-left-color:var(--verde)}
@keyframes entrar{from{opacity:0; transform:translateY(-6px)}to{opacity:1}}
.aj-grupo label.aj-no{opacity:.45; cursor:not-allowed}
.aj-grupo label em{font-style:normal; font-size:10px; color:var(--tenue)}
/* Lo que apagan los ajustes del visor. */
body.no-control .modal-guion:not(.radio){display:none}
body.no-radio .modal-guion.radio{display:none}
body.no-segsMapa .lienzo{--sin-barras:1}
.modal-guion.sobrepaso{border-left-color:var(--acento); background:rgba(52,10,10,.96)}
.modal-guion.sobrepaso b{color:#ff8f8b}

/* ================= panel de configuración (visor) =================
   El menú de una sola columna alcanzaba cuando eran ocho casillas. Ahora el
   panel además explica qué es cada cosa y cuánto trajo la sesión, así que
   necesita ancho: se vuelve un panel de varias columnas, todavía anclado al ⚙
   pero limitado a la altura de la ventana para que nunca se corte abajo. */
.ajustes.panel .aj-menu{
  width:min(660px,92vw); max-height:min(78vh,620px); overflow-y:auto;
  padding:14px 16px 12px; gap:12px;
}
.aj-cab h3{margin:0 0 3px; font-size:14px}
.aj-cab p{margin:0; font-size:11.5px; color:var(--tenue); line-height:1.45; text-align:justify}
.aj-cols{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px}
.aj-cols .aj-grupo label{
  align-items:flex-start; gap:8px; padding:4px 0;
  border-bottom:1px solid rgba(39,48,67,.5);
}
.aj-cols .aj-grupo label:last-child{border-bottom:none}
.aj-cols input[type=checkbox]{margin-top:2px; flex:0 0 auto; accent-color:var(--acento)}
.aj-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.aj-txt b{font-weight:600; font-size:12px}
.aj-txt i{font-style:normal; font-size:10.5px; color:var(--tenue); line-height:1.35}
.aj-n{
  font-style:normal; font-size:10px; color:var(--tenue); flex:0 0 auto;
  font-variant-numeric:tabular-nums; background:var(--panel2);
  border-radius:4px; padding:1px 5px; align-self:flex-start;
}
.aj-falta{
  font-style:normal; font-size:10px; color:var(--tenue); flex:0 0 auto;
  align-self:flex-start; text-align:right; max-width:88px; line-height:1.25;
}
.aj-pedir{
  font-size:10px; padding:2px 7px; flex:0 0 auto; align-self:flex-start;
  background:var(--acento); border-color:var(--acento); color:#fff;
}
.aj-pedir:disabled{opacity:.6; cursor:wait}

/* La ficha: de dónde sale cada cosa. Va plegada porque es el detalle, no la
   decisión — pero está, porque cuando un dato falta lo primero que se quiere
   saber es si el agujero es de OpenF1 o del propio ForUno. */
.aj-datos{border-top:1px solid var(--borde); padding-top:8px}
.aj-datos summary{cursor:pointer; font-size:11px; color:var(--tenue); padding:2px 0}
.aj-datos table{width:100%; border-collapse:collapse; margin-top:6px; font-size:10.5px}
.aj-datos th{
  text-align:left; font-weight:600; padding:3px 8px 3px 0; white-space:nowrap;
  vertical-align:top;
}
.aj-datos td{padding:3px 8px 3px 0; color:var(--tenue); vertical-align:top; text-align:justify}
.aj-datos tr{border-bottom:1px solid rgba(39,48,67,.5)}
.aj-datos code{font-size:10px; color:var(--tenue); white-space:nowrap}
.aj-datos .ok{color:var(--verde); white-space:nowrap}
.aj-datos .no{color:var(--tenue); white-space:nowrap}
.aj-datos .opt{color:var(--amarillo); white-space:nowrap}
.aj-pie{margin:8px 0 0; font-size:10px; color:var(--tenue); line-height:1.4}
.aj-pie a{text-decoration:underline}

/* En el celular el panel no puede colgar del ⚙: la barra del visor lleva
   `overflow:hidden` para que el título no la desarme, y eso recorta cualquier
   cosa absoluta que salga de ella. Pasa a ser una hoja anclada abajo —
   `position:fixed` no la recorta ningún `overflow` — que además es la forma en
   que se espera que se abra un panel en un teléfono. */
@media (max-width:720px){
  .ajustes.panel .aj-menu{
    position:fixed; inset:auto 8px 8px 8px; width:auto;
    max-height:min(80vh,700px);
  }
  .aj-cols{grid-template-columns:1fr}
}

/* ================= datos nuevos en la tabla ================= */
.pos{display:flex; flex-direction:column; align-items:flex-end; line-height:1.05}
.pos b{font-weight:600; color:var(--texto)}
/* Cuánto ganó o perdió respecto de la grilla. Es un número chico al lado del
   puesto, no una columna: ocupa cero y convierte la tabla en una historia. */
.dgrid{font-style:normal; font-size:8.5px; letter-spacing:-.2px}
.dgrid.sube{color:var(--verde)} .dgrid.baja{color:var(--acento)}
.dgrid.igual{color:var(--tenue); opacity:.5}
.pits{
  font-size:9px; color:var(--tenue); flex:0 0 auto; letter-spacing:-.5px;
  background:var(--panel2); border-radius:4px; padding:0 4px; cursor:help;
}
.filas li.foco{background:var(--panel2); box-shadow:inset 0 0 0 1px var(--borde)}
.filas li{cursor:pointer}

body.no-goma .neu{display:none}
body.no-pits .pits{display:none}
body.no-grid .dgrid{display:none}
body.no-segs .segs{display:none}

/* ================= clima y telemetría sobre el mapa ================= */
.clima{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  font-size:11px; color:var(--tenue); background:rgba(11,14,19,.75);
  padding:4px 10px; border-radius:6px; border:1px solid var(--borde);
  white-space:nowrap; pointer-events:none;
}
body.no-clima .clima{display:none}

/* La banda de telemetría del piloto elegido. Va abajo del mapa y no del lado
   de la tabla a propósito: lo que se está mirando cuando importa el acelerador
   es el auto en la curva, no la fila. */
.telemetria{
  position:absolute; left:12px; right:12px; bottom:12px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:rgba(11,14,19,.9); border:1px solid var(--borde);
  border-radius:8px; padding:7px 12px; font-size:12px;
  font-variant-numeric:tabular-nums;
}
.telemetria[hidden]{display:none}
.tl-quien{font-size:14px; font-weight:800; letter-spacing:-.3px}
.tl-v,.tl-g,.tl-rpm{display:flex; align-items:baseline; gap:4px; font-weight:600}
.tl-v{font-size:17px}
.tl-v i,.tl-g i,.tl-rpm i{font-style:normal; font-size:9px; color:var(--tenue);
  text-transform:uppercase; letter-spacing:.5px}
.tl-barra{position:relative; flex:1 1 90px; height:16px; min-width:70px;
  background:var(--panel2); border-radius:4px; overflow:hidden}
.tl-barra i{position:absolute; inset:0 auto 0 0; display:block; border-radius:4px}
.tl-barra.ac i{background:var(--verde)}
.tl-barra.fr i{background:var(--acento)}
.tl-barra em{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:9px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--texto); mix-blend-mode:difference;
}
.tl-drs{
  font-size:10px; font-weight:800; letter-spacing:.5px; padding:3px 7px;
  border-radius:4px; background:var(--panel2); color:var(--tenue);
}
.tl-drs.on{background:var(--verde); color:#0b0e13}
body.no-tele .telemetria{display:none}
@media (max-width:720px){
  .telemetria{font-size:11px; gap:8px; padding:5px 8px}
  .tl-barra{flex:1 1 60px; min-width:50px}
  .tl-rpm{display:none}
}

/* ================= carteles nuevos ================= */
.modal-guion.paso{border-left-color:#3b9dff}
.modal-guion.paso b{color:#8ecbff}
.modal-guion.pit{border-left-color:#f5a623}
.modal-guion.pit b{color:#ffcb6b}
.modal-guion.bandera{
  border-left-color:#e8ecf4; background:rgba(232,236,244,.12); font-size:14px;
}
.modal-guion.bandera b{color:#e8ecf4; font-size:11px}
body.no-pasos .modal-guion.paso{display:none}
body.no-pits .modal-guion.pit{display:none}

/* Cuando a OpenF1 le falta el GPS de la sesión. Va arriba de la tabla, en el
   lugar donde el usuario ya está mirando, y no como cartel que se va. */
.aviso-datos{
  flex:0 0 auto; margin:8px 10px 0; padding:7px 10px; border-radius:7px;
  background:rgba(245,197,24,.1); border:1px solid rgba(245,197,24,.35);
  font-size:11px; line-height:1.45; color:var(--texto); text-align:justify;
}
.aviso-datos[hidden]{display:none}
.aviso-datos b{display:block; color:var(--amarillo); font-size:10px;
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px}
.tl-drs.sin{opacity:.35; text-decoration:line-through; cursor:help}
.pista.con-tele .toggle-seg{bottom:58px}
.pista.con-tele .telemetria{right:12px}

/* ================= páginas estáticas (lo que ve el buscador) =================
   `paginas.py` genera un HTML real por cada fecha, sesión y piloto, con la tabla
   de resultados ya escrita. El JavaScript lo reemplaza al cargar por la versión
   interactiva, pero mientras tanto —y para siempre, si alguien tiene JS
   apagado— eso es lo que se ve. Así que tiene que verse bien, no sólo existir. */
.migas{
  font-size:11px; color:var(--tenue); margin:0 0 14px;
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
}
.migas a{color:var(--tenue); text-decoration:underline; text-underline-offset:2px}
.migas a:hover{color:var(--texto)}

.tabla-plana{overflow-x:auto; margin:10px 0 18px}
.tabla-plana table{width:100%; border-collapse:collapse; font-size:13px; min-width:460px}
.tabla-plana th{
  text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--tenue); font-weight:600; padding:6px 10px 6px 0;
  border-bottom:1px solid var(--borde); white-space:nowrap;
}
.tabla-plana td{
  padding:6px 10px 6px 0; border-bottom:1px solid rgba(39,48,67,.5);
  vertical-align:top;
}
.tabla-plana tr:last-child td{border-bottom:none}
.tabla-plana td:first-child{
  font-variant-numeric:tabular-nums; color:var(--tenue); width:52px;
}
.tabla-plana a{text-decoration:underline; text-underline-offset:2px}
.tabla-plana a:hover{color:var(--acento)}
.tabla-plana code{font-size:11px; color:var(--tenue)}

.ses-bloque{margin-top:26px}
.ses-bloque h2{font-size:17px; margin:0 0 4px}
.sub.nota{font-size:11px; opacity:.8}

/* ================= ficha del piloto (vivo) ==========================
   Se abre al tocar una fila de la tabla. Es una capa por encima y no un panel
   al costado: en el celular no hay costado, y la tabla ya ocupa la pantalla. */
.capa-ficha{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center;
  justify-content:center; padding:20px;
  background:rgba(6,9,16,.72); backdrop-filter:blur(3px);
}
/* `display:flex` de una clase le gana al `display:none` que trae `[hidden]`,
   que es un selector de atributo y pesa menos. Sin esta línea la capa queda
   invisible pero cubriendo la pantalla entera, y no se puede tocar nada. */
.capa-ficha[hidden]{display:none}
.ficha-piloto{
  background:var(--panel); border:1px solid var(--borde); border-radius:12px;
  width:min(430px,100%); max-height:min(86vh,760px); overflow:auto;
  position:relative; box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.fp-cerrar{
  position:absolute; top:8px; right:8px; background:none; border:none;
  color:var(--tenue); font-size:16px; cursor:pointer; padding:4px 7px;
  border-radius:6px; line-height:1;
}
.fp-cerrar:hover{background:var(--panel2); color:var(--texto)}

.fp-cab{
  display:flex; align-items:center; gap:10px; padding:14px 44px 12px 14px;
  border-bottom:1px solid var(--borde);
}
.fp-num{
  flex:0 0 auto; min-width:34px; height:34px; border-radius:8px; color:#0b1017;
  font-weight:800; font-size:15px; display:flex; align-items:center;
  justify-content:center; padding:0 6px; font-variant-numeric:tabular-nums;
}
.fp-quien{display:flex; flex-direction:column; min-width:0}
.fp-quien strong{font-size:15px; line-height:1.2}
.fp-quien span{font-size:11.5px; color:var(--tenue)}
.fp-pos{
  margin-left:auto; font-size:20px; font-weight:800; color:var(--texto);
  font-variant-numeric:tabular-nums;
}

.fp-cuerpo{padding:4px 14px 0}
.fp-cuerpo section{padding:11px 0; border-bottom:1px solid var(--borde)}
.fp-cuerpo section:last-child{border-bottom:none}
.fp-cuerpo h4{
  margin:0 0 7px; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.7px; color:var(--acento); font-weight:700;
}
.fp-fila{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:2.5px 0; font-size:12.5px;
}
.fp-fila > span:first-child{color:var(--tenue); flex:1 1 auto; min-width:0}
.fp-fila > span:last-child{
  flex:0 0 auto; display:flex; align-items:baseline; gap:6px;
  font-variant-numeric:tabular-nums;
}
.fp-fila b{font-weight:700; font-size:13px}
/* El puesto en esa tabla, no el de la carrera. Chico y apagado justamente
   para que no compita con el número grande de la cabecera. */
.fp-pos-marca{
  font-style:normal; font-size:10px; color:var(--tenue);
  background:var(--panel2); border-radius:4px; padding:1px 4px; font-weight:700;
}
.fp-pos-marca.p1{background:var(--violeta); color:#fff}
.fp-pos-marca.p2, .fp-pos-marca.p3{background:var(--verde); color:#0b1017}
.fp-en{font-style:normal; font-size:10px; color:var(--tenue)}
.fp-nada{color:var(--tenue)}
.fp-vacio{color:var(--tenue); font-size:12.5px; padding:14px 0; text-align:center}

.fp-gomas ul{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:6px}
.fp-gomas li{
  display:flex; align-items:center; gap:8px; font-size:12px; flex-wrap:wrap;
}
.fp-goma-n{font-weight:600}
.fp-goma-v{font-variant-numeric:tabular-nums; color:var(--texto)}
.fp-goma-d, .fp-goma-a{font-size:10.5px; color:var(--tenue)}
.fp-goma-a{
  margin-left:auto; background:var(--panel2); border-radius:4px; padding:1px 5px;
}
.fp-pie{
  margin:0; padding:10px 14px 14px; font-size:10.5px; color:var(--tenue);
  line-height:1.45; border-top:1px solid var(--borde);
}

@media (max-width:520px){
  /* En el celular la ficha sube desde abajo y ocupa el ancho entero: una
     tarjeta centrada con márgenes deja la mitad de la pantalla en negro. */
  .capa-ficha{align-items:flex-end; padding:0}
  .ficha-piloto{
    width:100%; max-height:88vh; border-radius:14px 14px 0 0;
    border-left:none; border-right:none; border-bottom:none;
  }
}
.fp-quien strong a{color:inherit; text-decoration:none; border-bottom:1px dotted var(--tenue)}
.fp-quien strong a:hover{border-bottom-color:var(--acento)}

/* ---------------- publicidad ----------------
   Una sola franja, abajo de todo y fuera del <main>. El alto es fijo y la
   reserva el layout aunque el anuncio no cargue, así la página no salta.
   Sin la marca `hidden` puesta arriba no ocupa nada: un visitante automatizado
   —o el ForUno de la LAN— ve la app exactamente como antes, sin una banda gris
   vacía, que es lo que arruinaría las capturas de los videos. */
.franja-ad{
  flex:0 0 auto; position:relative; height:98px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); border-top:1px solid var(--borde);
}
.franja-ad[hidden]{display:none !important}
.franja-ad-et{
  position:absolute; top:2px; left:8px; z-index:1; pointer-events:none;
  font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tenue);
}
/* El alto lo fija el script junto con la medida del anuncio, para que la caja
   mida exactamente lo que va a entrar. Esto es sólo el respaldo por si el
   script no llega a correr. */
@media (max-width:700px){ .franja-ad{height:58px} }
/* En pantalla completa manda el visor: ahí no hay barra y tampoco anuncio. */
body.lleno .franja-ad{display:none}