/* Colapinto Live — tema oscuro, acento Alpine */
:root {
  --bg: #0b0e13;
  --surface: #141922;
  --surface-2: #1b2230;
  --border: #263042;
  --ink: #e8edf4;
  --ink-2: #9aa7ba;
  --ink-3: #5f6b7d;
  --accent: #00a1e8;        /* azul Alpine */
  --purple: #c084fc;        /* récord absoluto */
  --green: #4ade80;         /* récord personal */
  --yellow: #facc15;
  --red: #f87171;
  --mono: "SF Mono", "Cascadia Code", "DejaVu Sans Mono", Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}
.mono, .num, td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }

/* ---------- barra superior ---------- */
#topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
#session-title { font-weight: 650; font-size: 15px; }
#session-title #circuit { font-weight: 400; margin-left: 8px; font-size: 13px; }
#status-area { display: flex; align-items: center; gap: 12px; }
.lapcount { font-size: 13px; letter-spacing: .04em; color: var(--ink-2); }
.lapcount b { color: var(--ink); font-size: 15px; font-family: var(--mono); }

.pill {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650;
  letter-spacing: .03em; border: 1px solid var(--border); background: var(--surface-2);
}
.pill.green  { background: #14321f; color: var(--green);  border-color: #1e4d2e; }
.pill.yellow { background: #3a3210; color: var(--yellow); border-color: #5c4f14; }
.pill.sc     { background: #3a3210; color: var(--yellow); border-color: #5c4f14; }
.pill.red    { background: #3d1517; color: var(--red);    border-color: #612125; }

#replay-controls { margin-left: auto; display: flex; align-items: center; gap: 6px; }
#replay-controls button {
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer;
}
#replay-controls button:hover { color: var(--ink); border-color: var(--accent); }
#replay-controls button.active { color: var(--accent); border-color: var(--accent); }
#replay-controls .sep { width: 1px; height: 16px; background: var(--border); }
#sim-clock { font-size: 12px; margin-right: 4px; }

/* ---------- hero Colapinto ---------- */
main { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 14px 18px; max-width: 1100px; width: 100%; margin: 0 auto; }
#hero {
  background: linear-gradient(135deg, var(--surface) 0%, #10202e 100%);
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 14px 18px;
}
#hero-driver { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
#hero-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--surface-2); }
#hero-name { font-size: 19px; font-weight: 700; }
#hero-team { font-size: 13px; }
#hero-pos { margin-left: auto; font-family: var(--mono); font-weight: 700; color: var(--accent); display: flex; align-items: baseline; }
#hero-pos .p { font-size: 22px; opacity: .7; }
#hero-pos #pos-value { font-size: 46px; line-height: 1; }

#hero-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.tile { background: rgba(11,14,19,.55); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; }
.tile-label { font-size: 10.5px; letter-spacing: .09em; color: var(--ink-3); font-weight: 650; }
.tile-label .rival { color: var(--ink-2); }
.tile-value { font-size: 21px; font-weight: 650; margin-top: 3px; }
.tile-sub { font-size: 11.5px; margin-top: 2px; }
.tile-value.pb { color: var(--green); }
.tile-value.ob { color: var(--purple); }

.sectors { display: flex; gap: 5px; margin-top: 6px; }
.sector {
  flex: 1; font-family: var(--mono); font-size: 11px; text-align: center;
  padding: 2px 0 3px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2);
  border-bottom: 2px solid var(--ink-3);
}
.sector.pf { border-bottom-color: var(--green); color: var(--green); }
.sector.of { border-bottom-color: var(--purple); color: var(--purple); }

.badge-pit { color: var(--yellow); font-weight: 700; }
.badge-out { color: var(--green); font-weight: 700; }

/* ---------- neumáticos ---------- */
.tyre-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.tyre-dot {
  width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid; display: inline-block;
}
.tyre-S .tyre-dot { border-color: #ef4444; } .tyre-S { color: #ef4444; }
.tyre-M .tyre-dot { border-color: #facc15; } .tyre-M { color: #facc15; }
.tyre-H .tyre-dot { border-color: #d1d5db; } .tyre-H { color: #d1d5db; }
.tyre-I .tyre-dot { border-color: #34d399; } .tyre-I { color: #34d399; }
.tyre-W .tyre-dot { border-color: #60a5fa; } .tyre-W { color: #60a5fa; }

/* ---------- torre ---------- */
#tower-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
#tower { width: 100%; border-collapse: collapse; font-size: 13px; }
#tower th {
  text-align: left; font-size: 10.5px; letter-spacing: .08em; color: var(--ink-3);
  padding: 8px 10px; border-bottom: 1px solid var(--border); font-weight: 650;
}
#tower th.num, #tower td.num { text-align: right; }
#tower td { padding: 5.5px 10px; border-bottom: 1px solid #1a2130; }
#tower tbody tr:last-child td { border-bottom: none; }
#tower td.pos { font-family: var(--mono); font-weight: 700; color: var(--ink-2); width: 30px; }
.team-bar { width: 4px; padding: 0 !important; }
.team-bar span { display: block; width: 4px; height: 20px; border-radius: 2px; }
td.driver { font-weight: 650; white-space: nowrap; }
td.driver .team { color: var(--ink-3); font-weight: 400; font-size: 11.5px; margin-left: 7px; }
tr.focus td { background: rgba(0,161,232,.10); }
tr.focus td.driver { color: var(--accent); }
tr.retired td { opacity: .38; }
td .lap-pf { color: var(--green); }
td .lap-of { color: var(--purple); }
.mini-tyre { font-weight: 700; }
.pit-flag { color: var(--yellow); font-size: 11px; font-weight: 700; margin-left: 6px; }

/* ---------- pie ---------- */
footer {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  padding: 8px 18px; border-top: 1px solid var(--border); background: var(--surface);
  font-size: 12.5px;
}
#race-control { flex: 1; min-width: 260px; }
#race-control .rc-lap { color: var(--ink-3); font-family: var(--mono); margin-right: 6px; }

#conn {
  position: fixed; bottom: 14px; right: 14px; background: #3d1517; color: var(--red);
  border-color: #612125;
}

@media (max-width: 720px) {
  #hero-pos #pos-value { font-size: 36px; }
  td.driver .team { display: none; }
  #replay-controls { margin-left: 0; }
}