/* ═══════════════════════════════════════════════════════════════
   RaceTrak — Design System v2.0
   Importar DESPUÉS de style.css en cada HTML shell.
   No reemplaza style.css — lo mejora y extiende.
   Basado en el prototipo de claude.ai/design (Abril 2026)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Fuentes actualizadas ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;700&display=swap');

/* ── 2. Design Tokens (sobreescribe los de style.css) ─────────── */
:root {
  /* Fondos */
  --bg:          #05080F;
  --bg-1:        #0A0F1C;
  --bg-2:        #0D1322;
  --bg-3:        #111827;

  /* Superficies */
  --surface:     rgba(255,255,255,.04);
  --surface-hi:  rgba(255,255,255,.07);
  --border:      rgba(255,255,255,.08);
  --border-hi:   rgba(255,255,255,.14);

  /* Textos */
  --text:        #F5F7FA;
  --text-2:      rgba(255,255,255,.65);
  --text-3:      rgba(255,255,255,.38);
  --text-4:      rgba(255,255,255,.18);

  /* Colores de acento */
  --green:       #00E5A0;
  --green-2:     #00B888;
  --green-glow:  rgba(0,229,160,.35);
  --green-dim:   rgba(0,229,160,.10);
  --red:         #FF2E5B;
  --red-glow:    rgba(255,46,91,.4);
  --purple:      #B84CFF;
  --yellow:      #FFB800;
  --blue:        #00B4FF;

  /* Tipografía */
  --font-sans:    'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'DM Mono', ui-monospace, monospace;
  --font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif;

  /* Compatibilidad con nombres viejos del proyecto */
  --primary:     var(--green);
  --accent:      var(--blue);
  --dark:        var(--bg-1);
  --font-body:   var(--font-sans);
  --font-heading: var(--font-display);
}

/* ── 3. Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 4. Tipografía utilitaria ────────────────────────────────── */
.mono, .font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.display         { font-family: var(--font-display); }

.label-xs {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.label-sm {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.label-md {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Section headers con prefijo // */
.section-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.section-label::before { content: '//'; color: var(--green); opacity: .6; }

/* ── 5. Tarjetas ─────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.card-hi {
  border-color: var(--border-hi);
  background: var(--surface-hi);
}
.card-green {
  background: rgba(0,229,160,.06);
  border-color: rgba(0,229,160,.2);
}
.card-red {
  background: rgba(255,46,91,.06);
  border-color: rgba(255,46,91,.2);
}
.card-blue {
  background: rgba(0,180,255,.06);
  border-color: rgba(0,180,255,.2);
}

/* Stat cell estilo F1 */
.stat-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
}
.stat-cell .stat-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-3);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.stat-cell .stat-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  letter-spacing: -.5px;
}
.stat-cell .stat-unit {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-3);
  letter-spacing: 1.5px;
  margin-top: 3px;
  text-transform: uppercase;
}
.stat-cell.green .stat-value { color: var(--green); }
.stat-cell.red   .stat-value { color: var(--red); }
.stat-cell.blue  .stat-value { color: var(--blue); }
.stat-cell.purple .stat-value { color: var(--purple); }

/* ── 6. Botones ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700;
  transition: all .18s ease;
  text-decoration: none;
}

.btn-primary {
  padding: 16px 24px;
  border-radius: 14px;
  background: linear-gradient(180deg, #00F0A8, #00C88A);
  color: #020307;
  font-size: 14px;
  letter-spacing: 1.5px;
  font-family: var(--font-mono);
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 6px 24px var(--green-glow), inset 0 1px 0 rgba(255,255,255,.3);
  width: 100%;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 32px var(--green-glow); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12px;
  letter-spacing: 1.2px;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }

.btn-danger {
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255,46,91,.08);
  border: 1px solid rgba(255,46,91,.3);
  color: var(--red);
  font-size: 12px;
  letter-spacing: 1.2px;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
}
.btn-danger:hover { background: rgba(255,46,91,.15); }

.btn-stop {
  padding: 14px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 12px;
  letter-spacing: 1.5px;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
}
.btn-stop:hover { border-color: var(--red); color: var(--red); }

.btn-sm {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 11px;
}

/* ── 7. Inputs ───────────────────────────────────────────────── */
.input, .select, input[type="text"], input[type="email"],
input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-sans);
  outline: none;
  transition: all .18s;
  -webkit-appearance: none;
}
.input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--text-4); }
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: rgba(0,229,160,.5);
  background: rgba(0,229,160,.04);
  box-shadow: 0 0 0 3px rgba(0,229,160,.08);
}
select option { background: var(--bg-2); }

.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── 8. Badges / Pills ───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.badge-green  { background: var(--green-dim);            color: var(--green); border: 1px solid rgba(0,229,160,.25); }
.badge-red    { background: rgba(255,46,91,.10);         color: var(--red);   border: 1px solid rgba(255,46,91,.25); }
.badge-blue   { background: rgba(0,180,255,.10);         color: var(--blue);  border: 1px solid rgba(0,180,255,.25); }
.badge-yellow { background: rgba(255,184,0,.10);         color: var(--yellow);border: 1px solid rgba(255,184,0,.25); }
.badge-purple { background: rgba(184,76,255,.10);        color: var(--purple);border: 1px solid rgba(184,76,255,.25); }
.badge-ghost  { background: var(--surface);              color: var(--text-2);border: 1px solid var(--border); }

/* ── 9. Tablas ───────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
thead th {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
}
tbody tr:hover { background: var(--surface); }
tbody td {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-2);
}
.td-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}

/* ── 10. Divider ─────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: 8px 0; }

/* ── 11. Leaderboard row ─────────────────────────────────────── */
.runner-row {
  display: grid;
  grid-template-columns: 32px 36px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all .18s;
}
.runner-row:hover { background: var(--surface); border-color: var(--border); }
.runner-row.active-runner {
  background: linear-gradient(90deg, rgba(0,229,160,.08), transparent 80%);
  border-color: rgba(0,229,160,.2);
  box-shadow: inset 2px 0 0 var(--green);
}
.runner-pos {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
}
.runner-pos.p1 { color: var(--yellow); font-weight: 700; }
.runner-pos.p2 { color: var(--text-2); }
.runner-pos.p3 { color: #CD7F32; }
.runner-bib {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  text-align: center;
}
.runner-name { font-size: 13px; font-weight: 600; color: var(--text); }
.runner-detail { font-size: 10px; color: var(--text-3); margin-top: 2px; }

/* ── 12. Pit messages (cheers / checkpoints) ─────────────────── */
.pit-message {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
}
.pit-message.cheer     { background: rgba(255,184,0,.08);  border: 1px solid rgba(255,184,0,.2); }
.pit-message.checkpoint{ background: rgba(0,229,160,.08);  border: 1px solid rgba(0,229,160,.2); }
.pit-message.system    { background: rgba(0,180,255,.08);  border: 1px solid rgba(0,180,255,.2); }
.pit-message.sos       { background: rgba(255,46,91,.08);  border: 1px solid rgba(255,46,91,.2); }

/* ── 13. Live dot / GPS signal ───────────────────────────────── */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse-red 1.5s infinite;
}
.gps-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-red {
  0%   { box-shadow: 0 0 0 0 rgba(255,46,91,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(255,46,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,46,91,0); }
}
@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(0,229,160,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(0,229,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,229,160,0); }
}

/* GPS signal bars */
.sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 12px; }
.sig i { display: block; width: 2.5px; background: var(--green); border-radius: 1px; }
.sig i:nth-child(1) { height: 30%; }
.sig i:nth-child(2) { height: 55%; }
.sig i:nth-child(3) { height: 80%; }
.sig i:nth-child(4) { height: 100%; }
.sig.weak i:nth-child(3),
.sig.weak i:nth-child(4) { background: var(--text-4); }
.sig.no-signal i { background: var(--text-4); }

/* ── 14. Navigation (header bar de la app) ───────────────────── */
.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 56px;
  border-bottom: 1px solid var(--border);
  background: rgba(5,8,15,.85);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 16px;
  line-height: 1;
}
.brand-wordmark .green { color: var(--green); }
.brand-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--green);
  letter-spacing: 3px;
  margin-top: 2px;
  opacity: .8;
}

/* ── 15. Broadcast bar (top bar estilo F1) ───────────────────── */
.broadcast-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  height: 44px;
  border-bottom: 1px solid var(--border);
  background: rgba(4,7,13,.85);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-3);
  text-transform: uppercase;
  flex-shrink: 0;
  overflow: hidden;
}
.broadcast-live {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--red);
  font-weight: 700;
  letter-spacing: 3px;
  white-space: nowrap;
}
.broadcast-session { color: var(--text-2); letter-spacing: 2px; }
.broadcast-metric { color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.broadcast-metric b { color: var(--text); font-weight: 500; }
.broadcast-metric.ok b { color: var(--green); }

/* ── 16. Ticker (race feed) ──────────────────────────────────── */
.race-ticker {
  display: flex;
  align-items: center;
  height: 44px;
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: rgba(4,7,13,.9);
  font-family: var(--font-mono);
  font-size: 11px;
  flex-shrink: 0;
}
.race-ticker-label {
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  background: var(--green);
  color: #020307;
  font-weight: 800;
  letter-spacing: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.race-ticker-scroll { flex: 1; overflow: hidden; position: relative; }
.race-ticker-track {
  display: flex;
  gap: 48px;
  padding: 0;
  white-space: nowrap;
  color: var(--text-2);
  letter-spacing: 1.5px;
  animation: ticker-scroll 40s linear infinite;
  height: 44px;
  align-items: center;
}
.race-ticker-track .sep { color: var(--green); opacity: .5; }
.race-ticker-track b   { color: var(--text); font-weight: 500; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 17. Background atmósfera (aplicar en body o contenedor) ─── */
.rt-bg {
  background:
    radial-gradient(ellipse 900px 500px at 10% -10%, rgba(0,229,160,.05), transparent 60%),
    radial-gradient(ellipse 700px 400px at 90%  90%, rgba(0,180,255,.04), transparent 60%),
    linear-gradient(180deg, #03060D 0%, #070B14 100%);
}

/* Subtle grid overlay (añadir a contenedor) */
.rt-grid::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,229,160,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,160,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* ── 18. Scrollbar personalizada ─────────────────────────────── */
::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(0,229,160,.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,229,160,.45); }
* { scrollbar-width: thin; scrollbar-color: rgba(0,229,160,.25) transparent; }

/* ── 19. Utilidades ─────────────────────────────────────────── */
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-blue   { color: var(--blue); }
.text-yellow { color: var(--yellow); }
.text-purple { color: var(--purple); }
.text-muted  { color: var(--text-3); }

.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }

.rounded-sm { border-radius: 8px; }
.rounded    { border-radius: 12px; }
.rounded-lg { border-radius: 16px; }
.rounded-xl { border-radius: 20px; }

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-10  { gap: 10px; }

/* ── 20. Animaciones ─────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeIn .3s ease both; }

/* Stagger para listas */
.animate-in:nth-child(1) { animation-delay: .05s; }
.animate-in:nth-child(2) { animation-delay: .10s; }
.animate-in:nth-child(3) { animation-delay: .15s; }
.animate-in:nth-child(4) { animation-delay: .20s; }
.animate-in:nth-child(5) { animation-delay: .25s; }

/* ── FIN design-system.css ───────────────────────────────────── */