/* ============================================================
   POLE — capa de tema (override). Se carga DESPUÉS de chapa.css.
   Dirección "TELEMETRÍA": HUD/broadcast oscuro. Asfalto casi-negro + lima
   como LUZ (acción, EN VIVO, P1, foco), datos en JetBrains Mono tabular.
   Tipos: Archivo (títulos/cuerpo) + JetBrains Mono (datos).
   Regla de oro: la lima (#84D80C) va como relleno/borde/estado y, sobre el
   fondo oscuro, TAMBIÉN como texto-acento (contraste alto). Nunca lima
   saturado DETRÁS de texto. El "OK/pago" usa teal (#22C3A6) para no
   confundirse con la lima de acción.
   ============================================================ */

/* ---------- 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 oscura (asfalto) ---------- */
html,body{background-color:#0E0F11;color:#F4F5F2;}
body{
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.028) 1px, transparent 0) !important;
  background-size:22px 22px !important;
  font-family:"Archivo",system-ui,sans-serif;
}
::selection{background:#84D80C;color:#0E0F11}
/* foco accesible + firma HUD: anillo lima */
:focus-visible{outline:2px solid #84D80C;outline-offset:2px}

/* ---------- Tipografía ---------- */
.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 (escalera de elevación oscura) ---------- */
.bg-background{background-color:#0E0F11}
.bg-surface{background-color:#1A1C1F}
.bg-surface-2{background-color:#16181B}
.bg-surface-container-lowest{background-color:#141619}
.bg-surface-container-low{background-color:#16181B}
.bg-surface-container{background-color:#1A1C1F}
.bg-surface-container-high{background-color:#202327}
.bg-surface-container-highest{background-color:#262A2E}
.bg-primary-container{background-color:#84D80C}
.bg-primary-hot{background-color:#A6FF1A}
.bg-primary{background-color:#84D80C}
.bg-secondary-container{background-color:#202327}
.bg-tertiary-container{background-color:#202327}
.bg-success{background-color:#84D80C}
.bg-error{background-color:#E5484D}
.bg-outline-variant{background-color:#2A2D31}

/* ---------- Texto ---------- */
.text-on-background{color:#F4F5F2}
.text-on-surface{color:#F4F5F2}
.text-on-surface-variant{color:#9BA0A3}
.text-primary-container{color:#84D80C}   /* en oscuro el lima SÍ es texto-acento legible (~11:1) */
.text-primary{color:#84D80C}
.text-on-primary{color:#0E0F11}          /* texto sobre relleno lima = tinta asfalto */
.text-on-primary-container{color:#0E0F11}
.text-secondary-container{color:#C7CCC9}
.text-secondary{color:#C7CCC9}
.text-tertiary-container{color:#C7CCC9}
.text-success{color:#84D80C}
.text-error{color:#E5484D}
.text-on-error{color:#FFFFFF}
.text-white{color:#F4F5F2}   /* en oscuro "blanco" = texto claro real */

/* ---------- Bordes (hairline HUD) ---------- */
.border-primary-container{border-color:#84D80C}
.border-outline{border-color:#2A2D31}
.border-outline-variant{border-color:#2A2D31}
.border-tertiary-container{border-color:#2A2D31}
.border-secondary-container{border-color:#2A2D31}
.border-error{border-color:#E5484D}

/* ---------- Superficies del theme "taller" -> paneles HUD oscuros ---------- */
.glass-card{background:#1A1C1F !important;border:1px solid #2A2D31 !important;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.02), 0 14px 34px -20px rgba(0,0,0,.7) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.tech-border-soft{border:1px solid #2A2D31}
.metallic-glow,.electric-blue-glow,.racing-orange-glow{box-shadow:0 10px 28px -14px rgba(0,0,0,.7) !important}
.stats-grid{background-image:linear-gradient(#23262A 1px,transparent 1px),linear-gradient(90deg,#23262A 1px,transparent 1px) !important}
.diagonal-noise{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 1px,transparent 10px) !important}

/* ---------- Botón primario: lima con tinta asfalto (contraste correcto) ---------- */
.bg-primary-container.text-on-primary,.bg-primary-container.text-on-primary-container{color:#0E0F11}

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

/* ---------- Nav: asfalto translúcido, hairline, SIN blur (perf) ---------- */
header.sticky{
  background-color:rgba(14,15,17,.9) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) !important;
  border-bottom:1px solid #2A2D31 !important;
}
.bg-background\/85{background-color:rgba(14,15,17,.9)}
header .font-display-lg{color:#F4F5F2 !important}

/* ---------- FIX LAG: matar TODO backdrop-filter ---------- */
.backdrop-blur-xl,.backdrop-blur-md,.backdrop-blur-sm{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}

/* ---------- clases color con opacidad /NN ---------- */
.border-primary-container\/30{border-color:rgba(132,216,12,.45)}
.border-primary-container\/40{border-color:rgba(132,216,12,.55)}
.border-primary-container\/50{border-color:rgba(132,216,12,.65)}
.border-primary-container\/60{border-color:rgba(132,216,12,.75)}
.border-outline-variant\/20{border-color:rgba(42,45,49,.55)}
.border-outline-variant\/30{border-color:rgba(42,45,49,.7)}
.border-outline-variant\/40{border-color:rgba(42,45,49,.85)}
.border-tertiary-container\/40{border-color:rgba(42,45,49,.8)}
.border-secondary-container\/40{border-color:rgba(42,45,49,.8)}
.bg-surface-container-high\/40{background-color:rgba(32,35,39,.55)}
.bg-primary-container\/10{background-color:rgba(132,216,12,.1)}
.bg-primary-container\/15{background-color:rgba(132,216,12,.15)}
.bg-primary-container\/20{background-color:rgba(132,216,12,.22)}
.text-on-surface-variant\/60{color:rgba(155,160,163,.8)}

/* ---------- TEXTO SOBRE IMAGEN de pista (cards): ya es sobre scrim oscuro ---------- */
.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:#A6FF1A !important}   /* lima hi-vis sobre foto */
.pole-hero h1,.pole-hero p,.pole-hero span{text-shadow:0 1px 6px rgba(0,0,0,.7)}
.pole-img-title{color:#FFFFFF !important;text-shadow:0 2px 8px rgba(0,0,0,.75)}

/* ---------- CHIPS sobre imagen (tipo de evento / estado): texto vivo por tipo ---------- */
.bg-black\/60.text-primary-container,.bg-black\/60 .text-primary-container{color:#A6FF1A !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-asfalto (motivo Telemetría) ---------- */
.pole-kerb{height:8px;border-radius:2px;background:repeating-linear-gradient(115deg,#84D80C 0 18px,#1A1C1F 18px 36px)}

/* ---------- logo nav/footer ---------- */
.pole-brand{height:42px;width:auto;display:block}
@media(min-width:768px){.pole-brand{height:47px}}
.pole-slogan{font-size:12px;line-height:1;letter-spacing:.18em}

/* ---------- botón "ver histórico completo" ---------- */
.pole-histbtn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;border-radius:8px;
  border:1px solid #2A2D31;background:#1A1C1F;color:#9BA0A3;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:#84D80C;background:#202327}
.pole-histbtn .material-symbols-outlined{font-size:16px}

/* ---------- filas del histórico (finalizados): 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:.55}

/* ============================================================
   Utilidades de firma TELEMETRÍA (opt-in por página)
   ============================================================ */
/* punto EN VIVO pulsante en lima */
.pole-live-dot{width:8px;height:8px;border-radius:50%;background:#84D80C;
  box-shadow:0 0 10px rgba(132,216,12,.7);animation:pole-pulse 1.4s infinite}
@keyframes pole-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media(prefers-reduced-motion:reduce){.pole-live-dot{animation:none}}
/* borde parcial lima (truco F1): abajo+derecha */
.pole-edge{border-bottom:2px solid #84D80C;border-right:2px solid #84D80C}
/* OK/pago acreditado = teal, separado de la lima de acción */
.pole-ok{color:#22C3A6}
.pole-bg-ok{background:#22C3A6;color:#0E0F11}

/* form controls nativos SIN clase (ej. editor de livery: número/nombre/patrón/acabado) -> oscuros.
   Baja especificidad (selector de elemento) → los inputs con clase propia mantienen su estilo. */
input:not([type=color]):not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]):not([class*=bg-]),
select:not([class*=bg-]), textarea:not([class*=bg-]){
  background-color:#141619; color:#F4F5F2; border:1px solid #2A2D31; border-radius:6px;
}
select:not([class*=bg-]){padding:6px 8px}
input::placeholder,textarea::placeholder{color:#6B7178}

/* ============================================================
   Pisar leftovers del tema BASE (chapa.css era oscuro+NARANJA): cualquier
   clase que pole.css no remapee cae al naranja del base. Acá se corrigen las
   que las páginas realmente usan.
   ============================================================ */
/* chips de tipo de evento: el base dejaba el texto casi-negro sobre chip oscuro */
.text-on-secondary,.text-on-secondary-container{color:#EDEEEA}          /* Contrarreloj */
.text-on-tertiary,.text-on-tertiary-container{color:#E0A8FF}            /* Checkpoint (magenta claro, tipo distinto) */
/* íconos/acentos con opacidad (spec items, etc.) -> lima */
.text-primary-container\/80{color:rgba(132,216,12,.85)}
.text-primary-container\/50{color:rgba(132,216,12,.6)}
.bg-primary-container\/5{background-color:rgba(132,216,12,.06)}
/* anillo de foco/selección -> lima */
.ring-primary-container{--tw-ring-color:#84D80C}
/* hover de borde -> lima */
.hover\:border-primary-container\/40:hover{border-color:rgba(132,216,12,.55)}
.hover\:border-primary-container\/60:hover{border-color:rgba(132,216,12,.75)}
/* glow -> lima puntual (motivo Telemetría) */
.shadow-glow-md{box-shadow:0 0 18px rgba(132,216,12,.28) !important}
/* gradientes (barra animada de la página de carrera / velos) -> lima */
.via-primary-container{--tw-gradient-to:rgba(132,216,12,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#84D80C var(--tw-gradient-via-position),var(--tw-gradient-to)}
.from-primary-container\/20{--tw-gradient-from:rgba(132,216,12,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(132,216,12,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-primary-container\/30{--tw-gradient-from:rgba(132,216,12,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(132,216,12,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
/* fallback de pista sin imagen -> asfalto + lima (no naranja) */
.track-fallback{background:linear-gradient(135deg,rgba(132,216,12,.22),#0E0F11 52%,#1A1C1F) !important}
/* variantes focus/hover del base (naranja) que las páginas usan -> lima */
.focus\:border-primary-container:focus{border-color:#84D80C}
.focus\:ring-primary-container:focus{--tw-ring-color:#84D80C}
.hover\:border-primary-container:hover{border-color:#84D80C}
.hover\:bg-primary-container:hover{background-color:#84D80C}
.hover\:bg-primary-hot:hover{background-color:#A6FF1A}
.hover\:text-primary-container:hover,.hover\:text-primary:hover,.group:hover .group-hover\:text-primary-container{color:#A6FF1A}
.selection\:bg-primary-container::selection{background-color:#84D80C;color:#0E0F11}