/* ============================================================
   MUERTAZOS RACING — style.css
   Sistema NEO-BRUTALISTA estilo Muertazos · pit board × arcade
   Fondo negro absoluto · bordes blancos duros · sombras offset
   sin blur · acento por sección (lime/amber/rojo/violeta).
   Archivo Black (display) + Space Grotesk (texto) + JetBrains Mono.
   ============================================================ */

:root{
  /* base */
  --bg:        #0a0a0c;   /* fondo absoluto */
  --bg-2:      #141418;   /* tiles */
  --bg-3:      #1b1b21;   /* filas alternas / inputs */
  --bg-4:      #1b1b21;
  --ink:       #f5f5f7;
  --ink-2:     #9a9aa3;
  --ink-3:     #71717A;
  --ink-4:     #52525B;
  --rule:      #FAFAFA;   /* borde duro blanco */
  --rule-dim:  #2a2a32;

  /* acentos por modalidad */
  --lime:      #e11d2a;   --lime-deep:#e11d2a;   /* LIVE / datos / enlaces (ROJO Palette A) */
  --amber:     #F59E0B;   --amber-deep:#D97706;  /* RÉCORDS / HP / mejor parcial */
  --red:       #b3121d;   --red-hi:  #e11d2a;    /* MARCA / torneo / carrera (ROJO Palette A) */
  --violet:    #A855F7;                          /* PITS */
  --gold:      #FCD34D;   --silver:#D4D4D8;  --bronze:#B45309;

  /* semánticos (mapeados al sistema) */
  --ok:    var(--lime);
  --warn:  var(--amber);
  --danger:#EF4444;
  --blue:  #ff5566;       /* rojo claro · acento menor (cat PRO) */
  --ink-on:#0A0A0A;       /* texto sobre fondos claros */

  /* sombras offset sin blur */
  --sh-sm:  3px 3px 0 0 var(--ink);
  --sh-md:  6px 6px 0 0 var(--ink);
  --sh-lg:  10px 10px 0 0 var(--ink);
  --sh-live:    6px 6px 0 0 var(--lime);
  --sh-records: 6px 6px 0 0 var(--amber);
  --sh-tourney: 6px 6px 0 0 var(--red);
  --sh-pits:    6px 6px 0 0 var(--violet);

  /* type */
  --disp: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --body: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --tr-eyebrow: .18em;
  --tr-disp: -.04em;

  --pad-x: clamp(16px, 4vw, 64px);
  --header-h: 64px;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.4;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; display:flex; flex-direction:column;
}
body>main{ flex:1 0 auto; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
b{ font-weight:700; }
h1,h2,h3{ margin:0; }

/* grano sutil sobre todo */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1000; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:screen;
}

/* sin tope fijo -> el contenido LLENA la pantalla en monitores anchos
   (antes max-width:1760px dejaba grandes margenes negros). Solo afecta pantallas >1760px;
   en movil/tablet/monitor normal no cambia (ya usaban el 100% menos el padding). */
.wrap{ width:100%; margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x); }

/* ---- glyph helpers ---- */
.sk{ display:inline-block; }
.sk > .in{ display:inline-block; }

@keyframes mrPulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
@keyframes mrBlink{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; } }

/* ============================ HEADER ============================ */
.ticker{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:2px solid var(--rule); }
.ticker-in{ display:flex; align-items:center; gap:24px; min-height:var(--header-h); padding-top:0; padding-bottom:0; }
.hd-logo{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
.hd-logo img{ height:42px; width:auto; filter:drop-shadow(3px 3px 0 var(--red)); }
.ticker-brand{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase; }

/* status chip (cuadro con borde de acento + cuadrito que pulsa) */
.badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--disp); font-weight:900; font-size:10px; letter-spacing:var(--tr-eyebrow); text-transform:uppercase; line-height:1; color:var(--ink-2); padding:4px 9px; border:2px solid var(--rule-dim); background:var(--bg); }
.badge .dot, .dot{ width:7px; height:7px; border-radius:0; background:var(--ink-4); flex:none; }
.badge.c-ok, .badge.c-ok .dot{ }
.c-ok{ color:var(--lime); border-color:var(--lime); } .c-ok .dot{ background:var(--lime); }
.c-warn{ color:var(--amber); border-color:var(--amber); } .c-warn .dot{ background:var(--amber); }
.c-danger{ color:var(--danger); border-color:var(--danger); } .c-danger .dot{ background:var(--danger); }
.dot-ok{ background:var(--lime); animation:mrPulse 1.1s steps(2,end) infinite; }
.dot-warn{ background:var(--amber); }
.dot-danger{ background:var(--danger); animation:mrPulse 1.1s steps(2,end) infinite; }
.dot-mut{ background:var(--ink-4); }
.c-gold{ color:var(--gold); } .c-violet{ color:var(--violet); } .c-blue{ color:var(--blue); }
.c-lime{ color:var(--lime); } .c-amber{ color:var(--amber); } .c-red{ color:var(--red); }
.ok-txt{ color:var(--lime); }

/* nav de pestañas */
.hd-nav{ display:flex; align-items:stretch; height:var(--header-h); margin-left:auto; }
.hd-tab{ position:relative; display:inline-flex; align-items:center; padding:0 18px; font-family:var(--disp); font-weight:900; font-size:14px; letter-spacing:var(--tr-eyebrow); color:var(--ink); text-decoration:none; }
.hd-tab.is-active::after{ content:""; position:absolute; left:14px; right:14px; bottom:8px; height:4px; background:var(--lime); }
.hd-tab.tab-records.is-active::after{ background:var(--amber); }
.hd-tab.tab-tourney.is-active::after{ background:var(--red); }
.hd-tab.disc{ border-left:1px solid var(--rule-dim); color:var(--ink-2); gap:6px; }
.hd-pilots{ font-family:var(--mono); font-size:13px; color:var(--ink-2); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }

/* ============================ HERO ============================ */
.hero{ position:relative; overflow:hidden; border-bottom:2px solid var(--rule); }
.hero-in{ position:relative; display:flex; flex-direction:row; align-items:stretch; gap:clamp(24px,4vw,64px); min-height:clamp(280px,34vw,420px); }
.hero-logo{ height:clamp(150px,20vw,300px); width:auto; flex:none; align-self:center; filter:drop-shadow(6px 6px 0 var(--red)); }
.hero-text{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:20px; padding:44px 0; }
.hero-kicker{ display:inline-flex; align-items:center; gap:8px; padding:5px 11px; background:var(--lime); color:var(--ink-on); font-family:var(--disp); font-weight:900; font-size:11px; letter-spacing:var(--tr-eyebrow); text-transform:uppercase; white-space:nowrap; }
.hero-tag{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,4.6vw,72px); line-height:0.92; letter-spacing:var(--tr-disp); color:var(--ink); text-transform:uppercase; text-wrap:normal; }
.hero-sub{ margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; }
.hero-logo2{ height:clamp(110px,15vw,230px); width:auto; flex:none; align-self:center; }
.hero-accent{ flex:none; align-self:stretch; width:clamp(60px,9vw,160px); background:var(--lime); border-left:18px solid var(--red); margin-right:calc(-1 * var(--pad-x)); }

/* botones */
.btn{ text-decoration:none; padding:14px 30px; background:var(--lime); border:2px solid var(--ink); box-shadow:var(--sh-sm); transition:transform .1s, box-shadow .1s; }
.btn > .in{ font-family:var(--disp); font-weight:900; font-size:16px; letter-spacing:.02em; color:var(--ink-on); }
.btn:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 0 var(--ink); }
.btn-red{ background:var(--red); } .btn-red > .in{ color:var(--ink); }
.btn-ghost{ background:var(--bg); } .btn-ghost > .in{ color:var(--ink); }

/* ============================ SECCIONES ============================ */
.sec{ padding-top:48px; padding-bottom:8px; }
.sec:last-of-type{ padding-bottom:48px; }
.sec-head{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; text-align:center; gap:14px; margin-bottom:24px; padding-bottom:0; }
.sec-head .rule{ flex:0 0 100%; height:2px; }
.sec-head .sec-meta{ flex:0 0 100%; }
.tag-red{ background:var(--lime); padding:6px 12px; }
.tag-red > .in{ font-family:var(--disp); font-weight:900; font-size:13px; letter-spacing:.06em; color:var(--ink-on); }
#seguimiento .tag-red{ background:var(--amber); }
.sec-tt{ font-family:var(--disp); font-weight:900; font-size:clamp(26px,4vw,40px); letter-spacing:var(--tr-disp); color:var(--ink); white-space:nowrap; flex:none; text-transform:uppercase; }
.rule{ flex:1; height:2px; background:var(--rule-dim); min-width:40px; }
.sec-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-3); white-space:nowrap; text-transform:uppercase; }

/* ============================ TILES / CARDS ============================ */
.card{ position:relative; background:var(--bg-2); border:2px solid var(--rule); box-shadow:var(--sh-live); }
#card-carrera{ box-shadow:var(--sh-live); }
#card-tabla{ box-shadow:var(--sh-live); }
#card-vcp{ box-shadow:var(--sh-live); }
.card-head{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; padding:13px 18px; background:var(--bg); border-bottom:2px solid var(--rule); text-align:center; }
.card-head .card-sub, .card-head .badge{ position:static; transform:none; }
.card-tt{ display:inline-flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:900; font-size:11px; letter-spacing:var(--tr-eyebrow); color:var(--lime); text-transform:uppercase; }
#card-carrera .card-tt{ color:var(--lime); }
.card-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; }
.card-body{ padding:20px; display:flex; flex-direction:column; gap:16px; }

.empty{ display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; padding:28px 20px; }
.empty b{ font-family:var(--disp); font-weight:900; font-size:24px; letter-spacing:var(--tr-disp); color:var(--ink); text-transform:uppercase; }
.empty span{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-3); max-width:520px; text-transform:uppercase; line-height:1.6; }

.live-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; margin-bottom:20px; }

/* ---- card servidor ---- */
.srv-name{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,4vw,56px); letter-spacing:var(--tr-disp); color:var(--ink); text-transform:uppercase; line-height:.92; }
.srv-map{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase; margin-top:6px; }
.kv{ display:flex; justify-content:space-between; align-items:baseline; }
.kv-l{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase; }
.kv-v{ font-family:var(--disp); font-weight:900; font-size:20px; color:var(--ink); }
.kv-v small{ color:var(--ink-3); font-weight:400; }
.meter{ height:8px; background:var(--bg); border:2px solid var(--rule-dim); overflow:hidden; }
.meter > i{ display:block; height:100%; background:var(--lime); }
.names{ display:flex; flex-wrap:wrap; gap:7px; }
.names span{ font-family:var(--mono); font-size:12px; color:var(--ink-2); background:var(--bg-3); border:1px solid var(--rule-dim); padding:5px 10px; }
.srv-note{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--amber); text-transform:uppercase; }

/* ---- card carrera ---- */
.race-name{ font-family:var(--disp); font-weight:900; font-size:clamp(30px,4vw,52px); line-height:.92; color:var(--ink); text-transform:uppercase; letter-spacing:var(--tr-disp); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-2); background:var(--bg-3); border:1px solid var(--rule-dim); padding:5px 11px; text-transform:uppercase; }
.chip-blue{ color:var(--ink-on); background:var(--lime); border-color:var(--lime); }
.record{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--bg); border:2px solid var(--amber); padding:12px 16px; }
.record-l{ font-family:var(--disp); font-weight:900; font-size:13px; letter-spacing:.04em; color:var(--amber); white-space:nowrap; }
.record-t{ font-family:var(--mono); font-size:16px; font-weight:700; color:var(--amber); }
.record-w{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.queue{ display:flex; flex-direction:column; gap:7px; }
.queue-l{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase; }
.queue-row{ display:flex; align-items:center; gap:12px; justify-content:space-between; background:var(--bg-3); border:1px solid var(--rule-dim); padding:10px 14px; }
.queue-row.next{ background:var(--bg); border:2px solid var(--lime); }
.queue-pos{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-3); flex:none; width:34px; }
.queue-name{ flex:1; font-family:var(--disp); font-weight:900; font-size:14px; color:var(--ink); }
.queue-cd{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--lime); white-space:nowrap; }
.queue-cd.go{ color:var(--lime); } .queue-cd.muted{ color:var(--ink-3); }

/* badges de fase (chip con borde de acento) */
.phase-parrilla{ color:var(--violet); border-color:var(--violet); } .phase-parrilla .dot{ background:var(--violet); }
.phase-cuenta{ color:var(--amber); border-color:var(--amber); } .phase-cuenta .dot{ background:var(--amber); animation:mrPulse 1.1s steps(2,end) infinite; }
.phase-carrera{ color:var(--lime); border-color:var(--lime); } .phase-carrera .dot{ background:var(--lime); animation:mrPulse 1.1s steps(2,end) infinite; }
.phase-resultados{ color:var(--violet); border-color:var(--violet); } .phase-resultados .dot{ background:var(--violet); }

/* ============================ TABLA ============================ */
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl{ width:100%; border-collapse:collapse; min-width:780px; }
.tbl th{ text-align:left; font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.15em; color:var(--ink-3); padding:11px 12px; border-bottom:2px solid var(--rule); white-space:nowrap; text-transform:uppercase; background:var(--bg); }
.tbl td{ padding:14px 12px; border-bottom:1px solid var(--rule-dim); font-family:var(--mono); font-size:13px; color:var(--ink); white-space:nowrap; vertical-align:middle; }
.tbl tbody tr:nth-child(even) td{ background:var(--bg-3); }
.tbl tbody tr:last-child td{ border-bottom:0; }
.td-num{ text-align:right; }
.tbl th.td-num{ text-align:center; }   /* encabezado numérico centrado sobre su dato (todo el contenido va centrado) */
.td-pos{ width:64px; }
.th-gas{ width:150px; }
/* posición: número grande Archivo Black + barra de medalla */
.pos-plate{ display:inline-flex; align-items:center; gap:9px; }
.pos-plate > b{ font-family:var(--disp); font-weight:900; font-size:30px; line-height:.8; letter-spacing:var(--tr-disp); color:var(--ink-2); }
.pos-plate::before{ content:""; width:5px; align-self:stretch; min-height:26px; background:var(--ink-4); }
.pos-plate.p1 > b{ color:var(--lime); }
.pos-plate.p1::before{ background:var(--gold); }
.pilo{ display:flex; align-items:center; gap:9px; }
.pilo-name{ font-family:var(--disp); font-weight:900; font-size:15px; letter-spacing:-.02em; color:var(--ink); }
.rb{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; padding:3px 7px; border:1px solid var(--rule-dim); text-transform:uppercase; }
.rb-cat1{ color:var(--ink-on); background:var(--blue); border-color:var(--blue); }
.rb-cat{ color:var(--ink-2); background:var(--bg-3); }
.rb-desc{ color:var(--ink-on); background:var(--danger); border-color:var(--danger); }
.rb-pausa{ color:var(--ink-on); background:var(--violet); border-color:var(--violet); }
/* abandono ELEGIDO (ámbar). Distinto del DESC rojo (desconexión) y del PAUSA violeta. */
.rb-dnf{ color:var(--ink-on); background:var(--amber); border-color:var(--amber); }
.veh{ font-family:var(--body); font-size:12px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; }
.tbl td.veh, .tbl .veh{ font-family:var(--body); }
.hpv{ color:var(--amber); font-weight:700; }
.gas-cell{ display:flex; align-items:center; gap:8px; min-width:120px; }
.gas-bar{ flex:1; height:8px; background:var(--bg); border:1px solid var(--rule-dim); overflow:hidden; }
.gas-bar > i{ display:block; height:100%; }
.gas-pct{ font-family:var(--mono); font-size:12px; white-space:nowrap; }
.row-elim{ opacity:.42; }
.row-elim .pilo-name{ text-decoration:line-through; }
.row-dim{ opacity:.5; }
.t-leader,.t-win{ color:var(--lime); font-weight:700; }
/* rótulo "DNF" en la columna TIEMPO (ámbar, distinto del "ELIM" rojo). */
.t-dnf{ color:var(--amber); font-weight:700; letter-spacing:.08em; }
.muted{ color:var(--ink-4); }

/* fila líder: lime sólido, texto negro, número gigante */
.tbl tbody tr.lead td{ background:var(--lime); color:var(--ink-on); border-bottom:2px solid var(--rule); }
.tbl tbody tr.lead .pilo-name{ color:var(--ink-on); }
.tbl tbody tr.lead .pos-plate > b{ color:var(--ink-on); font-size:40px; }
.tbl tbody tr.lead .pos-plate::before{ background:var(--ink-on); }
.tbl tbody tr.lead .veh{ color:var(--ink-on); }
.tbl tbody tr.lead .hpv{ color:var(--ink-on); }
.tbl tbody tr.lead .t-leader,.tbl tbody tr.lead .muted{ color:var(--ink-on); }
.tbl tbody tr.lead .rb-cat1{ background:var(--ink-on); color:var(--lime); border-color:var(--ink-on); }
/* gasolina en la fila líder: la barra/% usan --ok (=azul) → invisible sobre el azul; forzar oscuro */
.tbl tbody tr.lead .gas-bar{ background:rgba(10,10,10,.22); border-color:rgba(10,10,10,.45); }
.tbl tbody tr.lead .gas-bar > i{ background:var(--ink-on) !important; }
.tbl tbody tr.lead .gas-pct{ color:var(--ink-on) !important; }

/* ============================ VCP (matriz timing) ============================ */
#card-vcp .tbl-scroll{ padding:14px 16px; }
/* ancho completo (grande); sin sticky → encabezados alineados sobre los datos.
   border 2px blanco = "orilla" que cierra la matriz para que se vea bien. */
.tbl-vcp{ width:100%; min-width:680px; border-collapse:collapse; border:2px solid var(--rule); }
.tbl-vcp th, .tbl-vcp td{ border-right:1px solid var(--rule-dim); }
.tbl-vcp thead th{ background:var(--bg); padding:11px 12px; vertical-align:middle; border-bottom:2px solid var(--rule); }
/* .tbl-vcp .vcp-h (2 clases) vence a .tbl th (1 clase+elem) que lo forzaba a la izquierda → encabezados VCP CENTRADOS sobre su dato (LIVE + torneo) */
.tbl-vcp .vcp-h{ font-family:var(--disp); font-weight:900; font-size:10px; letter-spacing:.06em; color:var(--lime); text-align:center; }
.vcp-pil-h{ background:var(--bg); border-right:2px solid var(--rule); text-align:left; }
.vcp-pil-h b{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; color:var(--ink-3); font-weight:400; }
.tbl-vcp tbody td{ border-bottom:1px solid var(--rule-dim); text-align:center; padding:8px 12px; background:var(--bg-2); }
.tbl-vcp tbody tr:nth-child(even) td{ background:var(--bg-3); }
.vcp-pil{ background:var(--bg-2) !important; text-align:left !important; border-right:2px solid var(--rule); min-width:172px; }
.tbl-vcp tbody tr:nth-child(even) .vcp-pil{ background:var(--bg-3) !important; }
.vcp-pil-in{ display:flex; align-items:center; gap:11px; }
.vcp-pos{ font-family:var(--disp); font-weight:900; font-size:22px; line-height:.8; letter-spacing:var(--tr-disp); color:var(--ink-3); width:18px; text-align:center; flex:none; }
/* DNF en el slot de POS: "DNF" (3 letras) no cabe a 22px en 18px -> chico + ancho auto para que NO tape el nombre */
.vcp-pos:has(.t-dnf){ font-size:9px; line-height:1; width:auto; min-width:18px; }
.vcp-pos .t-dnf{ display:inline-block; white-space:nowrap; }
.vcp-bar{ width:4px; align-self:stretch; min-height:34px; background:var(--ink-4); flex:none; }
.vcp-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.vcp-name{ font-family:var(--disp); font-weight:900; font-size:13px; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:118px; }
.vcp-hp{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; color:var(--amber); }
.vcp-cell .s{ display:block; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--ink); line-height:1.15; }
.vcp-cell .a{ display:block; font-family:var(--mono); font-size:8px; color:var(--ink-4); margin-top:3px; }
.vcp-best{ background:var(--lime) !important; }
.vcp-best .s{ color:var(--ink-on); font-weight:900; }
.vcp-best .a{ color:rgba(10,10,10,.62); }
.vcp-trim .s{ color:var(--ink-3); letter-spacing:.1em; }
.vcp-none{ color:var(--ink-4); font-family:var(--mono); font-size:11px; }
/* VCP NO registrado de un corredor que se dio DNF. Ámbar tenue + raya diagonal
   para que se lea distinto de un VCP cruzado (texto blanco) y del "—" gris (aún no cruzado). */
.vcp-dnf{ background:repeating-linear-gradient(135deg, rgba(245,158,11,.10) 0 6px, rgba(245,158,11,.18) 6px 12px) !important; }
.vcp-dnf .s{ color:var(--amber); font-weight:900; letter-spacing:.1em; font-size:10px; }
.vcp-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:11px 18px; border-top:1px solid var(--rule-dim); background:var(--bg); font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; }
.vcp-foot i{ display:inline-block; width:11px; height:11px; vertical-align:-1px; margin-right:6px; background:var(--lime); }
/* swatch ámbar de la nota "DNF = abandonó antes de este VCP". */
.vcp-foot i.lg-dnf{ background:var(--amber); }

/* ============================ TELEMETRÍA ============================ */
.tele-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px; }
.tcard{ background:var(--bg-2); border:2px solid var(--rule); box-shadow:var(--sh-pits); transition:transform .1s, box-shadow .1s; }
.tcard:nth-child(3n+1){ box-shadow:var(--sh-live); }
.tcard:nth-child(3n+2){ box-shadow:var(--sh-records); }
.tcard:hover{ transform:translate(-2px,-2px); }
.tcard-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 18px; background:var(--bg); border-bottom:2px solid var(--rule); }
.tcard-name{ font-family:var(--disp); font-weight:900; font-size:15px; color:var(--ink); text-transform:uppercase; letter-spacing:-.01em; }
.tcard-body{ padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
.metric{ display:flex; flex-direction:column; gap:5px; }
.metric-l{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase; }
.metric-l svg{ width:13px; height:13px; flex:none; }
.metric-v{ font-family:var(--disp); font-weight:900; font-size:24px; letter-spacing:-.01em; color:var(--ink); line-height:1; }
.metric-v.sm{ font-family:var(--mono); font-size:13px; font-weight:700; }
.metric-wide{ grid-column:1 / -1; }
.tgas{ display:flex; align-items:center; gap:9px; }
.tgas-bar{ flex:1; height:8px; background:var(--bg); border:1px solid var(--rule-dim); overflow:hidden; }
.tgas-bar > i{ display:block; height:100%; }
.tgas-pct{ font-family:var(--mono); font-size:13px; font-weight:700; min-width:42px; text-align:right; }

/* ============================ MAPA ============================ */
.mhead{ position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:2px solid var(--rule); }
.mhead-in{ display:flex; align-items:center; gap:16px; min-height:var(--header-h); }
.mhead-logo{ height:42px; width:auto; filter:drop-shadow(3px 3px 0 var(--red)); }
.mhead-tt{ display:flex; flex-direction:column; gap:2px; }
.mhead-tt h1{ font-family:var(--disp); font-weight:900; font-size:20px; letter-spacing:var(--tr-disp); color:var(--ink); text-transform:uppercase; }
.mhead-tt h1 b{ color:var(--lime); }
.mhead-tt span{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase; }
.mhead-status{ margin-left:auto; }

.map-layout{ display:grid; grid-template-columns:1fr 360px; gap:20px; padding-top:24px; padding-bottom:24px; align-items:stretch; }
.map-panel{ position:relative; display:flex; align-items:center; justify-content:center; min-height:62vh; padding:18px; background:var(--bg-2); border:2px solid var(--rule); box-shadow:var(--sh-live); }
.map-label{ position:absolute; top:12px; left:16px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-3); text-transform:uppercase; }
#map-svg{ width:100%; height:auto; max-height:82vh; display:block; cursor:grab; touch-action:none; }
#map-svg.grabbing{ cursor:grabbing; }
/* PAN+ZOOM web43: botón centrar + hint */
.map-reset{ position:absolute; top:10px; right:14px; z-index:6; background:var(--bg-2); border:2px solid var(--rule); color:var(--ink); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; cursor:pointer; box-shadow:var(--sh-sm); transition:transform .08s ease, box-shadow .08s ease; }
.map-reset:hover{ background:var(--red); border-color:var(--red); }
.map-reset:active{ transform:translate(2px,2px); box-shadow:none; }
.map-hint{ position:absolute; bottom:12px; right:16px; z-index:5; pointer-events:none; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; opacity:.8; }
.map-state{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; background:rgba(10,10,10,.78); padding:24px; }
.map-state b{ font-family:var(--disp); font-weight:900; font-size:28px; letter-spacing:var(--tr-disp); color:var(--ink); text-transform:uppercase; }
.map-state span{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-3); max-width:420px; text-transform:uppercase; }
.map-leyenda{ position:absolute; left:16px; bottom:14px; right:16px; display:flex; flex-wrap:wrap; gap:8px 14px; }
.ley{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--ink-2); text-transform:uppercase; }
.ley-chip{ width:11px; height:11px; flex:none; }
.ley-mi{ color:var(--ink-3); }

.tira{ display:flex; flex-direction:column; min-height:0; background:var(--bg-2); border:2px solid var(--rule); box-shadow:var(--sh-tourney); }
.tira-top{ padding:18px 20px; border-bottom:2px solid var(--rule); }
.tira-l{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase; }
.tira-milla{ display:block; font-family:var(--disp); font-weight:900; font-size:52px; line-height:1; color:var(--ink); margin-top:6px; }
.tira-milla small{ font-family:var(--mono); font-size:14px; color:var(--amber); letter-spacing:.06em; }
.tira-blocks{ overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; max-height:64vh; }
.tblock{ border:2px solid var(--rule-dim); }
.tblock-h{ font-family:var(--disp); font-weight:900; font-size:14px; letter-spacing:0; color:var(--ink-on); background:var(--lime); padding:7px 12px; text-transform:uppercase; }
.tblock-row{ display:flex; align-items:center; gap:9px; padding:7px 12px; border-top:1px solid var(--rule-dim); }
.tblock-chip{ width:10px; height:10px; flex:none; }
.tblock-ord{ font-family:var(--mono); font-size:11px; color:var(--ink-4); width:18px; }
.tblock-name{ flex:1; font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.tblock-t{ font-family:var(--mono); font-size:12px; }

/* --- mapa web35: leyenda de markers (VCP/PIT/LÍMITE) + telemetría enriquecida --- */
.map-glegend{ position:absolute; top:14px; right:16px; display:flex; gap:14px; padding:8px 12px; background:rgba(10,10,10,.72); border:1px solid var(--rule); }
.gl{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--ink-2); text-transform:uppercase; }
.gl > i{ width:12px; height:12px; flex:none; border:2px solid #06080c; }
.gl-vcp{ background:#0c1018; border-color:#e11d2a !important; border-radius:50%; }
.gl-pit{ background:#ffb547; border-radius:3px; }
.gl-lim{ background:#0c1018; border-color:#e8192c !important; border-radius:50%; }
.metric-v small{ font-family:var(--mono); font-size:10px; font-weight:700; color:var(--ink-3); letter-spacing:.04em; }
.tsteer{ display:flex; align-items:center; height:24px; }
.tsteer-track{ position:relative; flex:1; height:8px; background:var(--bg); border:1px solid var(--rule-dim); }
.tsteer-track:before{ content:""; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--rule); }
.tsteer-track > i{ position:absolute; top:-3px; left:50%; width:4px; height:14px; background:#e11d2a; transform:translateX(-50%); transition:left .12s; }
.tg{ display:flex; align-items:center; gap:10px; }
.tg-pad{ position:relative; width:34px; height:34px; flex:none; background:var(--bg); border:1px solid var(--rule-dim); }
.tg-pad:before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--rule); }
.tg-pad:after{ content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--rule); }
.tg-pad > i{ position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:50%; background:#37d399; transform:translate(-50%,-50%); transition:left .1s, top .1s; }
.tg-val{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--ink-2); }

/* ============================ FOOTER ============================ */
.foot{ border-top:2px solid var(--rule); margin-top:auto; }
.foot-in{ display:flex; align-items:center; gap:14px; min-height:48px; padding-top:14px; padding-bottom:14px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; flex-wrap:wrap; }
.foot-in::before{ content:""; width:10px; height:10px; background:var(--lime); flex:none; }
#foot-left{ font-family:var(--disp); font-weight:900; color:var(--ink); letter-spacing:-.02em; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px){
  .live-grid{ grid-template-columns:1fr; }
  .map-layout{ grid-template-columns:1fr; }
  .tira-blocks{ max-height:none; }
  .hero-in{ flex-direction:column; align-items:flex-start; gap:18px; min-height:0; }
  .hero-logo{ align-self:flex-start; margin-top:36px; }
  .hero-text{ width:100%; padding:0 0 40px; }
  .hero-accent{ display:none; }
  .hd-nav{ height:auto; }
  .ticker-brand{ display:none; }
}
@media (max-width:560px){
  body{ font-size:14px; }
  .sec-meta{ display:none; }
  .hd-pilots{ display:none; }
  .tcard-body{ grid-template-columns:1fr 1fr; }
  .btn{ padding:12px 22px; }
}

/* ============================================================
   RÉCORDS (ámbar)
   ============================================================ */
.page-head{ padding-top:48px; padding-bottom:8px; text-align:center; }
.page-eyebrow{ display:inline-block; font-family:var(--disp); font-weight:900; font-size:12px; letter-spacing:var(--tr-eyebrow); text-transform:uppercase; }
.page-title{ font-family:var(--disp); font-weight:900; font-size:clamp(48px,8vw,104px); letter-spacing:var(--tr-disp); line-height:0.86; text-transform:uppercase; margin-top:6px; }
.page-sub{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; margin-top:14px; }
.page-rule{ height:2px; background:var(--rule); margin:22px 0 0; }

.dd-row{ display:flex; flex-wrap:wrap; gap:18px; margin:28px 0 8px; }
.dd{ display:flex; flex-direction:column; gap:7px; }
.dd-l{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase; }
.dd-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:24px; min-width:280px; padding:14px 16px; background:var(--bg-2); border:2px solid var(--rule); box-shadow:var(--sh-records); font-family:var(--disp); font-weight:900; font-size:16px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); cursor:pointer; }
.dd-btn .ar{ color:var(--amber); font-size:13px; }

.rec-top{ background:var(--amber); color:var(--ink-on); border:2px solid var(--rule); box-shadow:var(--sh-md); padding:22px 24px; margin-top:22px; display:flex; flex-direction:column; gap:14px; }
.rec-top-k{ display:inline-flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:900; font-size:12px; letter-spacing:var(--tr-eyebrow); text-transform:uppercase; }
.rec-top-main{ display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; }
.rec-top-pos{ font-family:var(--disp); font-weight:900; font-size:64px; line-height:.8; letter-spacing:var(--tr-disp); }
.rec-top-name{ font-family:var(--disp); font-weight:900; font-size:clamp(24px,3vw,34px); letter-spacing:-.02em; text-transform:uppercase; }
.rec-top-veh{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.rec-top-time{ font-family:var(--mono); font-weight:700; font-size:clamp(32px,5vw,52px); letter-spacing:-.02em; margin-left:auto; }
.rec-top-meta{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border-top:2px solid rgba(10,10,10,.25); padding-top:12px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

.rec-list{ display:flex; flex-direction:column; gap:0; margin-top:18px; border:2px solid var(--rule); box-shadow:var(--sh-records); background:var(--bg-2); }
.rec-row{ display:grid; grid-template-columns:64px minmax(0,1fr) 200px 130px; gap:14px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--rule-dim); }
.rec-row:last-child{ border-bottom:0; }
.rec-row .pos-plate > b{ font-size:26px; }
.rec-name{ font-family:var(--disp); font-weight:900; font-size:16px; letter-spacing:-.02em; text-transform:uppercase; }
.rec-veh{ font-family:var(--mono); font-size:11px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; }
.rec-time{ font-family:var(--mono); font-weight:700; font-size:18px; text-align:right; color:var(--amber); }
.rec-date{ font-family:var(--mono); font-size:11px; color:var(--ink-3); text-align:right; }

/* ============================================================
   TORNEO (rojo)
   ============================================================ */
.tn-banner{ background:var(--bg-2); border:2px solid var(--rule); box-shadow:var(--sh-tourney); padding:22px 24px; display:flex; flex-direction:column; gap:10px; position:relative; }
.tn-banner .chk{ position:absolute; top:0; right:0; bottom:0; width:160px; background-image:repeating-conic-gradient(rgba(193,18,31,.16) 0% 25%, transparent 0% 50%); background-size:22px 22px; pointer-events:none; }
.tn-k{ display:inline-flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:900; font-size:12px; letter-spacing:var(--tr-eyebrow); color:var(--red); text-transform:uppercase; }
.tn-name{ font-family:var(--disp); font-weight:900; font-size:clamp(26px,4vw,44px); letter-spacing:var(--tr-disp); text-transform:uppercase; }
.tn-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ink-2); text-transform:uppercase; }
.tn-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; background:var(--red); color:var(--ink); font-family:var(--disp); font-weight:900; font-size:11px; letter-spacing:var(--tr-eyebrow); }
.tn-chip.live{ background:var(--lime); color:var(--ink-on); }

/* podio */
.podium{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:end; margin-top:8px; }
.pod{ border:2px solid var(--rule); box-shadow:var(--sh-md); display:flex; flex-direction:column; }
.pod-top{ padding:14px 16px; display:flex; flex-direction:column; gap:3px; background:var(--bg-2); border-bottom:2px solid var(--rule); }
.pod-name{ font-family:var(--disp); font-weight:900; font-size:16px; letter-spacing:-.02em; text-transform:uppercase; }
.pod-pts{ font-family:var(--mono); font-size:13px; color:var(--ink-2); }
.pod-pts b{ font-size:16px; }
.pod-place{ font-family:var(--disp); font-weight:900; font-size:64px; line-height:1; color:var(--ink-on); text-align:center; padding:24px 0; }
.pod-1 .pod-place{ background:var(--gold); height:200px; display:flex; align-items:center; justify-content:center; }
.pod-2 .pod-place{ background:var(--silver); height:150px; display:flex; align-items:center; justify-content:center; }
.pod-3 .pod-place{ background:var(--bronze); color:var(--ink); height:120px; display:flex; align-items:center; justify-content:center; }
.pod-1 .pod-pts b{ color:var(--gold); } .pod-2 .pod-pts b{ color:var(--silver); } .pod-3 .pod-pts b{ color:var(--bronze); }

/* lista de carreras */
.race-card{ background:var(--bg-2); border:2px solid var(--rule); box-shadow:var(--sh-tourney); padding:20px 22px; display:flex; flex-direction:column; gap:12px; }
.race-top{ display:flex; align-items:flex-start; gap:14px; }
.rtag{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:30px; padding:0 9px; background:var(--red); color:var(--ink); font-family:var(--disp); font-weight:900; font-size:14px; letter-spacing:.02em; flex:none; }
.race-date{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.08em; }
.race-name2{ font-family:var(--disp); font-weight:900; font-size:clamp(22px,3vw,30px); letter-spacing:var(--tr-disp); text-transform:uppercase; line-height:.95; }
.race-type{ font-family:var(--body); font-weight:700; font-size:13px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; }
.race-facts{ display:flex; gap:14px; font-family:var(--mono); font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }
.race-facts b{ color:var(--ink); }
.race-rows{ display:flex; flex-direction:column; }
.race-prow{ display:grid; grid-template-columns:18px 1fr auto; gap:10px; align-items:center; padding:7px 0; border-top:1px solid var(--rule-dim); }
.race-prow:first-child{ border-top:0; }
.race-sq{ width:11px; height:11px; flex:none; }
.race-pn{ font-family:var(--disp); font-weight:900; font-size:13px; letter-spacing:-.01em; }
.race-pt{ font-family:var(--mono); font-size:13px; font-weight:700; }
.race-pt.win{ color:var(--lime); }
.race-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:900; font-size:12px; letter-spacing:var(--tr-eyebrow); color:var(--red); cursor:pointer; border-top:1px solid var(--rule-dim); padding-top:12px; }

/* puntos */
.points-row{ display:grid; grid-template-columns:repeat(10,1fr); gap:10px; margin-top:8px; }
.pchip{ border:2px solid var(--rule); background:var(--bg-2); padding:12px 0; text-align:center; }
.pchip .pp{ font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:.1em; }
.pchip .pv{ font-family:var(--disp); font-weight:900; font-size:24px; margin-top:4px; }
.pchip.p1{ background:var(--gold); color:var(--ink-on); } .pchip.p1 .pp{ color:rgba(10,10,10,.6); }
.pchip.p2{ background:var(--silver); color:var(--ink-on); } .pchip.p2 .pp{ color:rgba(10,10,10,.6); }
.pchip.p3{ background:var(--bronze); color:var(--ink); } .pchip.p3 .pp{ color:rgba(255,255,255,.7); }

/* ranking histórico — reusa .tbl; fila líder roja */
.tbl tbody tr.lead-red td{ background:var(--red); color:var(--ink); border-bottom:2px solid var(--rule); }
.tbl tbody tr.lead-red .pos-plate > b{ color:var(--ink); }
.tbl tbody tr.lead-red .pos-plate::before{ background:var(--gold); }
.tbl tbody tr.lead-red .pilo-name{ color:var(--ink); }
.tbl .medal-g{ color:var(--gold); font-weight:700; }
.tbl .medal-s{ color:var(--silver); }
.tbl .medal-b{ color:var(--bronze); }
.tbl tbody tr.lead-red .medal-g,.tbl tbody tr.lead-red .medal-s,.tbl tbody tr.lead-red .medal-b{ color:var(--ink); }
/* columnas HP / REINICIOS del detalle de carrera */
.restn{ font-family:var(--mono); font-weight:700; color:var(--ink-2); }
.restn.r-on{ color:var(--amber); }
.restn.r-hi{ color:var(--danger); }
.tbl tbody tr.lead-red .hpv{ color:var(--ink); }
.tbl tbody tr.lead-red .restn{ color:var(--ink); }

/* detalle de carrera */
.detail{ background:var(--bg-2); border:2px solid var(--rule); box-shadow:var(--sh-tourney); }
.detail-head{ display:flex; align-items:flex-start; gap:14px; padding:18px 22px; border-bottom:2px solid var(--rule); }
.detail-h-t{ display:flex; flex-direction:column; gap:4px; }
.detail-h-t .big{ font-family:var(--disp); font-weight:900; font-size:clamp(22px,3vw,30px); letter-spacing:var(--tr-disp); text-transform:uppercase; }
.detail-h-t .sub{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; }
.detail-close{ margin-left:auto; display:inline-flex; align-items:center; padding:10px 16px; border:2px solid var(--rule); background:var(--bg); font-family:var(--disp); font-weight:900; font-size:12px; letter-spacing:var(--tr-eyebrow); color:var(--ink); box-shadow:3px 3px 0 0 var(--red); }
.detail-sec-t{ display:inline-flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:900; font-size:11px; letter-spacing:var(--tr-eyebrow); color:var(--red); text-transform:uppercase; padding:16px 22px 0; }
.tbl-vcp .vcp-h.cp{ color:var(--red); }
.tbl-vcp .vcp-fin{ color:var(--lime); border-left:2px solid var(--rule); }
.tbl-vcp td.vcp-finc{ border-left:2px solid var(--rule); }
.tbl-vcp td.vcp-finc .s{ color:var(--lime); }

/* ============================================================
   TORNEO EN AZUL — override de página. Re-mapea el acento rojo
   del torneo a azul; como --sh-tourney y los estilos inline usan
   var(--red), TODO el apartado se vuelve azul de un solo golpe.
   (--danger sigue rojo para estados de peligro; no se toca.)
   ============================================================ */
body[data-page="tourney"]{ --sh-tourney: 6px 6px 0 0 var(--red); } /* Palette A: el torneo conserva el ROJO de marca */
/* TODO el contenido de las tablas (LIVE + torneo) va CENTRADO (encabezado + dato,
   todas las columnas) para aprovechar el ancho y que cada dato quede bajo su
   encabezado, idéntico en cualquier pantalla. Única excepción: la columna
   POS·PILOTO de la matriz VCP queda a la IZQUIERDA. */
.tbl th,
.tbl td{ text-align:center; }
.tbl .pilo{ justify-content:center; }
.tbl-vcp .vcp-pil-h{ text-align:left; }
/* orilla blanca que cierra la tabla de RESULTADO FINAL (igual que la matriz VCP) */
.tbl-result{ border:2px solid var(--rule); }

/* ============================================================
   WEB-37 — columna CATEGORÍA inline (RESULTADO FINAL + matriz VCP)
   El badge .rb-cat1 ya existe (azul del torneo). Solo damos a la
   columna un ancho compacto y centramos su contenido para no romper
   la alineación cuidada del resto de columnas.
   ============================================================ */
.tbl th.td-cat,
.tbl td.td-cat{ text-align:center; white-space:nowrap; }
.td-cat .rb{ display:inline-block; }
/* CAT en la matriz VCP: misma celda compacta, centrada, con su borde */
.tbl-vcp th.vcp-cat-h{ color:var(--red); }
.tbl-vcp td.vcp-catc{ text-align:center; white-space:nowrap; min-width:74px; }
.tbl-vcp td.vcp-catc .rb{ display:inline-block; }

/* ============================================================
   WEB-37 — POR CATEGORÍA auto-fit: cada tarjeta de categoría
   (SPEC / 2WD) debe verse COMPLETA sin scroll horizontal cuando hay
   datos. La tabla global fuerza min-width:780px; aquí la liberamos
   para que la tabla de 4 columnas (POS·PILOTO·CARRERAS·SCORE) se
   ajuste al ancho de su tarjeta, y dejamos que el grid crezca a
   contenido en vez de cortar.
   ============================================================ */
#tor-bycat{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) !important; }
#tor-bycat .card{ min-width:0; }
#tor-bycat .tbl-scroll{ overflow-x:visible; }   /* sin barra: la tabla ya cabe */
#tor-bycat .tbl{ min-width:0; width:100%; table-layout:fixed; }
#tor-bycat .tbl th,
#tor-bycat .tbl td{ padding:11px 8px; white-space:normal; overflow:hidden; text-overflow:ellipsis; }
#tor-bycat .tbl .pilo-name{ font-size:13px; overflow:hidden; text-overflow:ellipsis; }
#tor-bycat .tbl .td-pos{ width:48px; }
#tor-bycat .tbl .pos-plate > b{ font-size:24px; }

/* ============================================================
   AUTH UI — widget de sesión en el header (#hd-auth)
   (login web · Etapa 1b). El widget es UN ITEM MÁS del nav: ENTRAR
   se ve EXACTAMENTE como un .hd-tab (DISCORD/TORNEO/etc.), alineado
   dentro de la barra, sin pastilla flotante ni separador.
   ============================================================ */
/* El contenedor se estira a la altura del nav (igual que los .hd-tab via
   .hd-nav{align-items:stretch}) y se pega a DISCORD sin margen separador. */
.hd-auth{ display:inline-flex; align-items:stretch; }
.hd-user{ display:inline-flex; align-items:center; padding:0 14px 0 18px;
          font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-2);
          text-transform:uppercase; max-width:18ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
          border-left:1px solid var(--rule-dim); }
/* ENTRAR — clon visual de .hd-tab: texto display, sin fondo/borde/sombra, full-height,
   mismo padding e interlineado. Solo el color de acento al hover lo distingue. */
.hd-login{ position:relative; display:inline-flex; align-items:center; padding:0 18px;
           font-family:var(--disp); font-weight:900; font-size:14px; letter-spacing:var(--tr-eyebrow);
           text-transform:uppercase; color:var(--ink); text-decoration:none;
           border-left:1px solid var(--rule-dim); transition:color .1s; }
.hd-login:hover{ color:var(--lime); }
.hd-login:hover::after{ content:""; position:absolute; left:14px; right:14px; bottom:8px; height:4px; background:var(--lime); }
/* SALIR — botón discreto a juego con la barra (no una pastilla). */
.hd-logout{ display:inline-flex; align-items:center; padding:0 14px;
            font-family:var(--disp); font-weight:900; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
            color:var(--ink-3); background:transparent; border:0; cursor:pointer; transition:color .1s; }
.hd-logout:hover{ color:var(--danger); }
.hd-logout:disabled{ opacity:.5; cursor:wait; }
/* en el header compacto del mapa, el widget va tras el badge (que ya empuja a la derecha) */
.mhead-auth{ align-items:center; }
.mhead-auth .hd-login{ border-left:0; padding:7px 14px; }
.mhead-auth .hd-user{ border-left:0; padding:0 8px; }
/* en móvil, oculta el nombre largo para no romper el nav apretado */
@media (max-width: 560px){
  .hd-user{ max-width:9ch; padding:0 8px; }
  .hd-login{ padding:0 12px; }
}

/* ============================================================
   DESGLOSE POR VUELTA (circuito).
   Secciones "VUELTA N" en LIVE/RESULTADOS/RÉCORDS y RM por vuelta
   en el MAPA. Neo-brutal azul de marca, consistente con el resto.
   Una ruta de 1 vuelta NO usa estas clases (render plano = hoy).
   ============================================================ */
.lapvcp-sec{ margin:0 0 18px; }
.lapvcp-sec:last-child{ margin-bottom:0; }
.lapvcp-h{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 8px; padding:5px 12px;
  background:var(--lime); color:var(--ink-on);
  font-family:var(--disp); font-weight:900; font-size:12px;
  letter-spacing:var(--tr-eyebrow); text-transform:uppercase; line-height:1;
  box-shadow:4px 4px 0 0 var(--lime-deep);
}
.lapvcp-h::before{ content:"▦"; font-size:11px; }