html {
   margin: 0;
   padding: 0;
   width: 100%;
   overflow-x: hidden;
}

:root {
   --bg: #060810;
   --s1: #0c0f1a;
   --s2: #111520;
   --s3: #161c2a;
   --brd: #1f2535;
   --brd2: #2a3348;
   --acc: #f400a1;
   /* Rosa para Títulos y Selectores */
   --acc-y: #f0c040;
   /* Amarillo para Botones y Números */
   --acc2: #3d9cf0;
   --acc3: #f03d6a;
   --acc4: #40d4a0;
   --text: #ccd0e0;
   --dim: #7c8dae;
   --dimmer: #414c68;
   --gold: #f0c040;
   --silver: #a0b0c8;
   --bronze: #d08040;
   --open: #3d9cf0;
   --master: #f0c040;
   --plus: #f03d6a;
   --women: #b040f0;
   --purple: #9d4edd;
   --green: #40d4a0;
   --orange: #f08040;
   --trans-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

   /* ── RGB VARIABLES (For RGBA transparency) ── */
   --bg-rgb: 6, 8, 16;
   --s1-rgb: 12, 15, 26;
   --s2-rgb: 17, 21, 32;
   --s3-rgb: 22, 28, 42;
   --brd-rgb: 31, 37, 53;
   --brd2-rgb: 42, 51, 72;
   --acc-rgb: 244, 0, 161;
   --acc-y-rgb: 240, 192, 64;
   --acc2-rgb: 61, 156, 240;
   --acc3-rgb: 240, 61, 106;
   --acc4-rgb: 64, 212, 160;
   --gold-rgb: 240, 192, 64;
   --silver-rgb: 160, 176, 200;
   --bronze-rgb: 208, 128, 64;
   --purple-rgb: 157, 78, 221;
   --women-rgb: 176, 64, 240;
   --orange-rgb: 240, 128, 64;
   --black-rgb: 0, 0, 0;

   /* ── FONTS ── */
   --font-base: 'Rajdhani', sans-serif;
   --font-mono: 'JetBrains Mono', monospace;
   --font-display: 'Bebas Neue', sans-serif;
   /* ── ALIASES ── */
   --fg: #ccd0e0;                   /* foreground — alias of --text */
   /* ── SHADOWS ── */
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.5);
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}



/* ── ALINACIONES & UTILIDADES ── */
.text-right { text-align: right; }
.text-center { text-align: center; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.w-full { width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.gap-xs { gap: 8px; }
.gap-sm { gap: 12px; }
.gap-md { gap: 20px; }
.gap-lg { gap: 30px; }
.gap-xl { gap: 40px; }
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: 8px; }
.mb-sm { margin-bottom: 12px; }
.mb-md { margin-bottom: 20px; }
.mb-lg { margin-bottom: 30px; }
.mb-xl { margin-bottom: 40px; }
.mt-xs { margin-top: 8px; }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 20px; }
.mt-lg { margin-top: 30px; }
.mt-xl { margin-top: 40px; }
.text-dim { color: var(--dim); }
.text-dimmer { color: var(--dimmer); }
.text-text { color: var(--text); }
.text-acc { color: var(--acc); }
.text-acc-y { color: var(--acc-y); }
.text-green { color: var(--green); }
.text-open { color: var(--open); }
.text-plus { color: var(--plus); }
.text-white { color: #fff; }
.font-mono { font-family: var(--font-mono); }
.font-base { font-family: var(--font-base); }
.font-display { font-family: var(--font-display); }
.label-xs { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; }
.label-sm { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.label-md { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.kit-label { font-family: var(--font-mono); font-size: 10px; color: var(--dim); letter-spacing: 2px; text-transform: uppercase; width: 100%; }
.kit-section-inner { padding: 16px; width: 100%; max-width: 1800px; margin: 0 auto; }
.two-col-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.two-col-grid-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; }
.card-bg { background: var(--s2); border: 1px solid var(--brd); border-radius: 6px; padding: 20px; }
.card-bg-sm { background: var(--s2); border: 1px solid var(--brd); border-radius: 4px; padding: 15px; }

/* ── BACKGROUND GRID ── */
.bg-grid {
   position: fixed;
   inset: 0;
   background-image: linear-gradient(var(--brd2) 1px, transparent 1px), linear-gradient(90deg, var(--brd2) 1px, transparent 1px);
   background-size: 60px 60px;
   opacity: 0.15;
   pointer-events: none;
   z-index: 0;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar {
   width: 4px;
   height: 4px
}

::-webkit-scrollbar-track {
   background: var(--s1)
}

::-webkit-scrollbar-thumb {
   background: var(--brd2);
   border-radius: 2px
}

/* ══════════════════════════════════
   1. TU CÓDIGO ORIGINAL INTACTO
══════════════════════════════════ */
/* HERO */
.hero {
   position: relative;
   overflow: hidden;
   background: linear-gradient(160deg, #06080f 0%, #0a1020 45%, #070c18 100%);
   padding: 8px 24px;
   border-bottom: 1px solid var(--brd);
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.hero-grid {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(var(--brd) 1px, transparent 1px), linear-gradient(90deg, var(--brd) 1px, transparent 1px);
   background-size: 40px 40px;
   opacity: .2;
   pointer-events: none
}

.hero-glow {
   position: absolute;
   top: -200px;
   right: -100px;
   width: 400px;
   height: 400px;
   background: radial-gradient(circle, rgba(var(--acc-rgb), .05) 0%, transparent 65%);
   pointer-events: none
}

.hero-content {
   display: flex;
   align-items: baseline;
   gap: 16px;
}

.hero-tag {
   font-family: var(--font-mono);
   font-size: 8px;
   letter-spacing: 2px;
   color: var(--acc);
   text-transform: uppercase;
   opacity: .8
}

.hero-title {
   font-family: var(--font-display);
   font-size: 32px;
   line-height: 1;
   color: var(--fg);
   letter-spacing: 1px;
   text-shadow: 0 0 30px rgba(var(--acc-rgb), .15)
}

.hero-title span {
   color: var(--acc)
}

.hero-sub {
   font-family: var(--font-base);
   font-size: 11px;
   font-weight: 500;
   color: var(--dim);
   letter-spacing: 2px;
   text-transform: uppercase;
}

.kpis {
   display: flex;
   gap: 8px;
}

.kpi {
   background: rgba(255, 255, 255, .02);
   border: 1px solid var(--brd);
   border-radius: 3px;
   padding: 4px 12px;
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   gap: 8px;
}

.kpi-v {
   font-family: var(--font-display);
   font-size: 20px;
   color: var(--acc-y);
   line-height: 1
}

.kpi-l {
   font-family: var(--font-mono);
   font-size: 8px;
   color: var(--dim);
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-top: 0;
}

/* NAV TABS */
.nav {
   display: flex;
   background: var(--s1);
   border-bottom: 1px solid var(--brd);
   padding: 0 48px;
   overflow-x: auto;
   gap: 0
}

.ntab {
   flex-shrink: 0;
   padding: 14px 20px;
   cursor: pointer;
   font-family: var(--font-base);
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--dim);
   border-bottom: 2px solid transparent;
   transition: color .15s, border-bottom-color .15s;
   white-space: nowrap
}

.ntab:hover {
   color: var(--text)
}

.ntab.on {
   color: var(--acc);
   border-bottom-color: var(--acc)
}

/* PANELS */
.panel {
   display: none;
   padding: 32px 48px;
   animation: fadeIn .2s ease
}

.panel.on {
   display: block
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(4px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

.ph {
   margin-bottom: 6px
}

.ph-title {
   font-family: var(--font-display);
   font-size: 30px;
   letter-spacing: 2px;
   color: #fff
}

.ph-sub {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 20px
}

/* FILTER BAR */
.fbar {
   display: flex;
   gap: 8px;
   margin-bottom: 16px;
   flex-wrap: wrap;
   align-items: center
}

.flbl {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-right: 2px
}

.fbtn {
   padding: 4px 12px;
   border-radius: 3px;
   border: 1px solid var(--brd);
   background: transparent;
   color: var(--dim);
   cursor: pointer;
   font-family: var(--font-base);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 1px;
   transition: color .12s, border-color .12s, background-color .12s;
   outline: none;
}

.fbtn:hover,
.fbtn:focus-visible {
   color: var(--text);
   border-color: var(--brd2)
}

.fbtn.on {
   border-color: var(--acc);
   color: var(--acc);
   background: rgba(var(--acc-rgb), .08)
}

.fbtn.fo.on {
   border-color: var(--open);
   color: var(--open);
   background: rgba(var(--acc2-rgb), .08)
}

.fbtn.fm.on {
   border-color: var(--master);
   color: var(--master);
   background: rgba(var(--acc-rgb), .08)
}

.fbtn.fp.on {
   border-color: var(--plus);
   color: var(--plus);
   background: rgba(var(--acc3-rgb), .08)
}

.fbtn.fw.on {
   border-color: var(--women);
   color: var(--women);
   background: rgba(var(--women-rgb), .08)
}

.fsort {
   padding: 4px 10px;
   border-radius: 3px;
   border: 1px solid var(--brd);
   background: var(--s2);
   color: var(--text);
   font-family: var(--font-base);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   max-width: 100%;
}

.fsearch {
   padding: 4px 10px;
   border-radius: 3px;
   border: 1px solid var(--brd);
   background: var(--s2);
   color: var(--text);
   font-family: var(--font-mono);
   font-size: 11px;
   outline: none;
   width: 180px;
   transition: border-color .15s
}

.fsearch:focus {
   border-color: var(--acc)
}

.fcnt {
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--dim);
   margin-left: auto
}

/* TABLE */
.twrap {
   border: 1px solid var(--brd);
   border-radius: 6px;
   overflow: hidden
}

.tscroll {
   max-height: 72vh;
   overflow-y: auto;
   overflow-x: auto
}

.tscroll.tscroll-full {
   max-height: calc(100vh - 140px);
}

table {
   width: 100%;
   border-collapse: collapse;
   min-width: 900px
}

/* HIGH-DENSITY LEADERBOARD (40+ Karts) */
table.t-dense {
   min-width: 600px;
}

table.t-dense thead th {
   padding: 4px 8px;
   font-size: 9px;
   background: rgba(0, 0, 0, 0.8);
   letter-spacing: 1px;
}

table.t-dense tbody td {
   padding: 2px 8px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

table.t-dense .rnk {
   width: 18px;
   height: 18px;
   font-size: 11px;
   line-height: 16px;
   border-radius: 2px;
}

table.t-dense .pname {
   font-family: var(--font-base);
   font-size: 15px;
   font-weight: 600;
   letter-spacing: 0.5px;
   color: var(--fg);
   line-height: 0.9;
}

table.t-dense .cat {
   font-size: 8px;
   padding: 1px 4px;
}

table.t-dense .kart-lbl {
   font-size: 14px;
   font-family: var(--font-display);
   letter-spacing: 1px;
   color: var(--acc-y);
   line-height: 1;
}

table.t-dense .tval,
table.t-dense .tdim,
table.t-dense .delta-pos,
table.t-dense .delta-neg,
table.t-dense .delta-neu {
   font-size: 11px;
   font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
}

table.t-dense .tfast {
   font-size: 11px;
   padding: 0 4px;
}

table.t-dense td:last-child span.tdim {
   font-size: 13px;
   font-weight: 700;
   color: var(--fg);
}

table.t-dense .sbar-w {
   gap: 4px;
}

table.t-dense .sbar {
   display: none;
}

/* SEGUIMIENTO VISUAL (CHECKBOX FILA) */
table.t-dense .row-check {
   appearance: none;
   width: 14px;
   height: 14px;
   border: 1px solid var(--dim);
   border-radius: 3px;
   background: var(--s2);
   cursor: pointer;
   position: relative;
   transition: all 0.2s;
   margin: 0;
   display: block;
}

table.t-dense .row-check:checked {
   background: var(--acc);
   border-color: var(--acc);
}

table.t-dense .row-check:checked::after {
   content: '✓';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #000;
   font-size: 10px;
   font-weight: bold;
}

table.t-dense tbody tr:has(.row-check:checked) td {
   background-color: rgba(var(--acc-y-rgb), 0.12) !important;
   border-bottom: 1px solid rgba(var(--acc-y-rgb), 0.3);
}

table.t-dense tbody tr:has(.row-check:checked):hover td {
   background-color: rgba(var(--acc-y-rgb), 0.18) !important;
}

table.t-dense tbody tr:nth-child(even) td {
   background: rgba(255, 255, 255, .005);
}

table.t-dense tr:hover td {
   background: rgba(255, 255, 255, .02);
}

thead th {
   padding: 9px 10px;
   text-align: left;
   font-family: var(--font-mono);
   font-size: 9px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--dim);
   border-bottom: 1px solid var(--brd);
   background: rgba(0, 0, 0, .4);
   position: sticky;
   top: 0;
   z-index: 3;
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
   transition: color 0.2s;
}

thead th:hover {
   color: var(--text)
}

thead th.sort-asc::after {
   content: ' ↑';
   color: var(--acc)
}

thead th.sort-desc::after {
   content: ' ↓';
   color: var(--acc)
}

tbody td {
   padding: 8px 10px;
   border-bottom: 1px solid rgba(var(--brd-rgb), .5);
   vertical-align: middle;
   transition: background-color 0.2s;
}

body {
    background: radial-gradient(circle at top, #0c1222 0%, var(--bg) 70%);
    color: var(--text);
    font-family: var(--font-base);
    font-size: 13px;
    line-height: 1.5;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

tr:last-child td {
   border-bottom: none
}

tr:hover td {
   background: rgba(255, 255, 255, .015)
}

tr.g1 td {
   background: rgba(var(--acc-rgb), .035)
}

tr.g2 td {
   background: rgba(var(--silver-rgb), .02)
}

tr.g3 td {
   background: rgba(var(--bronze-rgb), .02)
}

tr.nodata {
   opacity: .45
}

/* ENDURANCE & LIVE STATUS */
.pilot-driving {
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--open);
   display: flex;
   align-items: center;
   gap: 5px;
   margin-top: -1px;
   line-height: 1;
   font-weight: 600;
}

.live-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   display: inline-block;
   flex-shrink: 0;
}

.live-dot.pulse {
   animation: pulseLive 1.5s infinite;
}

.dot-green {
   background-color: var(--green);
   box-shadow: 0 0 6px var(--green);
}

.dot-red {
   background-color: var(--plus);
   box-shadow: 0 0 6px var(--plus);
}

.dot-blue {
   background-color: var(--open);
   box-shadow: 0 0 6px var(--open);
}

.dot-yellow {
   background-color: var(--acc);
   box-shadow: 0 0 6px var(--acc);
}

.dot-gray {
   background-color: var(--dim);
   box-shadow: transparent;
}

@keyframes pulseLive {
   0% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: 0.4;
      transform: scale(1.3);
   }

   100% {
      opacity: 1;
      transform: scale(1);
   }
}

/* BADGES & CHIPS */
.rnk {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   border-radius: 3px;
   font-family: var(--font-display);
   font-size: 14px
}

.r1 {
   background: rgba(var(--acc-y-rgb), .2);
   color: var(--gold);
   border: 1px solid rgba(var(--acc-y-rgb), .4)
}

.r2 {
   background: rgba(var(--silver-rgb), .12);
   color: var(--silver);
   border: 1px solid rgba(var(--silver-rgb), .3)
}

.r3 {
   background: rgba(var(--bronze-rgb), .12);
   color: var(--bronze);
   border: 1px solid rgba(var(--bronze-rgb), .3)
}

.rn {
   background: rgba(255, 255, 255, .03);
   color: var(--dim);
   border: 1px solid var(--brd);
   font-size: 10px;
   font-family: var(--font-base);
   font-weight: 700
}

.rnd {
   background: transparent;
   color: var(--dimmer);
   border: 1px solid var(--dimmer);
   font-size: 10px;
   font-family: var(--font-base)
}

.cat {
   display: inline-block;
   padding: 1px 6px;
   border-radius: 3px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase
}

.cO {
   background: rgba(var(--acc2-rgb), .15);
   color: var(--open);
   border: 1px solid rgba(var(--acc2-rgb), .3)
}

.cM {
   background: rgba(var(--acc-y-rgb), .12);
   color: var(--master);
   border: 1px solid rgba(var(--acc-y-rgb), .3)
}

.cP {
   background: rgba(var(--acc3-rgb), .12);
   color: var(--plus);
   border: 1px solid rgba(var(--acc3-rgb), .25)
}

.cW {
   background: rgba(var(--women-rgb), .15);
   color: var(--women);
   border: 1px solid rgba(var(--women-rgb), .3)
}

.tfast {
   font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 700;
   color: var(--purple);
   background: rgba(var(--purple-rgb), .08);
   border: 1px solid rgba(var(--purple-rgb), .25);
   padding: 1px 7px;
   border-radius: 3px;
   display: inline-block;
   white-space: nowrap
}

.tdim {
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--dim)
}

.tval {
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--text)
}

.pname {
   font-family: var(--font-base);
   font-size: 16px;
   font-weight: 700;
   color: var(--fg);
   letter-spacing: .3px
}

.knum {
   font-family: var(--font-display);
   font-size: 22px;
   color: var(--acc-y);
   line-height: 1
}

.sc {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   padding: 1px 5px;
   border-radius: 3px;
   font-size: 9px;
   font-weight: 700;
   border: 1px solid;
   white-space: nowrap;
   font-family: var(--font-mono)
}

.sc1 {
   background: rgba(var(--acc4-rgb), .1);
   color: var(--green);
   border-color: rgba(var(--acc4-rgb), .3)
}

.sc2 {
   background: rgba(var(--acc2-rgb), .08);
   color: var(--open);
   border-color: rgba(var(--acc2-rgb), .25)
}

.sc3 {
   background: rgba(var(--acc-y-rgb), .07);
   color: var(--acc-y);
   border-color: rgba(var(--acc-y-rgb), .2)
}

.sc4 {
   background: rgba(var(--acc3-rgb), .07);
   color: var(--plus);
   border-color: rgba(var(--acc3-rgb), .2)
}

/* SCORE BAR Y DELTAS */
.sbar-w {
   display: flex;
   align-items: center;
   gap: 7px
}

.sbar {
   height: 3px;
   border-radius: 2px;
   background: var(--acc2);
   flex-shrink: 0;
   min-width: 2px
}

.sgap {
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--dim);
   white-space: nowrap
}

.delta-pos {
   color: var(--green);
   font-weight: 700
}

.delta-neg {
   color: var(--plus);
   font-weight: 700
}

.delta-neu {
   color: var(--dim)
}

.dbar-w {
   display: flex;
   align-items: center;
   gap: 4px;
   white-space: nowrap
}

.dbar-g {
   height: 6px;
   border-radius: 2px 0 0 2px;
   background: var(--green);
   min-width: 1px
}

.dbar-l {
   height: 6px;
   border-radius: 0 2px 2px 0;
   background: var(--plus);
   min-width: 1px
}

.dbar-sep {
   width: 1px;
   background: var(--dim);
   height: 10px
}

/* EXPAND ROW */
.exp-row td {
   padding: 0 !important;
   border-bottom: 1px solid var(--brd)
}

.exp-inner {
   padding: 20px 40px;
   background: var(--s2);
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 20px
}

.exp-card {
   background: var(--s3);
   border: 1px solid var(--brd);
   border-radius: 4px;
   padding: 14px
}

.exp-card h4 {
   font-family: var(--font-display);
   font-size: 14px;
   letter-spacing: 2px;
   color: var(--acc);
   margin-bottom: 10px;
   text-transform: uppercase
}

.mini-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 3px 0;
   border-bottom: 1px solid var(--brd);
   font-size: 11px
}

.mini-row:last-child {
   border: none
}

.ml {
   color: var(--dim)
}

.mv {
   font-family: var(--font-mono);
   color: var(--text)
}

.mv.good {
   color: var(--green)
}

.mv.bad {
   color: var(--plus)
}

/* Timeline spark */
.spark {
   display: flex;
   align-items: flex-end;
   gap: 2px;
   height: 40px;
   margin-top: 6px
}

.spark-bar {
   border-radius: 2px 2px 0 0;
   min-width: 6px;
   flex: 1;
   position: relative;
   cursor: pointer;
   transition: opacity .1s
}

.spark-bar:hover {
   opacity: .8
}

.spark-bar[data-type=heat] {
   background: var(--acc2)
}

.spark-bar[data-type=prefinal] {
   background: var(--acc)
}

.spark-bar[data-type=final] {
   background: var(--green)
}

.rt-leg {
   display: flex;
   gap: 10px;
   margin-top: 6px
}

.rt-dot {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 2px;
   margin-right: 3px
}

/* KART SECTION */
.kart-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 12px;
   margin-top: 4px
}

.kart-card {
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   padding: 16px;
   cursor: pointer;
   transition: border-color .15s, background .15s;
   position: relative;
   overflow: hidden
}

.kart-card:hover {
   border-color: var(--acc);
   background: rgba(var(--acc-rgb), .03)
}

.kart-card.top3 {
   border-color: var(--brd2)
}

.kc-rank {
   position: absolute;
   top: 12px;
   right: 14px;
   font-family: var(--font-display);
   font-size: 36px;
   color: var(--dimmer);
   line-height: 1
}

.kc-num {
   font-family: var(--font-display);
   font-size: 48px;
   color: var(--acc-y);
   line-height: 1;
   margin-bottom: 4px
}

.kc-time {
   font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 700;
   color: var(--green);
   background: rgba(var(--acc4-rgb), .08);
   border: 1px solid rgba(var(--acc4-rgb), .2);
   padding: 2px 8px;
   border-radius: 3px;
   display: inline-block;
   margin-bottom: 8px
}

.kc-pilot {
   font-family: var(--font-base);
   font-size: 12px;
   color: var(--dim);
   margin-bottom: 10px
}

.kc-sectors {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   margin-bottom: 10px
}

.kc-avg {
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--dim)
}

/* Heatmap */
.hmap-wrap {
   overflow-x: auto;
   margin-top: 4px
}

.hmap-table {
   border-collapse: collapse;
   font-size: 10px;
   font-family: var(--font-mono)
}

.hmap-table th {
   padding: 4px 8px;
   color: var(--dim);
   font-weight: 400;
   text-align: center;
   background: var(--s2)
}

.hmap-table td {
   width: 36px;
   height: 28px;
   text-align: center;
   font-size: 10px;
   font-weight: 700;
   border: 1px solid var(--brd);
   cursor: default;
   transition: opacity .1s
}

.hmap-table td:hover {
   opacity: .7
}

.hmap-table .kart-lbl {
   font-family: var(--font-display);
   font-size: 14px;
   color: var(--acc);
   text-align: right;
   padding-right: 8px;
   white-space: nowrap;
   background: var(--s2)
}

/* COMPARISON */
.pos-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px
}

.cmp-select-bar {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   align-items: center;
   margin-bottom: 20px
}

.cmp-pilot-sel {
   position: relative;
   flex: 1;
   min-width: 200px
}

.cmp-pilot-sel select {
   width: 100%;
   padding: 8px 12px;
   background: var(--s2);
   border: 1px solid var(--brd);
   color: var(--text);
   border-radius: 4px;
   font-family: var(--font-base);
   font-size: 13px;
   font-weight: 600;
   outline: none
}

.cmp-pilot-sel select:focus {
   border-color: var(--acc)
}

.cmp-run {
   padding: 8px 20px;
   background: var(--acc);
   color: #000;
   border: none;
   border-radius: 4px;
   font-family: var(--font-base);
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   letter-spacing: 1px;
   transition: opacity .15s;
   white-space: nowrap;
}

.cmp-run:hover {
   opacity: .85
}

.cmp-reset {
   padding: 8px 16px;
   background: transparent;
   color: var(--dim);
   border: 1px solid var(--brd);
   border-radius: 4px;
   font-family: var(--font-base);
   font-size: 13px;
   cursor: pointer;
   white-space: nowrap;
}

.radar-wrap {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-bottom: 20px
}

.radar-canvas-wrap {
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   overflow: hidden;
}

.cmp-cards {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 12px;
   margin-bottom: 20px
}

.cmp-card {
   background: var(--s2);
   border: 1px solid var(--brd);
   border-radius: 6px;
   padding: 14px
}

.cmp-card-name {
   font-family: var(--font-base);
   font-size: 15px;
   font-weight: 700;
   margin-bottom: 10px
}

.cmp-stat {
   display: flex;
   justify-content: space-between;
   padding: 3px 0;
   border-bottom: 1px solid var(--brd);
   font-size: 11px
}

.cmp-stat:last-child {
   border: none
}

.cmp-stat-l {
   color: var(--dim)
}

.cmp-stat-v {
   font-family: var(--font-mono);
   color: var(--text)
}

.cmp-stat-v.best {
   color: var(--green)
}

.cmp-stat-v.worst {
   color: var(--plus)
}

.shared-kart-row {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 6px 0;
   border-bottom: 1px solid var(--brd);
   flex-wrap: wrap;
}

.shared-kart-row:last-child {
   border: none
}

.note {
   padding: 8px 14px;
   font-size: 10px;
   color: var(--dim);
   border-top: 1px solid var(--brd);
   border-left: 3px solid var(--acc);
   background: rgba(var(--acc-rgb), .025);
   line-height: 1.7;
   font-family: var(--font-mono)
}

.footer {
   text-align: center;
   padding: 18px;
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dimmer);
   border-top: 1px solid var(--brd);
   letter-spacing: 2px
}

.hidden {
   display: none !important
}

canvas {
   max-width: 100%;
   height: auto
}

/* ══════════════════════════════════
   2. APP SHELL (SIDEBARS & MAIN)
══════════════════════════════════ */
.app-wrapper {
   display: flex;
   height: 100vh;
   overflow: hidden;
   background: var(--bg);
}

/* Primary Sidebar */
.sidebar {
   width: 240px;
   background: var(--s1);
   border-right: 1px solid var(--brd);
   display: flex;
   flex-direction: column;
   transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 50;
}

.sidebar.collapsed {
   width: 70px;
}

.sidebar-header {
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 20px;
   border-bottom: 1px solid var(--brd);
   white-space: nowrap;
   overflow: hidden;
}

.sidebar.collapsed .sidebar-header {
   justify-content: center;
   padding: 0;
}

.brand-logo {
   display: flex;
   align-items: center;
   transition: opacity 0.2s;
   min-width: 120px;
}

.sidebar.collapsed .brand-logo {
   opacity: 0;
   display: none;
}

.btn-collapse {
   background: transparent;
   border: 1px solid transparent;
   color: var(--dim);
   cursor: pointer;
   font-size: 18px;
   width: 32px;
   height: 32px;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--trans-smooth);
}

.btn-collapse:hover,
.btn-collapse:focus-visible {
   color: var(--acc);
   border-color: var(--brd2);
   background: var(--s2);
   outline: none;
}

/* Navigation Items */
.sidebar-nav {
   flex: 1;
   overflow-y: auto;
   padding: 16px 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.sidebar-nav::-webkit-scrollbar {
   width: 2px;
}

.nav-item {
   display: flex;
   align-items: center;
   padding: 14px 24px;
   color: var(--dim);
   text-decoration: none;
   font-family: var(--font-base);
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 2px;
   border-left: 3px solid transparent;
   transition: var(--trans-smooth);
   cursor: pointer;
   white-space: nowrap;
   outline: none;
}

.nav-item:hover,
.nav-item:focus-visible {
   background: rgba(255, 255, 255, 0.02);
   color: var(--text);
}

.nav-item.active {
   border-left-color: var(--acc);
   background: rgba(var(--acc-y-rgb), 0.05);
   color: var(--acc);
}

.nav-icon {
   min-width: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   margin-right: 14px;
}

.sidebar.collapsed .nav-item {
   padding: 14px 0;
   justify-content: center;
   border-left-width: 0;
}

.sidebar.collapsed .nav-item.active {
   border-left-width: 3px;
   padding-right: 3px;
}

.sidebar.collapsed .nav-icon {
   margin-right: 0;
   font-size: 20px;
}

.nav-text {
   transition: opacity 0.2s;
   opacity: 1;
}

.sidebar.collapsed .nav-text {
   opacity: 0;
   display: none;
}

/* Sub Sidebar */
.sub-sidebar {
   width: 0;
   background: var(--s2);
   border-right: 1px solid var(--brd);
   display: flex;
   flex-direction: column;
   transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
   z-index: 40;
}

.sub-sidebar.open {
   width: 220px;
}

.sub-header {
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 20px;
   border-bottom: 1px solid var(--brd);
   min-width: 220px;
}

.sub-title {
   font-family: var(--font-base);
   font-size: 14px;
   font-weight: 700;
   color: var(--text);
   letter-spacing: 2px;
   text-transform: uppercase;
}

.sub-nav {
   padding: 16px 12px;
   display: flex;
   flex-direction: column;
   gap: 6px;
   min-width: 220px;
}

.sub-item {
   padding: 10px 14px;
   color: var(--dim);
   font-family: var(--font-mono);
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 1px;
   border-radius: 4px;
   transition: var(--trans-smooth);
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.sub-item:hover,
.sub-item:focus-visible {
   background: var(--s3);
   color: var(--text);
   outline: none;
}

.sub-item.active {
   background: var(--brd);
   color: var(--fg);
   border-left: 2px solid var(--open);
}

.sub-badge {
   background: rgba(var(--acc3-rgb), 0.15);
   color: var(--plus);
   border: 1px solid rgba(var(--acc3-rgb), 0.3);
   border-radius: 3px;
   padding: 1px 5px;
   font-size: 9px;
   font-weight: bold;
}

.app-main {
   flex: 1;
   overflow-y: auto;
   position: relative;
   background: transparent;
}

/* ══════════════════════════════════
   9. RESPONSIVE DESIGN (BREAKPOINTS)
══════════════════════════════════ */
/* Resoluciones Medias / Laptops Pequeñas (Max 992px) */
@media (max-width: 992px) {
   .hero-title {
      font-size: 26px;
   }

   .grid-4 {
      grid-template-columns: repeat(2, 1fr);
   }

   .weather-timeline-short {
      padding: 16px;
   }

   .profile-stats-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* Tablets Landscape (Max 900px) */
@media (max-width: 900px) {
   .pos-grid {
      grid-template-columns: 1fr;
   }

   .radar-wrap {
      grid-template-columns: 1fr;
   }

   .profile-header {
      flex-direction: column;
      text-align: center;
      gap: 16px;
   }

   .grid-3 {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* Dispositivos Móviles y Tablets Orientación Vertical (Max 768px) */
@media (max-width: 768px) {

   /* Layout del App Shell */
   .mobile-header {
      display: flex;
   }

   .sidebar {
      position: absolute;
      height: 100vh;
      transform: translateX(0);
      width: 280px;
      box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
   }

   .sidebar.collapsed {
      transform: translateX(-100%);
      width: 280px;
      /* Esconde completamente el sidebar en lugar de colapsarlo a 70px */
   }

   /* Desactiva la versión minimizada de los textos de la barra en móvil */
   .sidebar.collapsed .sidebar-header {
      justify-content: space-between;
      padding: 0 20px;
   }

   .sidebar.collapsed .brand-logo,
   .sidebar.collapsed .nav-text {
      opacity: 1;
      display: block;
   }

   .sidebar.collapsed .nav-icon {
      margin-right: 14px;
      font-size: 16px;
   }

   .sidebar.collapsed .nav-item {
      padding: 14px 24px;
      justify-content: flex-start;
   }

   /* Sub Sidebar también como panel flotante */
   .sub-sidebar {
      position: absolute;
      height: 100vh;
      left: 0;
      z-index: 55;
      box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
   }

   .sub-sidebar.open {
      width: 280px;
   }

   /* Espaciados Generales y Tipografía */
   body {
      font-size: 14px;
   }

   .hero {
      padding: 24px 16px 20px;
   }

   .panel {
      padding: 20px 16px;
   }

   .hero-title {
      font-size: 40px;
   }

   .hero-sub {
      font-size: 12px;
      margin-bottom: 16px;
      letter-spacing: 2px;
   }

   .ph-title {
      font-size: 24px;
   }

   /* Grillas de Utilidades y Componentes */
   .grid-fluid,
   .grid-2,
   .grid-3,
   .grid-4 {
      grid-template-columns: 1fr;
   }

   .kart-grid {
      grid-template-columns: 1fr;
   }

   .exp-inner {
      grid-template-columns: 1fr;
      padding: 16px;
      gap: 12px;
   }

   .kit-section {
      padding: 16px;
   }

   .kit-title {
      font-size: 20px;
   }

   .kit-row {
      gap: 12px;
   }

   /* Ajustes en Inputs (Para evitar zoom automático molesto en iOS) */
   .form-control {
      font-size: 16px;
   }

   .fbar {
      gap: 8px;
      flex-direction: column;
      align-items: stretch;
   }

   .fsearch {
      width: 100%;
      margin-top: 4px;
   }

   .fcnt {
      margin-left: 0;
      text-align: left;
      margin-top: 4px;
   }

   /* Botones y Grupos */
   .cmp-select-bar {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
   }

   .cmp-run,
   .cmp-reset {
      width: 100%;
      text-align: center;
   }

   .profile-actions {
      flex-direction: column;
      gap: 10px;
   }

   .profile-actions .btn {
      width: 100%;
      margin: 0 !important;
   }

   .btn-group {
      display: flex;
      flex-direction: column;
      width: 100%;
   }

   .btn-group .btn {
      border-right: none;
      border-bottom: 1px solid var(--brd);
      width: 100%;
   }

   .btn-group .btn:last-child {
      border-bottom: none;
   }

   /* Timeline Clima y Componentes de Scroll Forzado Horizontal */
   .w-precip-header {
      flex-direction: column;
      gap: 12px;
   }

   .w-precip-status {
      width: 100%;
      text-align: center;
   }

   .w-graph-container {
      overflow-x: auto;
      padding-left: 50px;
      padding-bottom: 10px;
   }

   .w-bars {
      min-width: 500px;
      /* Fuerza el scroll para no agolpar las barras en móvil */
   }

   .w-time-axis {
      min-width: 500px;
      padding-left: 50px;
   }

   .hmap-wrap {
      margin: 0 -16px;
      padding: 0 16px;
      /* Efecto ancho total o 'Bleed' */
   }

   .tscroll {
      max-height: none;
   }
}

/* Teléfonos de Pantalla Pequeña (Max 480px) */
@media (max-width: 480px) {
   .hero-title {
      font-size: 34px;
   }

   .avatar-lg {
      width: 90px;
      height: 90px;
      font-size: 32px;
   }

   .profile-name {
      font-size: 22px;
   }

   .kc-num {
      font-size: 36px;
   }

   .stat-val {
      font-size: 20px;
   }
}

/* ══════════════════════════════════
   10. LOGIN PAGE
══════════════════════════════════ */

/* Body overrides for login page */
body.login-page {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   overflow: hidden;
}

/* Scan-line CRT overlay */
body.login-page::after {
   content: '';
   position: fixed;
   inset: 0;
   background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
   );
   pointer-events: none;
   z-index: 1;
}

/* Ambient glow spheres */
.login-glow-1 {
   position: fixed;
   top: -20%;
   left: -10%;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(var(--acc-rgb), 0.06) 0%, transparent 65%);
   pointer-events: none;
   z-index: 0;
   animation: loginDrift1 12s ease-in-out infinite alternate;
}

.login-glow-2 {
   position: fixed;
   bottom: -15%;
   right: -5%;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(var(--acc2-rgb), 0.05) 0%, transparent 65%);
   pointer-events: none;
   z-index: 0;
   animation: loginDrift2 15s ease-in-out infinite alternate;
}

@keyframes loginDrift1 {
   from { transform: translate(0, 0) scale(1); }
   to   { transform: translate(40px, 30px) scale(1.1); }
}

@keyframes loginDrift2 {
   from { transform: translate(0, 0) scale(1); }
   to   { transform: translate(-30px, -20px) scale(1.08); }
}

/* Container + entrada */
.login-container {
   width: 100%;
   max-width: 440px;
   padding: 20px;
   position: relative;
   z-index: 10;
   animation: loginCardEntrance 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes loginCardEntrance {
   from {
      opacity: 0;
      transform: translateY(28px) scale(0.97);
   }
   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

/* Card */
.login-card {
   background: var(--s1);
   border: 1px solid var(--brd);
   border-radius: 6px;
   padding: 40px;
   box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.7),
      0 0 40px rgba(var(--acc-rgb), 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
   position: relative;
   overflow: hidden;
   transition: box-shadow 0.4s ease;
}

.login-card:hover {
   box-shadow:
      0 30px 70px rgba(0, 0, 0, 0.75),
      0 0 60px rgba(var(--acc-rgb), 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Shimmer accent bar top */
.login-card::before {
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0; height: 2px;
   background: linear-gradient(90deg,
      transparent 0%,
      var(--acc2) 20%,
      var(--acc) 50%,
      var(--acc2) 80%,
      transparent 100%
   );
   background-size: 200% 100%;
   animation: loginShimmerBar 3s linear infinite;
}

@keyframes loginShimmerBar {
   from { background-position: 200% 0; }
   to   { background-position: -200% 0; }
}

/* Bottom-right corner texture */
.login-card::after {
   content: '';
   position: absolute;
   bottom: 0; right: 0;
   width: 60px; height: 60px;
   background:
      linear-gradient(to top, var(--brd2) 1px, transparent 1px),
      linear-gradient(to left, var(--brd2) 1px, transparent 1px);
   background-size: 100% 100%;
   opacity: 0.5;
   pointer-events: none;
}

/* HUD corner decorations */
.corner-tl,
.corner-tr,
.corner-bl {
   position: absolute;
   width: 14px;
   height: 14px;
   pointer-events: none;
}

.corner-tl {
   top: 0; left: 0;
   border-top: 2px solid var(--acc);
   border-left: 2px solid var(--acc);
   opacity: 0.6;
}

.corner-tr {
   top: 0; right: 0;
   border-top: 2px solid var(--acc2);
   border-right: 2px solid var(--acc2);
   opacity: 0.5;
}

.corner-bl {
   bottom: 0; left: 0;
   border-bottom: 2px solid var(--acc2);
   border-left: 2px solid var(--acc2);
   opacity: 0.5;
}

/* Brand header */
.login-brand-header {
   text-align: center;
   margin-bottom: 32px;
   animation: loginFadeDown 0.5s 0.2s ease both;
}

@keyframes loginFadeDown {
   from { opacity: 0; transform: translateY(-10px); }
   to   { opacity: 1; transform: translateY(0); }
}

.login-subtitle {
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--dim);
   letter-spacing: 3px;
   text-transform: uppercase;
   margin-top: 10px;
   display: inline-block;
}

/* Terminal cursor blink */
.login-subtitle::after {
   content: '\25AE';
   color: var(--acc);
   margin-left: 4px;
   animation: loginCursorBlink 1.1s step-end infinite;
}

@keyframes loginCursorBlink {
   0%, 100% { opacity: 1; }
   50%       { opacity: 0; }
}

/* Divider */
.login-divider {
   display: flex;
   align-items: center;
   text-align: center;
   margin: 22px 0;
   color: var(--dimmer);
   font-family: var(--font-mono);
   font-size: 9px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 2px;
}

.login-divider::before,
.login-divider::after {
   content: '';
   flex: 1;
   border-bottom: 1px solid var(--brd2);
}

.login-divider:not(:empty)::before { margin-right: 14px; }
.login-divider:not(:empty)::after  { margin-left: 14px; }

/* Google button */
.btn-google {
   width: 100%;
   background: #fff;
   color: #111;
   font-family: var(--font-base);
   font-weight: 700;
   font-size: 14px;
   letter-spacing: 0.5px;
   border: none;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 11px 20px;
   cursor: pointer;
   transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
   position: relative;
   overflow: hidden;
}

.btn-google::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.06) 100%);
   pointer-events: none;
}

.btn-google:hover {
   background: #f0f0f0;
   transform: translateY(-1px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 30px rgba(255, 255, 255, 0.12);
}

.btn-google:active {
   transform: translateY(0);
}

/* Form fields with staggered entrance */
.login-field {
   margin-bottom: 18px;
   animation: loginFadeUp 0.4s ease both;
}

.login-field:nth-child(1) { animation-delay: 0.30s; }
.login-field:nth-child(2) { animation-delay: 0.38s; }

@keyframes loginFadeUp {
   from { opacity: 0; transform: translateY(8px); }
   to   { opacity: 1; transform: translateY(0); }
}

.login-field .form-label {
   display: block;
   margin-bottom: 6px;
}

/* Input wrapper with focus accent */
.input-wrap {
   position: relative;
}

.input-wrap::before {
   content: '';
   position: absolute;
   left: 0;
   top: 4px;
   bottom: 4px;
   width: 2px;
   background: var(--acc);
   border-radius: 2px;
   opacity: 0;
   transition: opacity 0.2s ease;
   z-index: 1;
}

.input-wrap:focus-within::before {
   opacity: 1;
}

.input-wrap .form-control {
   padding-left: 14px;
}

/* Submit button */
.btn-login {
   width: 100%;
   padding: 12px;
   font-size: 15px;
   letter-spacing: 2px;
   position: relative;
   overflow: hidden;
   animation: loginFadeUp 0.4s 0.46s ease both;
}

.btn-login::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0;
   height: 0;
   background: rgba(255, 255, 255, 0.15);
   border-radius: 50%;
   transform: translate(-50%, -50%);
   transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
   opacity: 0;
}

.btn-login:active::after {
   width: 300px;
   height: 300px;
   opacity: 0;
}

/* Security note */
.security-note {
   margin-top: 22px;
   padding: 12px 14px;
   background: rgba(var(--acc3-rgb), 0.03);
   border: 1px solid rgba(var(--acc3-rgb), 0.15);
   border-radius: 4px;
   display: flex;
   gap: 10px;
   align-items: flex-start;
   animation: loginFadeUp 0.4s 0.54s ease both;
}

.security-icon {
   font-size: 14px;
   flex-shrink: 0;
   margin-top: 1px;
}

.security-text {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dimmer);
   line-height: 1.6;
   letter-spacing: 0.3px;
}

.security-text strong {
   color: var(--dim);
   letter-spacing: 1px;
}

/* Footer stamp */
.login-footer {
   text-align: center;
   margin-top: 24px;
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dimmer);
   letter-spacing: 2px;
   text-transform: uppercase;
   opacity: 0;
   animation: loginFadeIn 0.5s 0.8s ease forwards;
}

@keyframes loginFadeIn {
   to { opacity: 1; }
}

/* Login responsive */
@media (max-width: 480px) {
   .login-card {
      padding: 28px 24px;
   }
}

/* ══════════════════════════════════
   11. LIVE TIMING PAGE (index.html)
══════════════════════════════════ */

body.timing-page {
   display: flex;
   flex-direction: column;
   height: 100vh;
   overflow: hidden;
}

/* ── Topbar ── */
.topbar {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 0 20px;
   height: 48px;
   flex-shrink: 0;
   background: var(--s1);
   border-bottom: 1px solid var(--brd);
}

.topbar-circuit {
   font-family: var(--font-display);
   font-size: 20px;
   letter-spacing: 2px;
   color: var(--acc);
}

.topbar-session {
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: 2px;
   color: var(--dim);
   text-transform: uppercase;
}

.topbar-sep {
   width: 1px;
   height: 24px;
   background: var(--brd);
}

/* ── Weather Forecast Bar ── */
#wx-forecast-bar {
   display: flex;
   align-items: stretch;
   min-width: 0;
   height: 100%;
}
.wxbar {
   display: flex;
   align-items: stretch;
   overflow-x: auto;
   scrollbar-width: none;
   padding: 0 8px;
}
.wxbar::-webkit-scrollbar { display: none; }
.wxbar-slot {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1px;
   padding: 2px 6px;
   min-width: 40px;
   border-right: 1px solid var(--brd);
   cursor: default;
   transition: background .15s;
}
.wxbar-slot:last-child { border-right: none; }
.wxbar-slot:hover { background: var(--s2); }
.wxbar-now {
   background: rgba(245, 197, 24, 0.18);
   border-bottom: 2px solid #f5c518;
}
.wxbar-now .wxbar-temp {
   color: #f5c518;
}
.wxbar-time {
   font-family: var(--font-mono);
   font-size: 8px;
   color: var(--dimmer);
   letter-spacing: .5px;
}
.wxbar-now .wxbar-time { color: var(--accent); }
.wxbar-icon svg {
   width: 20px;
   height: 20px;
   display: block;
}
.wxbar-temp {
   font-family: var(--font-mono);
   font-size: 9px;
   font-weight: 700;
   color: var(--text);
}
.wxbar-rain {
   font-family: var(--font-mono);
   font-size: 7px;
   color: #5bb8ff;
}
/* Slots de 15 min (hora actual): fondo ligeramente diferenciado */
.wxbar-q {
   background: var(--s2);
   min-width: 44px;
}
.wxbar-q .wxbar-time {
   color: var(--text);
   font-size: 8px;
}
/* Separador visual: primer slot horario tiene borde izquierdo más grueso */
.wxbar-hourly:first-of-type {
   border-left: 2px solid var(--accent);
}

/* ── Weather Widget ── */
.weather-widget {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-family: var(--font-mono);
   font-size: 10px;
   letter-spacing: .5px;
   color: var(--text);
}
.wx-sep {
   color: var(--dimmer);
}
.wx-temp {
   color: var(--accent);
   font-weight: 700;
}
.wx-rain {
   color: #5bb8ff;
}
.wx-desc {
   color: var(--dimmer);
   text-transform: uppercase;
   font-size: 9px;
   letter-spacing: 1px;
}

/* ── Connection Badge ── */
.conn-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-family: var(--font-mono);
   font-size: 9px;
   letter-spacing: 1px;
   text-transform: uppercase;
   padding: 3px 10px;
   border-radius: 3px;
   border: 1px solid var(--brd);
   background: var(--s2);
}

.conn-badge::before {
   content: '';
   display: block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
}

.conn-connected {
   border-color: rgba(var(--acc4-rgb), .4);
   color: var(--green);
}

.conn-connected::before {
   background: var(--green);
   box-shadow: 0 0 5px var(--green);
}

.conn-disconnected {
   border-color: rgba(var(--acc3-rgb), .4);
   color: var(--plus);
}

.conn-disconnected::before {
   background: var(--plus);
}

.conn-connecting {
   border-color: rgba(var(--acc-y-rgb), .4);
   color: var(--acc-y);
}

.conn-connecting::before {
   background: var(--acc-y);
   animation: connPulse 1s infinite;
}

@keyframes connPulse {
   0%, 100% { opacity: 1; }
   50%       { opacity: .3; }
}

/* ── Session Selector (custom dropdown) ── */
.sess-dd {
   position: relative;
}

.sess-dd-trigger {
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--s3);
   border: 1px solid var(--brd2);
   border-radius: 3px;
   padding: 3px 8px;
   cursor: pointer;
   min-width: 180px;
   transition: border-color .15s;
}

.sess-dd-trigger:hover,
.sess-dd-trigger.open {
   border-color: var(--acc);
}

.sess-dd-name {
   font-family: var(--font-base);
   font-size: 13px;
   font-weight: 700;
   color: var(--fg);
   line-height: 1;
}

.sess-dd-sub {
   font-family: var(--font-mono);
   font-size: 8px;
   color: var(--dim);
   margin-top: 3px;
   line-height: 1;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.sess-dd-arrow {
   color: var(--dim);
   font-size: 10px;
   margin-left: auto;
   flex-shrink: 0;
}

.sess-dd-list {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
   z-index: 200;
   min-width: 100%;
   background: var(--s1);
   border: 1px solid var(--brd2);
   border-radius: 3px;
   box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
   overflow: hidden;
}

.sess-opt {
   padding: 6px 10px;
   cursor: pointer;
   border-bottom: 1px solid var(--brd);
}

.sess-opt:last-child {
   border-bottom: none;
}

.sess-opt:hover {
   background: var(--s2);
}

.sess-opt.sel-active {
   background: rgba(var(--acc-y-rgb), .07);
}

.sess-opt-name {
   font-family: var(--font-base);
   font-size: 13px;
   font-weight: 700;
   color: var(--fg);
   line-height: 1;
   display: flex;
   align-items: center;
   gap: 6px;
}

.sess-opt-sub {
   font-family: var(--font-mono);
   font-size: 8px;
   color: var(--dim);
   margin-top: 3px;
   line-height: 1;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.sess-live {
   font-size: 8px;
   color: var(--green);
   font-family: var(--font-mono);
}

/* ── Race Bar ── */
.race-bar {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 3px 10px;
   flex-shrink: 0;
   background: var(--bg);
   border-bottom: 1px solid var(--brd);
}

.race-timer {
   font-family: var(--font-display);
   font-size: 28px;
   line-height: 1;
   letter-spacing: 2px;
   color: var(--fg);
   min-width: 180px;
}

.race-timer.countdown { color: var(--acc); }
.race-timer.finished  { color: var(--dim); }

.race-lights {
   display: flex;
   gap: 6px;
   align-items: center;
}

.light {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: var(--dimmer);
   border: 1px solid var(--brd2);
   transition: background .2s, box-shadow .2s;
}

.light.on-green  { background: var(--green); box-shadow: 0 0 10px var(--green); }
.light.on-red    { background: var(--plus);  box-shadow: 0 0 10px var(--plus); }
.light.on-amber  { background: var(--acc-y); box-shadow: 0 0 10px var(--acc-y); }

.light.on-finish {
   background-color: #fff;
   background-image:
      linear-gradient(45deg, #000 25%, transparent 25%),
      linear-gradient(-45deg, #000 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #000 75%),
      linear-gradient(-45deg, transparent 75%, #000 75%);
   background-size: 7px 7px;
   background-position: 0 0, 0 3.5px, 3.5px -3.5px, -3.5px 0;
   border-color: #555;
   box-shadow: none;
}

.race-meta {
   display: flex;
   gap: 16px;
   align-items: center;
   margin-left: auto;
}

.race-kpi {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

.race-kpi-v {
   font-family: var(--font-display);
   font-size: 22px;
   color: var(--text);
   line-height: 1;
}

.race-kpi-l {
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dim);
   letter-spacing: 1px;
   text-transform: uppercase;
}

.best-lap-bar {
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--dim);
   padding: 3px 10px;
   border-left: 2px solid var(--green);
   background: rgba(var(--acc4-rgb), .04);
   display: flex;
   flex-direction: column;
   gap: 1px;
   line-height: 1.4;
}

.best-lap-bar span {
   color: var(--green);
   font-weight: 700;
   font-size: 13px;
}

/* ── Content Area ── */
.content-area {
   flex: 1;
   display: flex;
   overflow: hidden;
}

/* ── Timing Table ── */
.timing-wrap {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

.timing-wrap .tscroll {
   flex: 1;
   overflow-y: auto;
   overflow-x: auto;
}

.timing-wrap table {
   width: 100%;
   border-collapse: collapse;
   min-width: 700px;
}

.timing-wrap thead th {
   padding: 7px 10px;
   text-align: left;
   font-family: var(--font-mono);
   font-size: 9px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--dim);
   border-bottom: 1px solid var(--brd);
   background: rgba(0, 0, 0, .5);
   position: sticky;
   top: 0;
   z-index: 3;
   white-space: nowrap;
}

.timing-wrap thead th.th-r { text-align: right; }
.timing-wrap thead th.th-c { text-align: center; }

.timing-wrap tbody td {
   padding: 1px 8px;
   border-bottom: 1px solid rgba(var(--brd-rgb), .5);
   vertical-align: middle;
   white-space: nowrap;
}

.timing-wrap tr:last-child td { border-bottom: none; }
.timing-wrap tr:hover td      { background: rgba(255, 255, 255, .012); }

/* Position row highlights */
.timing-wrap tr.pos-1 td { background: rgba(var(--acc-y-rgb), .04); }
.timing-wrap tr.pos-2 td { background: rgba(var(--silver-rgb), .02); }
.timing-wrap tr.pos-3 td { background: rgba(var(--bronze-rgb), .02); }

/* New-lap flash animation */
.timing-wrap tr.new-lap td { animation: timingFlashLap .6s ease; }

@keyframes timingFlashLap {
   0%   { background: rgba(var(--acc4-rgb), .18); }
   100% { background: transparent; }
}

/* ── Timing Cell Types ── */
.td-pos   { width: 42px; }
.td-kart  { width: 54px; }
.td-name  { min-width: 160px; max-width: 260px; }
.td-time  { width: 90px; text-align: right; }
.td-gap   { width: 90px; text-align: right; }
.td-int   { width: 80px; text-align: right; }
.td-laps  { width: 60px; text-align: center; }
.td-pit-t { width: 72px; text-align: right; }
.td-pits  { width: 44px; text-align: center; }
.td-driver { min-width: 120px; }

.kart-num {
   font-family: var(--font-display);
   font-size: 15px;
   color: var(--acc-y);
   line-height: 1;
}

.team-name {
   font-family: var(--font-base);
   font-size: 12px;
   font-weight: 700;
   color: var(--fg);
   line-height: 1;
}

.driver-name {
   font-family: var(--font-mono);
   font-size: 8px;
   color: var(--dim);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-top: 2px;
   line-height: 1;
}

.t-lap {
   font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 700;
   color: var(--text);
}

.t-lap.personal-best { color: var(--open); }
.t-lap.session-best  { color: var(--green); }
.t-lap.relay         { color: var(--dimmer); }

.t-gap {
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--dim);
}

.t-gap.lapped {
   color: var(--plus);
   font-size: 10px;
}

.pit-time {
   font-family: var(--font-mono);
   font-size: 11px;
   color: var(--dim);
}

.pit-time.in-pit {
   color: var(--acc-y);
   font-weight: 700;
}

.pit-count {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 18px;
   height: 18px;
   border-radius: 2px;
   font-family: var(--font-display);
   font-size: 11px;
   background: var(--s2);
   border: 1px solid var(--brd);
   color: var(--dim);
}

/* ── Kart Status Dot (from Apex data field "sta") ── */
.kart-status {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
}

.ks-sr { background: #00e64d; }   /* en pista, rodando normal */
.ks-si { background: #ff8c00; }   /* in-lap (última vuelta antes de pit) */
.ks-so { background: #1a6fd4; }   /* out-lap (primera vuelta al salir) */
.ks-sd { background: var(--acc);  }   /* entrando al pit lane */
.ks-su { background: var(--dimmer); } /* parado en boxes */
.ks-uk { background: var(--dimmer); } /* desconocido / sin datos */

.sb-team   { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--dim); letter-spacing: 2px; margin-bottom: 5px; }
.sb-kart   { font-size: 11px; color: var(--dim); margin-bottom: 12px; }
.sb-driver { font-family: var(--font-base); font-size: 11px; font-weight: 700; color: var(--acc); margin-bottom: 16px; text-transform: uppercase; line-height: 1.1; }

.sb-stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   margin-bottom: 20px;
}

.sb-stat {
   background: var(--s2);
   border-radius: 4px;
   padding: 8px 10px;
}

.sb-stat-val { font-size: 18px; font-weight: 700; color: var(--fg); }
.sb-stat-lbl { font-size: 9px; color: var(--dim); letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }

.sb-stints-title {
   font-size: 9px;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--dim);
   border-bottom: 1px solid var(--brd);
   padding-bottom: 6px;
   margin-bottom: 10px;
}

.sb-stint {
   display: grid;
   grid-template-columns: 28px 1fr auto auto;
   align-items: center;
   gap: 8px;
   padding: 8px 0;
   border-bottom: 1px solid var(--brd);
}

.sb-stint:last-child { border-bottom: none; }

.sb-stint-num {
   font-size: 10px;
   font-weight: 700;
   color: var(--dimmer);
   background: var(--s2);
   border-radius: 3px;
   text-align: center;
   padding: 3px 0;
}

.sb-stint-num.current { background: var(--green); color: #000; }

.sb-stint-driver { font-size: 11px; color: var(--fg); }
.sb-stint-laps   { font-size: 11px; color: var(--dim); text-align: right; white-space: nowrap; }
.sb-stint-dur    { font-size: 11px; color: var(--acc-y); text-align: right; white-space: nowrap; }

.sb-pilot-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 6px 0;
   border-bottom: 1px solid var(--brd);
}

.sb-pilot-row:last-child { border-bottom: none; }
.sb-pilot-name { font-size: 11px; color: var(--fg); }
.sb-pilot-stat { font-size: 11px; color: var(--acc-y); white-space: nowrap; }

/* ── Footer Bar ── */
.footer-bar {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 4px 20px;
   flex-shrink: 0;
   background: var(--s1);
   border-top: 1px solid var(--brd);
   font-family: var(--font-mono);
   font-size: 9px;
   color: var(--dimmer);
   letter-spacing: 1px;
}

.footer-bar .sep    { opacity: .4; }
.footer-bar .accent { color: var(--dim); }

/* ── Toast Messages ── */
.msg-area {
   position: fixed;
   bottom: 36px;
   right: 20px;
   display: flex;
   flex-direction: column;
   gap: 6px;
   z-index: 50;
   pointer-events: none;
}

.msg-item {
   background: var(--s1);
   border: 1px solid var(--brd);
   border-left: 3px solid var(--acc);
   padding: 8px 14px;
   border-radius: 4px;
   font-family: var(--font-mono);
   font-size: 10px;
   color: var(--text);
   max-width: 340px;
   animation: timingSlideIn .3s ease;
   pointer-events: none;
}

.msg-item.msg-penalty { border-left-color: var(--plus); color: var(--plus); }

@keyframes timingSlideIn {
   from { opacity: 0; transform: translateX(20px); }
   to   { opacity: 1; transform: translateX(0); }
}

/* ── Overlays (loading / reconnect) ── */
.overlay {
   position: fixed;
   inset: 0;
   z-index: 200;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 14px;
   background: rgba(var(--bg-rgb), .93);
   font-family: var(--font-mono);
}

.overlay-icon {
   font-family: var(--font-display);
   font-size: 52px;
   letter-spacing: 8px;
   color: var(--brd2);
}

.overlay-title {
   font-size: 13px;
   letter-spacing: 4px;
   text-transform: uppercase;
   color: var(--text);
}

.overlay-sub {
   font-size: 10px;
   letter-spacing: 2px;
   color: var(--dim);
   text-align: center;
   max-width: 360px;
}

.overlay-spinner {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 3px solid var(--brd);
   border-top-color: var(--acc);
   animation: timingSpin .9s linear infinite;
}

@keyframes timingSpin {
   to { transform: rotate(360deg); }
}

/* ── No Data State ── */
.no-data {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   flex: 1;
   gap: 12px;
   color: var(--dimmer);
   font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: 2px;
}

.no-data-icon {
   font-family: var(--font-display);
   font-size: 48px;
   color: var(--brd2);
   letter-spacing: 4px;
}

/* ══════════════════════════════════
   12. UNIQUE ADDITIONS (from SGK Supercup report)
   (Duplicates from sections 1-11 removed)
══════════════════════════════════ */

/* Sortable table headers */
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--text); }

/* Radar legend */
.radar-legend {
   margin-top: 10px;
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   justify-content: center;
   font-size: 11px;
   font-family: var(--font-mono);
   color: var(--dim);
}

.radar-legend-dot {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   margin-right: 4px;
   vertical-align: middle;
}

/* ══════════════════════════════════
   13. DETAIL PANEL / INSPECTION SIDEBAR (3-COLUMN FLOW)
   ══════════════════════════════════ */

.app-wrapper > .app-main > section,
.app-wrapper > .app-main > .hero,
.app-wrapper > .app-main > .kit-section {
    display: block;
    width: 100%;
    clear: both;
    position: relative;
}

.app-wrapper > .app-main > .kit-section > .kit-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

#detail-panel {
    width: 340px;
    flex-shrink: 0;
    background: var(--s1);
    border-left: 1px solid var(--brd);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#detail-panel-inner {
    width: 100%;
    padding: 24px 20px;
    height: 100%;
    overflow-y: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--brd) transparent;
}

.sidebar-close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--brd);
    width: 32px;
    height: 32px;
    border-radius: 4px;
    color: var(--dim);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    z-index: 10;
}

.sidebar-close:hover {
    background: rgba(var(--acc-rgb), 0.1);
    border-color: var(--acc);
    color: var(--acc);
}

/* ══════════════════════════════════
   14. ACCESSIBILITY & PERFORMANCE
   ══════════════════════════════════ */

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }

   .login-glow-1,
   .login-glow-2,
   .login-card::before,
   .login-subtitle::after {
      animation: none !important;
   }

   .login-card {
      animation: none !important;
   }
}

/* Touch action for interactive elements (removes 300ms tap delay) */
.ntab,
.kart-card,
.sess-dd-trigger,
.sess-opt,
.fbtn,
.spark-bar,
.hmap-table td,
.btn,
.btn-google,
.btn-login,
.sidebar-close,
.row-check {
   touch-action: manipulation;
}

/* Focus-visible states for keyboard accessibility */
.ntab:focus-visible {
   outline: 2px solid var(--acc);
   outline-offset: -2px;
}

.kart-card:focus-visible {
   outline: 2px solid var(--acc-y);
   outline-offset: 2px;
}

.sess-dd-trigger:focus-visible {
   outline: 2px solid var(--acc);
   outline-offset: 2px;
}

.sess-opt:focus-visible {
   outline: 2px solid var(--acc);
   outline-offset: -2px;
}

.spark-bar:focus-visible {
   outline: 2px solid var(--acc-y);
   outline-offset: 1px;
}

/* Screen-reader friendly toggle (replace display:none) */
.toggle-input {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* ══════════════════════════════════
   15. RESPONSIVE REFINEMENTS
   ══════════════════════════════════ */

/* Detail panel on small screens */
@media (max-width: 480px) {
   #detail-panel {
      display: none;
   }

   .race-timer {
      font-size: 28px;
      min-width: 120px;
   }

   .race-bar {
      gap: 12px;
      padding: 8px 12px;
      overflow-x: auto;
   }

   .race-kpi-v {
      font-size: 18px;
   }

   .sess-dd-trigger {
      min-width: 140px;
   }

   .topbar {
      gap: 10px;
      padding: 0 12px;
      overflow-x: auto;
   }
}

/* Landscape phone handling */
@media (max-height: 500px) and (orientation: landscape) {
   .topbar {
      height: 40px;
   }

   .race-bar {
      padding: 4px 16px;
   }

   .race-timer {
      font-size: 28px;
   }

   .race-kpi {
      display: none;
   }

   .footer-bar {
      display: none;
   }
}