/* ============================================================
   POLE — capa de tema (override). Se carga DESPUÉS de chapa.css.
   Remapea el theme oscuro+naranja al sistema Pole: gris asfalto claro + lima,
   grafito de marca, Archivo + JetBrains Mono. Combo A aprobado (13-jul).
   Regla: el lima brillante (#84D80C) va como fondo/borde; NUNCA como texto
   sobre claro -> el texto-acento usa Grip Green (#4E6B00).
   ============================================================ */

/* ---------- Fuentes self-host (Archivo display+cuerpo, JetBrains Mono datos) ---------- */
@font-face{font-family:"Archivo";font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/archivo-400.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:700;font-style:normal;font-display:swap;src:url(/static/fonts/archivo-700.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:800;font-style:normal;font-display:swap;src:url(/static/fonts/archivo-800.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/static/fonts/jetbrains-mono-500.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-style:normal;font-display:swap;src:url(/static/fonts/jetbrains-mono-700.woff2) format("woff2")}

/* ---------- Base clara ---------- */
html,body{background-color:#E8E9E5;color:#181A1D;}
body{
  background-image:radial-gradient(circle at 1px 1px, rgba(24,26,29,.05) 1px, transparent 0) !important;
  background-size:22px 22px !important;
  font-family:"Archivo",system-ui,sans-serif;
}
::selection{background:#84D80C;color:#181A1D}

/* ---------- Tipografía (Anybody/Hanken -> Archivo; mono se mantiene) ---------- */
.font-display-lg,.font-title-md{font-family:"Archivo",system-ui,sans-serif}
.font-body-md{font-family:"Archivo",system-ui,sans-serif}
.font-stats-numeric{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---------- Fondos ---------- */
.bg-background{background-color:#E8E9E5}
.bg-surface{background-color:#FCFCFA}
.bg-surface-2{background-color:#F2F3EF}
.bg-surface-container-lowest{background-color:#FCFCFA}
.bg-surface-container-low{background-color:#F1F2EE}
.bg-surface-container{background-color:#EAEBE6}
.bg-surface-container-high{background-color:#E5E6E1}
.bg-surface-container-highest{background-color:#DEDFDB}
.bg-primary-container{background-color:#84D80C}
.bg-primary-hot{background-color:#6FB80A}
.bg-primary{background-color:#84D80C}
.bg-secondary-container{background-color:#E5E6E1}
.bg-tertiary-container{background-color:#E5E6E1}
.bg-success{background-color:#84D80C}
.bg-error{background-color:#E23A2E}
.bg-outline-variant{background-color:#DBDDD6}

/* ---------- Texto ---------- */
.text-on-background{color:#181A1D}
.text-on-surface{color:#181A1D}
.text-on-surface-variant{color:#666D66}
.text-primary-container{color:#4E6B00}   /* acento-texto = Grip Green (accesible) */
.text-primary{color:#4E6B00}
.text-on-primary{color:#181A1D}
.text-on-primary-container{color:#181A1D}
.text-secondary-container{color:#3A403C}
.text-secondary{color:#3A403C}
.text-tertiary-container{color:#3A403C}
.text-success{color:#4E6B00}
.text-error{color:#E23A2E}
.text-on-error{color:#FFFFFF}
.text-white{color:#181A1D}   /* tema claro: "blanco" = grafito */

/* ---------- Bordes ---------- */
.border-primary-container{border-color:#84D80C}
.border-outline{border-color:#CACDC5}
.border-outline-variant{border-color:#DBDDD6}
.border-tertiary-container{border-color:#CACDC5}
.border-secondary-container{border-color:#CACDC5}
.border-error{border-color:#E23A2E}

/* ---------- Clases del theme "taller" (glass-card/glows/texturas) -> Pole claro ---------- */
.glass-card{background:#FCFCFA !important;border:1px solid #CACDC5 !important;
  box-shadow:0 1px 2px rgba(24,26,29,.04) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.tech-border-soft{border:1px solid #CACDC5}
.metallic-glow,.electric-blue-glow,.racing-orange-glow{box-shadow:0 2px 10px rgba(24,26,29,.06) !important}
.stats-grid{background-image:linear-gradient(#D3D6CF 1px,transparent 1px),linear-gradient(90deg,#D3D6CF 1px,transparent 1px) !important}
.diagonal-noise{background-image:repeating-linear-gradient(45deg,rgba(24,26,29,.03) 0,rgba(24,26,29,.03) 1px,transparent 1px,transparent 10px) !important}

/* ---------- Botón primario: lima con texto grafito (contraste correcto) ---------- */
.bg-primary-container.text-on-primary,.bg-primary-container.text-on-primary-container{color:#181A1D}

/* ---------- Radio bajo (mecánico, no pill) para tarjetas grandes ---------- */
.rounded-2xl,.rounded-3xl{border-radius:8px}
.rounded-xl{border-radius:6px}

/* ---------- FIX nav: clara + SIN blur (no combinaba + era el LAG) ---------- */
header.sticky{
  background-color:rgba(233,234,229,.94) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:0 1px 0 rgba(24,26,29,.06) !important;
  border-bottom:1px solid #CACDC5 !important;
}
.bg-background\/85{background-color:rgba(233,234,229,.94)}
/* logo de la nav en grafito (como el boceto) */
header .font-display-lg{color:#181A1D !important}

/* ---------- FIX LAG: matar TODO backdrop-filter (el diseño claro no lo necesita) ---------- */
.backdrop-blur-xl,.backdrop-blur-md,.backdrop-blur-sm{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}

/* ---------- clases color con opacidad /NN (bordes/fondos lima o gris) ---------- */
.border-primary-container\/30{border-color:rgba(132,216,12,.4)}
.border-primary-container\/40{border-color:rgba(132,216,12,.5)}
.border-primary-container\/50{border-color:rgba(132,216,12,.6)}
.border-primary-container\/60{border-color:rgba(132,216,12,.7)}
.border-outline-variant\/20{border-color:rgba(203,205,197,.5)}
.border-outline-variant\/30{border-color:rgba(203,205,197,.6)}
.border-outline-variant\/40{border-color:rgba(203,205,197,.7)}
.border-tertiary-container\/40{border-color:rgba(202,205,197,.6)}
.border-secondary-container\/40{border-color:rgba(202,205,197,.6)}
.bg-surface-container-high\/40{background-color:rgba(229,230,225,.55)}
.bg-primary-container\/10{background-color:rgba(132,216,12,.12)}
.bg-primary-container\/15{background-color:rgba(132,216,12,.16)}
.bg-primary-container\/20{background-color:rgba(132,216,12,.2)}
.text-on-surface-variant\/60{color:rgba(102,109,102,.75)}

/* ---------- TEXTO SOBRE IMAGEN de pista (cards): blanco + acento lima brillante + sombra ----------
   El card se diseñó para tema oscuro (texto claro); en claro hay que forzar blanco SOLO acá,
   sobre el scrim, sin tocar el texto del resto de la página. */
.pole-hero, .pole-hero h1,
.pole-hero .text-on-surface-variant, .pole-hero .text-tertiary-container, .pole-hero .text-white{
  color:#FFFFFF !important;
}
.pole-hero .text-primary-container{color:#84D80C !important}   /* sobre scrim oscuro el lima SÍ contrasta */
.pole-hero h1,.pole-hero p,.pole-hero span{text-shadow:0 1px 4px rgba(0,0,0,.6)}
.pole-img-title{color:#FFFFFF !important;text-shadow:0 2px 6px rgba(0,0,0,.65)}

/* ---------- CHIPS oscuros sobre imagen (tipo de evento / estado / contacto): texto BRILLANTE ----------
   Los chips tienen bg-black/60; los tokens de color ahora son oscuros -> oscuro/oscuro. Sobre el chip
   oscuro se fuerzan a colores vivos, y de paso cada tipo queda distinto: Carrera=lima, Contrarreloj=blanco,
   Checkpoint=magenta claro. */
.bg-black\/60.text-primary-container,.bg-black\/60 .text-primary-container{color:#8FE01A !important}
.bg-black\/60.text-secondary-container,.bg-black\/60 .text-secondary-container{color:#EDEEEA !important}
.bg-black\/60.text-tertiary-container,.bg-black\/60 .text-tertiary-container{color:#E0A8FF !important}
.bg-black\/60.text-on-surface-variant,.bg-black\/60 .text-on-surface-variant{color:#D8DAD4 !important}
.bg-black\/60.text-error,.bg-black\/60 .text-error{color:#FF6155 !important}

/* ---------- kerb / piano lima como detalle (utilidad opcional) ---------- */
.pole-kerb{height:8px;border-radius:2px;background:repeating-linear-gradient(115deg,#84D80C 0 18px,#FCFCFA 18px 36px)}

/* ---------- logo de la nav/footer: altura controlada ACÁ (las clases h-[..] arbitrarias
   no existen en el Tailwind compilado, por eso el <img> quedaba sin límite = gigante) ---------- */
.pole-brand{height:42px;width:auto;display:block}
@media(min-width:768px){.pole-brand{height:47px}}

/* ---------- slogan bajo el logo: tamaño controlado ACÁ (text-[7px]/[8px] y tracking-[..]
   arbitrarios NO existen en el Tailwind compilado -> heredaba 16px) ---------- */
.pole-slogan{font-size:12px;line-height:1;letter-spacing:.18em}

/* ---------- botón "ver histórico completo" (landing → Históricos) ---------- */
.pole-histbtn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;border-radius:8px;
  border:1px solid #CACDC5;background:#FCFCFA;color:#666D66;cursor:pointer;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;transition:border-color .2s,color .2s,background-color .2s}
.pole-histbtn:hover{border-color:#84D80C;color:#4E6B00;background:#F1F2EE}
.pole-histbtn .material-symbols-outlined{font-size:16px}

/* ---------- filas del histórico (finalizados): ~15% más compactas ---------- */
.pole-histrow{padding-top:.6rem;padding-bottom:.6rem;font-size:13.5px}
.pole-histrow .material-symbols-outlined{font-size:15px}
.pole-histrow-sub{font-size:11px}
.pole-hist-empty{opacity:.62}   /* cierres recurrentes sin pilotos: atenuados */