/* =============================================================
   MetaSport360 -- ms360-global.css
   Hoja de estilos unificada para index3.php y sus includes.

   Este archivo reemplaza los bloques <style> que antes estaban
   sueltos y duplicados en:
     - head.php      (bloque <style> original del sitio)
     - preloader.php (estilos del preloader ms360x-*)
     - weekend.php   (estilos del panel "Fin de Semana en vivo")
     - index3.php    (bloque <style></style> vacío, eliminado)

   El orden de las secciones respeta el orden en que esas reglas
   se cargaban originalmente en el documento (head.php primero,
   preloader.php segundo, weekend.php al final vía site-header.php),
   para no alterar el cascade/la especificidad de nada existente.
============================================================= */

/* =============================================================
   SECCION 1 -- CSS global del sitio (antes en head.php)
============================================================= */
:root{
    --blue:#1264d8;
    --blue2:#0877ff;
    --red:#e31d2b;
    --yellow:#f2c400;
    --green:#159447;
    --cyan:#00a8e8;
    --orange:#ef6c00;
    --purple:#6f2dbd;
    --ink:#111317;
    --text:#16181c;
    --muted:#69717d;
    --line:#dfe3e8;
    --soft:#f4f6f8;
    --nav-link-bg:#fafbfc;
    --white:#fff;
    --container:1500px;
    --gap:6px;
    --radius:2px;
    --radius-badge:2px;
    --radius-card:8px;

    /* Escala de peso para badges/tags/chips pequeños (número de auto,
       categorías, puntos, gap, etc.) -- un escalón más liviano que el
       peso "de verdad" (900/800/700/600), para que no todo se vea tan
       en negrita. Se cambia acá, una sola vez, en vez de en cada regla. */
    --w-tag-black:800;
    --w-tag-bold:700;
    --w-tag-semibold:600;
    --w-tag-medium:500;

    /* Tokens para el panel de análisis (.ecx-msdata-root en el CSS de
       más abajo) que el resto del sitio no tenía todavía -- tiers de
       gris intermedios y dos acentos (magenta/ámbar) que no existen
       en la paleta de arriba. Todo lo demás que usa ese panel (fondo,
       texto, línea, azul, verde, rojo, violeta) reutiliza las mismas
       variables de siempre. */
    --ecx-bg-2:#eef1f5;
    --ecx-bg-3:#e7ebf0;
    --ecx-border-strong:#c5cbd4;
    --ecx-text-1:#262b33;
    --ecx-text-2:#4d5561;
    --ecx-magenta:#b3236d;
    --ecx-amber:#92660b;

    /* Tokens del encabezado de evento (.evento-hero-*, selects, botón
       de análisis, mensajes de carga) -- antes hardcodeados en el
       <style> propio de detalle_evento.php; se centralizan acá para
       que todo el CSS de esa página use variables como el resto del
       sitio. */
    --evt-label:#4d5561;
    --evt-label-soft:#6b7280;
    --evt-msg-muted:#8ea0c4;
    --evt-select-border:#b9b9be;
    --evt-select-text:#1a1a1a;
    --evt-btn-bg:#f4f4f6;
    --evt-btn-border:#9a9aa2;
    --evt-btn-hover-bg:#e7e7ea;
    --evt-accent:#0764de;
    --evt-error:#ff6b6b;
}

/* -- Badge de dorsal -- estilo ÚNICO y global para el número de auto
   en TODO el sitio. Se define acá y se aplica con el MISMO selector a
   todas las clases que ya existían sueltas por distintas páginas
   (arrastraban padding/radius/ancho ligeramente distintos entre sí) --
   evita reescribir el markup de cada página, alcanza con unificar acá
   el CSS.

   width:3ch (no min-width) -- ancho FIJO para 3 caracteres posibles
   (dorsales de 1, 2 o 3 dígitos), en unidades "ch" para que escale
   solo con el font-size propio de cada contexto (así el badge chico
   de una tabla compacta y el grande de una card de podio quedan cada
   uno con SU ancho fijo correcto, sin necesitar un valor en px
   distinto a mano para cada uno). border-radius:2px global -- antes
   la mayoría tenía 4px. */
.ms360-dorsal-badge,
.vp-dd-badge,
.vp-id-dorsal,
.vs-cw-pcard-nro,
.veq-roster-dorsal,
.vc-cal-win__dorsal,
.ms360-sh-dorsal{
    /* CSS Grid en vez de flexbox -- place-items:center centra el
       contenido según su tamaño natural (auto), con un algoritmo
       mucho más simple que el de flexbox (que calcula alineación
       según la línea de base/métricas de la fuente, variable entre
       fuentes). Grid simplemente centra la caja de contenido tal cual
       es, sin ese paso intermedio -- más predecible para texto corto
       de una sola línea como este badge.

       Ancho fijo 3ch (3 dígitos "999", nunca se autoajusta). Padding
       simétrico (mismo valor arriba/abajo, mismo valor izq/der) por
       las dudas, aunque con grid el centrado ya no depende de que sea
       simétrico como pasaba antes con line-height. */
    display:inline-grid;place-items:center;
    width:3ch;
    padding:4px 2px 2px; /* top 4px / bottom 2px -- asimétrico A PROPÓSITO. El glifo de Oxanium se sienta un poco arriba dentro de su propia caja de fuente (asunto de métricas internas de la fuente, no del CSS en sí) -- dándole más aire arriba se empuja visualmente el centrado hacia abajo para compensar. */
    background:#0d6efd;color:#fff;
    font-family:"Oxanium",sans-serif;font-weight:500;
    line-height:1;
    border-radius:3px;
    flex-shrink:0;
    text-align:center;
    box-sizing:content-box;
	min-width:65px;
}

/* -- Card oscura global -- fondo #0d1520 + bgportrait.png decorativo
   diagonal, mismo criterio en TODOS los fondos oscuros del sitio
   (antes cada componente tenía su propio color/gradiente ligeramente
   distinto -- #16305c, #0f1d38, etc. -- ya no). Sumar esta clase (o
   solo alinear el color+decoración a mano si el componente ya tiene
   su propio ::before, para no pisarlo) a cualquier card oscura nueva.
   Los hijos directos quedan arriba de la textura automáticamente
   (position:relative + z-index vía el "> *" de abajo). */
.ms360-dark-card{position:relative;background:#0d1520;overflow:hidden}
.ms360-dark-card::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    opacity:.12;pointer-events:none;
}
.ms360-dark-card > *{position:relative;z-index:1}

/* Animación de entrada al cambiar de tab (vsSwitchTab, VerSerie.php) --
   antes el panel nuevo aparecía de golpe (display:none -> display:''
   sin transición, corte tosco). Clase global porque vsSwitchTab la
   usan varios widgets distintos del mismo archivo (Campeonato,
   Avances, Participación), no tiene sentido repetirla por widget. */
.vs-tab-fade{animation:vsTabFadeIn .28s ease}
@keyframes vsTabFadeIn{
    from{opacity:0;transform:translateY(6px)}
    to{opacity:1;transform:translateY(0)}
}







/* =========================================================
   ARGENTINOS EN EL EXTERIOR - PILOTOS DEL MENU
   ========================================================= */

.nav-dropdown-pilotos {
    min-width: 230px;
    max-height: 420px;
    overflow-y: auto;
}

.nav-piloto-exterior {
    display: flex !important;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.nav-piloto-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: 0 0 24px;
    display: block;
}



/* ================================================================
   MODAL GLOBAL -- sistema ÚNICO para todo el sitio (título + cuerpo +
   footer con disclaimer y botón cerrar), usar SIEMPRE esto para
   cualquier modal nuevo, no reinventar uno por widget. Overlay negro
   50% + blur, mismo criterio que el overlay del preloader.
   Uso: ms360OpenModal('mi-modal-id') / ms360CloseModal('mi-modal-id').
   ================================================================ */
.ms360-modal-overlay{
    position:fixed;inset:0;z-index:9999;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    display:none;align-items:center;justify-content:center;
    padding:20px;
}
.ms360-modal-overlay.open{display:flex}
.ms360-modal{
    position:relative;
    background:#fff;
    border-radius:4px;
    width:min(760px,100%);
    max-height:85vh;
    display:flex;flex-direction:column;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,.4);
    animation:ms360ModalIn .25s ease;
}
@keyframes ms360ModalIn{
    from{opacity:0;transform:translateY(18px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

.ms360-modal-head{
    position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:10px 20px;
    background:#0d1520; /* mismo dark global del resto del sitio -- ver .ms360-dark-card */
    flex-shrink:0;
}
.ms360-modal-head::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    opacity:.14;pointer-events:none;
}
.ms360-modal-head-left{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-width:0}
.ms360-modal-cat-logo{flex-shrink:0;width:60px;height:60px;object-fit:contain;opacity:.5}
.ms360-modal-head-icon{
    flex-shrink:0;width:40px;height:40px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:var(--blue);color:#fff;font-size:19px;
}
.ms360-modal-titulos{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.ms360-modal-titulo{font-family:"Roboto Condensed",sans-serif;font-size:17px;font-weight:800;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms360-modal-subtitulo{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms360-modal-close-x{
    position:relative;z-index:1;
    flex-shrink:0;width:32px;height:32px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.08);border:none;color:rgba(255,255,255,.7);font-size:18px;cursor:pointer;line-height:1;
    transition:background-color .15s ease,color .15s ease;
}
.ms360-modal-close-x:hover{background:rgba(255,255,255,.18);color:#fff}

.ms360-modal-body{padding:18px 20px;overflow-y:auto;flex:1}

.ms360-modal-foot{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding:12px 20px;
    border-top:1px solid var(--line);
    background:var(--soft);
    flex-shrink:0;
}
.ms360-modal-disclaimer{font-size:10px;font-weight:500;color:var(--muted);line-height:1.4}
.ms360-modal-btn-cerrar{
    flex-shrink:0;
    background:var(--ink);color:#fff;
    font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
    padding:9px 18px;border-radius:7px;border:none;cursor:pointer;
    transition:background-color .15s ease;
}
.ms360-modal-btn-cerrar:hover{background:#000}

/* Tabla estándar dentro de .ms360-modal-body -- reusar esta misma
   clase (.ms360-modal-table) en cualquier modal nuevo que necesite
   listar filas, no armar una tabla nueva por widget. */
.ms360-modal-table{width:100%;border-collapse:collapse}
.ms360-modal-table thead th{
    text-align:left;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);
    padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap;
}
.ms360-modal-table tbody td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.ms360-modal-table tbody tr:last-child td{border-bottom:0}
.ms360-modal-table tbody tr:hover{background:var(--soft)}

.ms360-modal-piloto{display:flex;align-items:flex-start;gap:10px}
.ms360-modal-piloto img{width:44px;height:56px;object-fit:cover;object-position:top;border-radius:6px;background:var(--soft);flex-shrink:0}
.ms360-modal-piloto .info{display:flex;flex-direction:column;gap:3px;min-width:0}
.ms360-modal-piloto .fila-dorsal{display:flex;align-items:center;gap:6px}
.ms360-modal-piloto .fila-dorsal .ms360-dorsal-badge{font-size:11px}
.ms360-modal-piloto .fila-dorsal b{font-size:14.3px;font-weight:800;color:var(--ink);text-transform:uppercase;white-space:nowrap}
.ms360-modal-piloto .equipo{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.ms360-modal-piloto .vic{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--blue)}
.ms360-modal-piloto .vic i{font-size:9.9px}

.ms360-modal-carrera{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink);padding:2px 0}
.ms360-modal-carrera:first-child{padding-top:0}
.ms360-modal-carrera i{color:var(--blue);font-size:10px;flex-shrink:0}

.ms360-modal-auto{display:flex;align-items:center;gap:8px;white-space:nowrap}
.ms360-modal-auto .logo{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.ms360-modal-auto span{font-size:11.5px;font-weight:700;color:var(--ink);text-transform:uppercase}

/* -- Modal de "Avances en finales" -- */
.ms360-av-modal-top{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.ms360-av-modal-top .foto{width:80px;height:104px;object-fit:cover;object-position:top;border-radius:8px;background:var(--soft);flex-shrink:0}
.ms360-av-modal-top .datos{display:flex;flex-direction:column;gap:4px;min-width:0}
.ms360-av-modal-top .datos b{font-size:17px;font-weight:800;color:var(--ink);text-transform:uppercase}
.ms360-av-modal-top .datos .equipo{font-size:11.5px;font-weight:600;color:var(--muted)}
.ms360-av-modal-top .datos .lugar{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--blue);margin-top:2px}
.ms360-av-modal-top .datos .lugar i{font-size:10px}

/* Largó / +N / Llegó -- calcado del boceto original (3 cajas), ahora
   con datos REALES (start/finish confirmados contra el generador, ver
   comentario en el PHP) en vez del stat único de antes. */
.ms360-av-modal-posiciones{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ms360-av-modal-posiciones .box{
    flex:1;text-align:center;
    background:var(--soft);border:1px solid var(--line);border-radius:10px;
    padding:14px 10px;
}
.ms360-av-modal-posiciones .box.destacado{background:color-mix(in srgb, var(--blue) 8%, transparent);border-color:var(--blue)}
.ms360-av-modal-posiciones .box b{display:block;font-family:"Oxanium",sans-serif;font-size:30px;font-weight:500;color:var(--ink);line-height:1}
.ms360-av-modal-posiciones .box.destacado b{color:var(--blue)}
.ms360-av-modal-posiciones .box span{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.ms360-av-modal-posiciones .flecha{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;color:var(--green)}
.ms360-av-modal-posiciones .flecha i{font-size:18px}
.ms360-av-modal-posiciones .flecha b{font-family:"Oxanium",sans-serif;font-size:13px;font-weight:500}

/* -- Vuelta a vuelta (carga client-side, ver ms360LoadVueltaAVuelta en
   el <script> global) -- */
.ms360-av-modal-vueltas{margin-top:16px}
.ms360-av-vueltas-loading,.ms360-av-vueltas-vacio{
    display:flex;align-items:center;gap:7px;
    font-size:11.5px;font-weight:600;color:var(--muted);
    padding:12px;background:var(--soft);border-radius:8px;
}
.ms360-av-vueltas-label{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:8px}
.ms360-av-vueltas-label i{color:var(--blue)}
/* Línea de tiempo -- nodos (círculo con posición + etiqueta abajo)
   conectados por una línea horizontal. Solo se imprimen los nodos
   donde HUBO cambio de posición (ver JS, ms360LoadVueltaAVuelta) --
   evita repetir la misma vuelta 10 veces cuando el piloto se mantuvo
   quieto en el mismo puesto. */
.ms360-av-vueltas-timeline{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 10px}
.ms360-av-vueltas-timeline .nodo{
    flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;
}
.ms360-av-vueltas-timeline .punto{
    display:flex;align-items:center;justify-content:center;
    width:37.4px;height:37.4px;border-radius:50%;
    background:#fff;border:2px solid var(--line);
    flex-shrink:0;
}
.ms360-av-vueltas-timeline .punto b{font-family:"Oxanium",sans-serif;font-size:12.1px;font-weight:500;color:var(--ink)}
.ms360-av-vueltas-timeline .etq{font-size:8px;font-weight:700;color:var(--muted);text-transform:uppercase;white-space:nowrap}
/* Extremos con dato confirmado (start/finish reales de Top10Avances,
   no estimado) -- se destacan distinto del resto para que se note cuál
   es certeza y cuál es cálculo. */
.ms360-av-vueltas-timeline .nodo.anclado .punto{background:var(--blue);border-color:var(--blue)}
.ms360-av-vueltas-timeline .nodo.anclado .punto b{color:#fff}
.ms360-av-vueltas-timeline .nodo.anclado .etq{color:var(--blue)}
/* Verde si ganó posiciones respecto al nodo anterior, rojo si perdió
   -- solo en los nodos calculados (no anclados, ver JS). */
.ms360-av-vueltas-timeline .nodo.gana .punto{background:color-mix(in srgb, var(--green) 15%, #fff);border-color:var(--green)}
.ms360-av-vueltas-timeline .nodo.gana .punto b{color:var(--green)}
.ms360-av-vueltas-timeline .nodo.gana .etq{color:var(--green)}
.ms360-av-vueltas-timeline .nodo.pierde .punto{background:color-mix(in srgb, var(--red) 15%, #fff);border-color:var(--red)}
.ms360-av-vueltas-timeline .nodo.pierde .punto b{color:var(--red)}
.ms360-av-vueltas-timeline .nodo.pierde .etq{color:var(--red)}
/* La línea reparte el espacio entre nodos (flex:1), en vez de un
   ancho fijo chico -- así la línea de tiempo ocupa todo el ancho
   disponible del modal, sea cual sea la cantidad de nodos. */
.ms360-av-vueltas-timeline .linea{flex:1 1 auto;min-width:14px;height:4px;background:var(--muted);margin:0 -1px 20px;border-radius:2px}

.ms360-av-modal-stat{
    display:flex;align-items:center;gap:14px;
    background:color-mix(in srgb, var(--green) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--green) 30%, transparent);
    border-radius:10px;padding:16px 18px;
}
.ms360-av-modal-stat i{font-size:32px;color:var(--green);flex-shrink:0}
.ms360-av-modal-stat b{display:block;font-family:"Oxanium",sans-serif;font-size:32px;font-weight:500;color:var(--green);line-height:1}
.ms360-av-modal-stat span{font-size:11px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.2px}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:#fff;
    color:var(--text);
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
      font-size:13px;
}
button,input{font:inherit}
button{cursor:pointer}
body.ms360-loading{overflow:hidden}

/* ================= PRELOADER ================= */

#ms360-preloader{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    /* "Paño fuera de foco" -- ahora sí desenfoca de verdad lo que hay
       abajo (backdrop-filter), en vez de taparlo con un fondo sólido.
       El contenido real ya está ahí (server-side render), simplemente
       no se ve nítido hasta que se corre el paño. */
    background:rgba(6,7,9,.6);
    backdrop-filter:blur(22px) saturate(120%);
    -webkit-backdrop-filter:blur(22px) saturate(120%);
    transition:opacity .6s ease;
}
#ms360-preloader-logo{
    width:200px;
    max-width:50vw;
    animation:ms360-preloader-parpadeo 1.7s ease-in-out infinite;
}
@keyframes ms360-preloader-parpadeo{
    0%,100%{opacity:.3}
    50%{opacity:1}
}
#ms360-preloader.ms360-hide{
    opacity:0;
    pointer-events:none;
}

/* ================= REVEAL AL SCROLLEAR ================= */
/* Lo que entra en el viewport inicial (el hero) se ve de una, sin
   animación -- tiene sentido, es lo primero que el usuario ve apenas
   se corre el preloader. Todo lo que está más abajo (standings,
   agenda, noticias/videos, footer) arranca oculto/desplazado y
   aparece animado la primera vez que entra en pantalla al scrollear
   (ver el IntersectionObserver al final del archivo). Una sola vez
   por sección, no se vuelve a ocultar si el usuario sube y baja. */
.ms360-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease, transform .7s ease;
}
.ms360-reveal.ms360-in{
    opacity:1;
    transform:translateY(0);
}

/* ================= SKELETON (placeholders de carga) ================= */
/* Reutilizable en cualquier bloque que cargue contenido después del
   primer render (hoy solo lo usa "Últimos Videos", que se completa vía
   fetch() -- ver lower.php. El resto de las secciones (hero, agenda,
   standings, noticias) ya vienen resueltas en el HTML que manda el
   servidor, así que un skeleton ahí no llegaría a verse nunca. */
.ms360-skeleton{
    background:linear-gradient(90deg, #e7eaee 25%, #f3f5f7 37%, #e7eaee 63%);
    background-size:400% 100%;
    animation:ms360-shimmer 1.4s ease infinite;
    border-radius:2px;
}
@keyframes ms360-shimmer{
    0%{background-position:100% 50%}
    100%{background-position:0 50%}
}

/* ================= LINKS (GLOBAL) ================= */
/* Ningún link lleva subrayado. El comportamiento estándar en hover es un
   fade suave del fondo (no color de texto, no subrayado). */
a{
    text-decoration:none;
    cursor:pointer;
    transition:background-color .25s ease,color .25s ease,filter .25s ease;
}
a:hover{text-decoration:none}

.shell{
    width:min(var(--container),calc(100% - 32px));
    margin:auto;
}

/* ================= HEADER ================= */

.site-header{
    background:#fff;
    border-bottom:1px solid #d8dde3;
    position:sticky;
    top:0;
    z-index:50;
}
.header-main{
    height:58px;
    display:flex;
    align-items:center;
    gap:28px;
}
.logo{
    width:185px;
    min-width:185px;
    height:48px;
    display:flex;
    align-items:center;
}
.logo img{
    height:100%;
    width:auto;
    max-width:100%;
    object-fit:contain;
    display:block;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:25px;
    flex:1;
}
.main-nav a{
    color:#16181c;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    white-space:nowrap;
    background:var(--nav-link-bg);
    border-radius:3px;
    padding:4px 12px;
    transition:background-color .3s ease,color .3s ease;
}
.main-nav a:hover{
    background:#000;
    color:#fff;
}

/* ── Submenús desplegables ── */
.nav-item{
    position:relative;
}
.nav-item > a{
    display:inline-flex;
    align-items:center;
    gap:5px;
}
.nav-item > a::after{
    content:"";
    width:5px;
    height:5px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);
    opacity:.55;
    transition:opacity .3s ease;
}
.nav-item:hover > a::after{opacity:1}
.nav-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    min-width:190px;
    background:#fff;
    border:1px solid #e4e7eb;
    border-radius:3px;
    box-shadow:0 12px 28px rgba(15,18,22,.12);
    padding:6px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
    z-index:50;
}
.nav-item:hover .nav-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.nav-dropdown a{
    display:block;
    background:transparent;
    color:#33383f;
    font-weight:600;
    font-size:12px;
    padding:8px 10px;
    border-radius:2px;
    transition:background-color .2s ease,color .2s ease;
}
.nav-dropdown a:hover{
    background:var(--nav-link-bg);
    color:#000;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:9px;
}
.search{
    width:190px;
    height:34px;
    border:1px solid #cfd5dc;
    display:flex;
    align-items:center;
    padding:0 11px;
}
.search input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#222;
    font-size:11px;
}

/* ── Buscador con selector de ámbito (En todo / Noticias / Pilotos / Equipos) ── */
.search-form{
    display:flex;
    align-items:stretch;
    height:34px;
    width:252px;
    border:1px solid #cfd5dc;
    background:#fff;
}
.search-form .search{
    border:0;
    flex:1 1 auto;
    min-width:56px;
    width:auto;
}
.search-scope{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:0;
    border-left:1px solid #cfd5dc;
    background:var(--soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M0 2l4 4 4-4' stroke='%2369717d' stroke-width='1.4' fill='none'/></svg>") no-repeat right 8px center;
    padding:0 18px 0 9px;
    font-size:9.5px;
    font-weight:var(--w-tag-bold);
    color:var(--muted);
    letter-spacing:.15px;
    cursor:pointer;
    flex-shrink:0;
    white-space:nowrap;
    transition:color .2s ease,background-color .2s ease;
}
.search-scope:hover,
.search-scope:focus{
    color:var(--ink);
    background-color:#eef1f4;
    outline:0;
}
.icon-btn{
    width:34px;
    height:34px;
    border:1px solid #ccd2d9;
    background:#fff;
    display:grid;
    place-items:center;
    font-weight:var(--w-tag-bold);
}
.login{
    height:34px;
    padding:0 18px;
    border:0;
    background:#0866db;
    color:#fff;
    font-size:12px;
    font-weight:700;
}
.socials{
    display:flex;
    gap:6px;
    align-items:center;
    margin-left:4px;
}
.social-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border:1px solid #ccc;
    border-radius:2px;
    padding:2px;
    box-sizing:border-box;
    transition:background-color .25s ease,border-color .25s ease;
}
.social-icon:hover{background:var(--soft);border-color:#b7bec7}
.social-icon svg{width:100%;height:100%;display:block}

/* ================= CATEGORY BAR ================= */

.category-bar{
    border-top:1px solid #edf0f3;
    border-bottom:1px solid #d9dee4;
    height:76px;
    overflow:hidden;
    background:#fff;
}
.categories-wrap{
    height:100%;
    display:flex;
    align-items:center;
}
.categories{
    height:100%;
    display:flex;
    align-items:center;
    gap:0;
    flex:1;
    min-width:0;
    overflow:hidden;
}
.category{
    height:100%;
    min-width:max-content;
    padding:0 15px;
    display:flex;
    align-items:center;
    gap:7px;
    border-right:1px solid #e4e7eb;
    color:#17191c;
      font-family: "Roboto Condensed", sans-serif;

    font-size:13px;
    font-weight:var(--w-tag-bold);
    text-transform:uppercase;
}
.category:first-child{border-left:1px solid #e4e7eb}
.cat-symbol{
    font-size:15px;
    font-weight:var(--w-tag-black);
}
.category:hover{background:#f4f6f8;color:var(--blue)}

.category-logo-btn{
    height:60px;
    min-width:max-content;
    margin:0 6px;
    padding:0 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:2px;
    border:0.5px solid #d9dee4;
    background:transparent;
    transition:background-color .35s ease,border-color .35s ease;
}
.category-logo-btn:first-child{margin-left:0}
.category-logo-btn img{
    height:50px;
    width:auto;
    max-width:150px;
    object-fit:contain;
    filter:grayscale(1) opacity(.6);
    transition:filter .35s ease;
}
.category-logo-btn:hover{background:#eceef1;border-color:#c7ccd2}
.category-logo-btn:hover img{filter:none;opacity:1}

/* -- Categoría activa: la del contenido que se está viendo (VerSerie.php,
   VerCalendario.php, VerPiloto.php, VerPilotos.php, etc. -- cada una
   define $ms360_categoria_activa_id antes de incluir site-header.php).
   Color original (mismo criterio que el hover) + borde celeste fijo,
   sin depender de que el mouse esté encima. -- */
.category-logo-btn.is-active{border-color:#0d6efd;border-width:1.5px}
.category-logo-btn.is-active img{filter:none;opacity:1}
.category-overlay-item.is-active{background:#eaf2ff;box-shadow:inset 3px 0 0 #0d6efd}

/* Botón "+" -- aparece solo cuando el JS de category-bar.php detecta
   que hay logos que no entran en el ancho disponible. */
.category-more-btn{
    flex-shrink:0;
    height:60px;
    width:60px;
    margin:0 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:2px;
    border:0.5px solid #d9dee4;
    background:transparent;
    color:#17191c;
    font-family:"Roboto Condensed",sans-serif;
    font-size:22px;
    font-weight:var(--w-tag-medium);
    line-height:1;
    transition:background-color .35s ease,border-color .35s ease;
}
.category-more-btn:hover{background:#eceef1;border-color:#c7ccd2}
.category-more-btn[hidden]{display:none}

/* Overlay lateral con TODAS las categorías (se abre desde el botón "+") */
.category-overlay{
    position:fixed;
    inset:0;
    z-index:200;
    visibility:hidden;
    pointer-events:none;
}
.category-overlay.open{
    visibility:visible;
    pointer-events:auto;
}
.category-overlay-backdrop{
    position:absolute;
    inset:0;
    background:rgba(10,12,16,.45);
    opacity:0;
    transition:opacity .25s ease;
}
.category-overlay.open .category-overlay-backdrop{opacity:1}
.category-overlay-panel{
    position:absolute;
    top:0;
    right:0;
    height:100%;
    width:300px;
    max-width:86vw;
    background:#fff;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .3s ease;
    box-shadow:-8px 0 24px rgba(0,0,0,.12);
}
.category-overlay.open .category-overlay-panel{transform:translateX(0)}
.category-overlay-header{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:58px;
    padding:0 18px;
    border-bottom:1px solid #e4e7eb;
    font-family:"Roboto Condensed",sans-serif;
    font-weight:var(--w-tag-bold);
    font-size:13px;
    text-transform:uppercase;
}
.category-overlay-close{
    border:0;
    background:transparent;
    font-size:22px;
    line-height:1;
    color:#17191c;
    padding:4px 6px;
}
.category-overlay-list{
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:8px 0;
}
.category-overlay-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 18px;
    color:#17191c;
    border-bottom:1px solid #f0f2f5;
}
.category-overlay-item:hover{background:#f4f6f8}
.category-overlay-item img{
    height:32px;
    width:32px;
    object-fit:contain;
    flex-shrink:0;
}
.category-overlay-item span{
    font-family:"Roboto Condensed",sans-serif;
    font-size:13px;
    font-weight:var(--w-tag-semibold);
    text-transform:uppercase;
}

/* Tooltip de las categorías: ver #ms360-cat-tooltip más abajo.
   (Se maneja con JS y position:fixed, appendeado al body, en vez de
   ::after, porque .categories recorta cualquier ::after que se salga
   del contenedor en el eje vertical). */
#ms360-cat-tooltip{
    position:fixed;
    top:0;
    left:0;
    background:#000;
    color:#fff;
    font-family:"Roboto Condensed",sans-serif;
    font-size:11px;
    font-weight:200;
    white-space:nowrap;
    padding:5px 9px;
    border-radius:3px;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,calc(-100% + 4px));
    transition:opacity .2s ease,transform .2s ease;
    z-index:999;
}
#ms360-cat-tooltip.visible{
    opacity:1;
    transform:translate(-50%,-100%);
}

/* ================= HERO ================= */

.hero{
    padding-top:8px;
}
.hero-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
}
.post{
    min-width:0;
    height:468px;
    position:relative;
    overflow:hidden;
    background:#111;
    border-right:1px solid #fff;
    color:#fff;
}
.post:last-child{border-right:0}
.post img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:saturate(.92);
}
.post-top{
    position:absolute;
    z-index:2;
    top:12px;
    left:13px;
    right:13px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.profile{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:10.1px;
    font-weight:100;
	    background:rgba(0,0,0,.20);
		border-radius:2px;
		padding:3px;

}
.avatar{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#fff;
    border:2px solid #fff;
    display:grid;
    place-items:center;
    font-weight:100;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.post-content{
    position:absolute;
    z-index:3;
    left:0;
    right:0;
    bottom:0;
    padding:160px 14px 12px;
    box-sizing:border-box;
    background: linear-gradient(to top,
        #000 0%,
        rgba(0,0,0,.97) 25%,
        rgba(0,0,0,.85) 45%,
        rgba(0,0,0,.55) 65%,
        rgba(0,0,0,.2) 85%,
        rgba(0,0,0,0) 100%);
}
.post-badges{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:8px;
}
.badge{
    display:inline-flex;
    padding:4px 8px;
    color:#fff;
    background:var(--red);
    font-family:"Roboto Condensed",sans-serif;
    font-weight:var(--w-tag-medium);
    font-size:9px;
    text-transform:uppercase;
    border-radius:var(--radius-badge);
    margin-bottom:0;
}
.badge.blue{background:#1264d8}
.badge.yellow{background:#e4bd00;color:#111}
.badge.orange{background:#ed6c00}
.badge.green{background:var(--green)}
.badge.dark{background:var(--ink)}

/* ---------------------------------------------------------------------
   Badge de nro de coche -- único, para todo el sitio, en cualquier
   lugar que muestre el número de un auto (selector de pilotos, tablas
   de clasificación/comparativas, líder de sesión, head to head, ficha
   de piloto, etc). Se muestra SIEMPRE sin el símbolo "#" delante (el
   badge en sí ya comunica que es un número de auto). Ancho fijo para
   que no "salte" el layout entre autos de 1, 2 o 3 dígitos -- se
   valida que 3 dígitos entren cómodos sin recortarse.
   --------------------------------------------------------------------- */
.badge-nro{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
    width:30px;
    min-width:30px;
    height:19px;
    box-sizing:border-box;
    padding:0 2px;
    border-radius:var(--radius-badge);
    background:var(--cyan);
    color:#fff;
    font-family:'JetBrains Mono','Consolas',monospace;
    font-weight:var(--w-tag-bold);
    font-size:11px;
    line-height:1;
    white-space:nowrap;
    letter-spacing:0;
}
.post h1{
    margin:0;
    font-family:"Roboto Condensed",sans-serif;
    font-size:22.77px;
    line-height:.96;
    letter-spacing:.2px;
    text-transform:uppercase;
    font-weight:700;
    max-width:97%;
}
.post-excerpt{
    margin:8px 0 0;
    font-family:"Roboto Condensed",sans-serif;
    font-size:12px;
    font-weight:100;
    line-height:1.4;
    color:rgba(255,255,255,.80);
    max-width:94%;
}
.post-actions{
    display:flex;
    align-items:center;
    gap:18px;
    border-top:1px solid rgba(255,255,255,.55);
    margin-top:12px;
    padding-top:8px;
    font-size:17.1px;
}

.post-actions i {
    font-size: 0.95em;
    opacity: 0.8;
    -webkit-text-stroke: 0.2px transparent;
}


.post-actions .bookmark{margin-left:auto}
.post-actions .count{
    font-size:9px;
    font-weight:var(--w-tag-semibold);
    vertical-align:super;
    margin-left:-4px;
}

/* ================= SECTION HEADER ================= */

.section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:36px;
    border-bottom:2px solid #16181c;
}
.section-title{
    margin:0;
    display:flex;
    align-items:center;
    gap:9px;
    font-family:"Roboto Condensed",sans-serif;
    text-transform:uppercase;
    letter-spacing:.4px;
    font-size:19px;
    font-weight:700;
}
.section-title::before{
    content:"";
    display:block;
    width:4px;
    height:17px;
    background:var(--blue);
    border-radius:1px;
}
.section-link{
    font-size:10px;
    font-weight:800;
    color:#4c5662;
    padding:5px 8px;
    margin-right:-8px;
    border-radius:var(--radius);
}
.section-link:hover{background:var(--soft)}

/* ================= STANDINGS ================= */

.standings{padding-top:9px}

#PreCampeonatos360Container{
    overflow:hidden;
    padding:6px 0 10px;
}
#PreCampeonatos360Carousel{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding:4px 2px 10px;
    cursor:grab;
}
#PreCampeonatos360Carousel.dragging{cursor:grabbing;user-select:none}
#PreCampeonatos360Carousel::-webkit-scrollbar{display:none}

.PreCampeonatos360Card{
    flex:0 0 auto;
    width:260px;
    height:320px;
    box-sizing:border-box;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--white);
    box-shadow:0 1px 6px rgba(0,0,0,.08);
    position:relative;
    overflow:hidden;
    color:inherit;
    scroll-snap-align:start;
    transition:background-color .25s ease,border-color .25s ease;
}
.PreCampeonatos360Card:hover{
    background:#fafbfc;
    border-color:#aab4c0;
}

.PreCampeonatos360Card-Header{
    width:100%;
    height:40px;
    display:flex;
    align-items:center;
    box-sizing:border-box;
    padding:0 44px 0 0;
    background:var(--soft);
    border-bottom:1px solid var(--line);
}
.PreCampeonatos360Card-Header-Logo{
    width:40px;
    height:40px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.PreCampeonatos360Card-Header-Logo img{width:100%;height:100%;object-fit:contain}
.PreCampeonatos360Card-Header-Categoria{
    font-family:"Roboto Condensed",sans-serif;
    font-weight:var(--w-tag-bold);
    font-size:13px;
    line-height:1.15;
    color:var(--ink);
    flex:1;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.PreCampeonatos360Card-Marca{
    position:absolute;
    top:6px;
    right:8px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--white);
    border:1px solid var(--line);
    box-shadow:0 1px 4px rgba(0,0,0,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    z-index:2;
}
.PreCampeonatos360Card-Marca img{max-width:70%;max-height:70%;object-fit:contain;display:block}

.PreCampeonatos360Card-Nombre{
    position:absolute;
    left:0;
    top:46px;
    width:100%;
    margin:0;
    padding-left:14px;
    box-sizing:border-box;
    font-family:"Roboto Condensed",sans-serif;
    font-weight:500;
    font-size:16px;
    line-height:19px;
    color:var(--muted);
    text-transform:uppercase;
}
.PreCampeonatos360Card-Apellido{
    position:absolute;
    left:0;
    top:65px;
    width:100%;
    margin:0;
    padding-left:14px;
    box-sizing:border-box;
    font-family:"Roboto Condensed",sans-serif;
    font-weight:800;
    font-size:23px;
    line-height:26px;
    color:var(--blue2);
    text-transform:uppercase;
}
.PreCampeonatos360Card-Equipo{
    position:absolute;
    left:0;
    top:93px;
    width:100%;
    height:14px;
    margin:0;
    padding-left:14px;
    box-sizing:border-box;
    font-family:"Roboto Condensed",sans-serif;
    font-weight:500;
    font-size:10px;
    line-height:14px;
    color:var(--muted);
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.PreCampeonatos360Card-Puntaje{
    width:84px;
    height:84px;
    border-radius:50%;
    border:2px dashed var(--blue2);
    position:absolute;
    left:12px;
    top:114px;
    background:var(--white);
    overflow:hidden;
    z-index:1;
}
.PuntajeTextoContainer{position:absolute;top:0;left:0;width:100%;height:100%}
.PuntajeValor{
    font-family:"Roboto Condensed",sans-serif;
    font-weight:900 !important;
    position:absolute;
    top:10px;
    left:0;
    width:100%;
    margin:0;
    padding:0;
    font-size:35px;
    text-align:center;
    color:var(--blue2);
}
.PuntajeTexto{
    font-family:"Roboto Condensed",sans-serif;
    font-weight:700;
    position:absolute;
    top:48px;
    left:0;
    width:100%;
    margin:0;
    padding:0;
    font-size:10px;
    letter-spacing:.3px;
    text-align:center;
    text-transform:uppercase;
    color:var(--blue2);
}

.PreCampeonatos360Card-Foto{
    position:absolute;
    top:100px;
    right:0;
    width:135px;
    height:135px;
    overflow:hidden;
    z-index:0;
    pointer-events:none;
}
.PreCampeonatos360Card-Foto img{
    width:100%;
    height:auto;
    display:block;
}

.PreCampeonatos360Card-Seguidores{
    position:absolute;
    bottom:32px;
    left:0;
    width:100%;
    background:#fafafa;
    border-top:2px solid var(--blue2);
    box-shadow:0 -8px 8px -4px rgba(0,0,0,.12);
    overflow:hidden;
    z-index:2;
}
.PreCampeonatos360Card-Seguidores-Row{
    display:flex;
    align-items:center;
    height:26px;
    padding:0 8px;
    box-sizing:border-box;
    border-bottom:1px dashed var(--line);
}
.PreCampeonatos360Card-Seguidores-Row:last-child{border-bottom:0}
.PreCampeonatos360Card-Seguidores-Row-Pos{
    width:18px;
    flex-shrink:0;
    font-size:13px;
    font-weight:var(--w-tag-semibold);
    color:var(--ink);
    text-align:center;
}
.PreCampeonatos360Card-Seguidores-Row-Nro{
    width:22px;
    height:16px;
    flex-shrink:0;
    margin:0 6px;
    background:var(--blue2);
    color:var(--white);
    font-size:12px;
    font-weight:var(--w-tag-semibold);
    line-height:16px;
    text-align:center;
    border-radius:3px;
}
.PreCampeonatos360Card-Seguidores-Row-Logo{
    width:22px;
    height:20px;
    flex-shrink:0;
    margin-right:6px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.PreCampeonatos360Card-Seguidores-Row-Logo img{max-width:100%;max-height:100%;object-fit:contain}
.PreCampeonatos360Card-Seguidores-Row-Apellido{
    position:relative;
    flex:1;
    min-width:0;
    font-size:13px;
    font-weight:700;
    color:var(--ink);
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
}
.PreCampeonatos360Card-Seguidores-Row-Apellido::after{
    content:"";
    position:absolute;
    right:0;
    top:0;
    width:16px;
    height:100%;
    pointer-events:none;
    background:linear-gradient(to right,rgba(250,250,250,0),#fafafa 90%);
}
.PreCampeonatos360Card-Seguidores-Row-Puntos{
    flex-shrink:0;
    margin-left:6px;
    background:var(--soft);
    font-size:11px;
    font-weight:var(--w-tag-semibold);
    color:var(--ink);
    line-height:18px;
    text-align:center;
    border-radius:2px;
    padding:0 6px;
}
.PreCampeonatos360Card-Seguidores-Row-Gap{
    flex-shrink:0;
    width:30px;
    padding-left:4px;
    font-size:9px;
    font-weight:var(--w-tag-semibold);
    color:var(--muted);
    text-align:right;
}

.PreCampeonatos360Card-FooterChamp{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:32px;
    box-sizing:border-box;
    background:var(--white);
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}
.PreCampeonatos360Card-FooterChamp .footer-link{
    color:var(--blue2);
    font-size:11px;
    font-weight:var(--w-tag-medium);
    transition:color .2s ease;
}
.PreCampeonatos360Card-FooterChamp .footer-link:hover{color:var(--blue)}

@media (max-width:600px){
    .PreCampeonatos360Card{width:82vw}
}

/* ================= MAIN DATA ROW ================= */

.content-row{
    display:grid;
    grid-template-columns:1.05fr 1.25fr 1.25fr;
    gap:6px;
    margin-top:10px;
}
.panel{
    border:1px solid #d8dde3;
    background:#fff;
    min-width:0;
}
.panel-title{
    height:36px;
    border-bottom:1px solid #d8dde3;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 10px;
    font-family:"Roboto Condensed",sans-serif;
    text-transform:uppercase;
    font-size:16px;
    font-weight:900;
}
.panel-title a{
    color:#1264d8;
    font-family:"Roboto Condensed",sans-serif;
    font-size:9px;
    padding:5px 8px;
    margin-right:-8px;
    border-radius:var(--radius);
    transition:background-color .2s ease;
}
.panel-title a:hover{background:var(--soft)}

.agenda-list{padding:2px 0}
.event{
    display:flex;
    align-items:center;
    gap:11px;
    height:52px;
    padding:0 14px;
    border-bottom:1px solid #edf0f3;
    border-left:2px solid transparent;
    color:inherit;
    text-decoration:none;
    /* Barrido sólido de derecha a izquierda -- NO es un degradé visual:
       es un gradiente de corte duro (mitad color, mitad transparente)
       en una imagen del doble de ancho, y lo que se anima es la
       "ventana" visible (background-position). El resultado se ve
       como un color plano entrando desde el borde derecho hasta cubrir
       toda la fila -- al terminar la transición queda 100% sólido, sin
       fade. */
    background-image:linear-gradient(to left, rgba(146,166,196,.55) 50%, transparent 50%);
    background-size:200% 100%;
    background-position:left bottom;
    transition:background-position .32s ease;
}
.event:last-child{border-bottom:0}
.event:hover{background-position:right bottom}
.event.is-next{
    border-left-color:var(--blue);
    background:#f5f9ff;
}

.event-date{
    flex-shrink:0;
    width:34px;
    text-align:center;
    line-height:1.15;
}
.event-date b{
    display:block;
    font-size:16px;
    font-weight:800;
    color:var(--ink);
}
.event-date span{
    display:block;
    font-size:9px;
    font-weight:var(--w-tag-semibold);
    color:var(--muted);
    text-transform:uppercase;
}

.event-logo{
    flex-shrink:0;
    width:44px;
    height:44px;
    border:1px solid #e4e7eb;
    border-radius:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.event-logo img{width:100%;height:100%;object-fit:contain}

.event-info{
    flex:1;
    min-width:0;
}
.event-series{
    display:block;
    font-size:12px;
    line-height:1.15;
    font-weight:var(--w-tag-bold);
    color:var(--ink);
    text-transform:uppercase;
    letter-spacing:.2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.event-name{
    display:block;
    margin-top:1px;
    font-size:11px;
    line-height:1.15;
    font-weight:400;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* P1 de la última sesión con resultado cargado para esa fecha (ver
   agenda.php -- $ultimoLiderNombre). No es necesariamente el ganador
   de la Final: puede ser el poleman de la Clasificación si la Final
   todavía no se corrió. Se actualiza solo, fecha a fecha. */
.event-leader{
    display:block;
    margin-top:1px;
    font-size:10px;
    line-height:1.15;
    font-weight:var(--w-tag-semibold);
    color:var(--blue);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.event-btn-vermas{
    flex-shrink:0;
    font-size:9px;
    font-weight:var(--w-tag-bold);
    color:var(--blue);
    background:#fff;
    border:1px solid var(--blue);
    text-transform:uppercase;
    letter-spacing:.4px;
    padding:4px 8px;
    border-radius:3px;
    text-decoration:none;
    transition:background-color .15s ease, color .15s ease;
}
.event-btn-vermas:hover{
    background:var(--blue);
    color:#fff;
}

.flag{flex-shrink:0}
.flag img{
    width:20px;
    height:20px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid #e4e7eb;
}

/* BANNERS */

.banner{
    position:relative;
    overflow:hidden;
    color:#fff;
    display:block;
    text-decoration:none;
    box-shadow:
        inset 0 0 0 2px var(--ms-banner-vivid, transparent),
        inset 0 0 20px 2px var(--ms-banner-vivid, transparent),
        inset 0 0 46px 10px var(--ms-banner-vivid, transparent);
    transition:box-shadow .4s ease;
}
/* Un solo banner en el slot (hasta 4 elementos en la agenda) -- ocupa
   el 100% del alto del panel, que a su vez ya estira solo al alto de
   la agenda por el grid (align-items:stretch, default de CSS Grid). */
.panel > .banner{height:100%}
/* Más de un banner en el slot (4 u 8+ elementos en la agenda) -- se
   reparten el alto disponible en partes iguales. */
.banner-slot-double{
    height:100%;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.banner-slot-double .banner{flex:1;min-height:0}
.banner img{
    width:100%;
    height:100%;
    object-fit:cover;
}
/* Gradiente normal: negro total a la izq -> color vivo detectado a la
   derecha. En hover se desvanece (crossfade) hacia :before, que trae
   el mismo gradiente pero invertido -- animar así (dos capas + fade de
   opacidad) es mucho más prolijo y confiable entre navegadores que
   intentar animar los "stops" de un solo gradiente directamente. */
.banner:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 45%, var(--ms-banner-vivid, rgba(0,0,0,.25)) 100%);
    transition:opacity .5s ease;
}
.banner:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, var(--ms-banner-vivid, rgba(0,0,0,.25)) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,1) 100%);
    opacity:0;
    transition:opacity .5s ease;
}
.banner:hover:after{opacity:0}
.banner:hover:before{opacity:1}
.banner-content{
    position:absolute;
    z-index:2;
    left:18px;
    right:70px;
    bottom:16px;
}
.banner-top-row{
    display:flex;
    align-items:center;
    margin-bottom:10px;
}
.banner-logo{
    width:104px;
    height:104px;
    object-fit:contain;
    display:block;
    margin-right:25px;
    flex-shrink:0;
    background:none;
}
.banner-brand{
    font-family:"Roboto Condensed",sans-serif;
    font-size:40px;
    font-style:italic;
    font-weight:900;
    line-height:1.05;
    text-shadow:0 2px 6px rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.6);
}
.banner-circuito{
    display:flex;
    align-items:center;
    gap:5px;
    font-family:"Roboto Condensed",sans-serif;
    font-size:14px;
    font-weight:var(--w-tag-bold);
    text-transform:uppercase;
}
.banner-circuito svg{width:13px;height:13px;flex-shrink:0}
.banner-lugar{
    margin-top:2px;
    font-size:11px;
    font-weight:300;
    opacity:.8;
}
.banner-btn{
    display:inline-block;
    margin-top:12px;
    border:1px solid #fff;
    color:#fff;
    background:transparent;
    padding:6px 10px;
    font-size:9px;
    font-weight:var(--w-tag-bold);
    border-radius:var(--radius);
    transition:background-color .25s ease,color .25s ease;
}
.banner-btn:hover{background:#fff;color:#111}

/* Fecha estilo almanaque -- mes arriba (rojo), día grande abajo */
.banner-date-box{
    position:absolute;
    z-index:2;
    top:15px;
    right:15px;
    width:44px;
    background:#fff;
    border-radius:2px;
    overflow:hidden;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.banner-date-mes{
    display:block;
    background:var(--red);
    color:#fff;
    font-size:9px;
    font-weight:var(--w-tag-bold);
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:2px 0;
}
.banner-date-dia{
    display:block;
    color:#17191c;
    font-family:"Roboto Condensed",sans-serif;
    font-size:20px;
    font-weight:800;
    line-height:1.5;
}

/* Modo "2x2" -- cuando la agenda tiene más de 4 eventos, cada columna
   de banner pasa a mostrar 2 minibanners apilados en vez de 1 grande. */
.banner-slot-double{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.banner-compact .banner-content{left:12px;right:50px;bottom:8px}
.banner-compact .banner-top-row{margin-bottom:4px}
.banner-compact .banner-logo{width:50px;height:50px;margin-right:14px}
.banner-compact .banner-brand{font-size:22px}
.banner-compact .banner-circuito{font-size:10px}
.banner-compact .banner-circuito svg{width:9px;height:9px}
.banner-compact .banner-lugar{font-size:8px;margin-top:0}
.banner-compact .banner-btn{
    margin-top:4px;
    padding:3px 7px;
    font-size:7px;
}
.banner-compact .banner-date-box{top:6px;right:6px;width:30px}
.banner-compact .banner-date-mes{font-size:7px;padding:1px 0}
.banner-compact .banner-date-dia{font-size:13px;line-height:1.4}

/* ================= LOWER GRID ================= */

.lower{
    display:grid;
    grid-template-columns:1.05fr 1.25fr 1.25fr;
    gap:6px;
    margin-top:10px;
}
.lower .panel:last-child{grid-column:2 / 4}
.news-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}
.news-card{
    border:1px solid #d8dde3;
    background:#fff;
    overflow:hidden;
}
.news-card img{
    width:100%;
    height:126px;
    object-fit:cover;
    display:block;
}
.news-body{padding:8px}
.news-badges{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-bottom:5px;
}
.news-badge{
    display:inline-block;
    font-size:8px;
    font-weight:var(--w-tag-medium);
    text-transform:uppercase;
    color:#fff;
    background:var(--blue);
    padding:3px 5px;
}
.news-badge.green{background:var(--green)}
.news-badge.blue{background:var(--blue)}
.news-badge.red{background:var(--red)}
.news-badge.purple{background:var(--purple)}
.news-card h3{
    font-family:"Roboto Condensed",sans-serif;
    font-size:17px;
    line-height:1;
    margin:0;
    text-transform:uppercase;
}
.news-excerpt{
    font-family:"Roboto Condensed",sans-serif;
    font-size:11px;
    font-weight:400;
    line-height:1.4;
    color:var(--muted);
    margin:6px 0 0;
}
.news-date{
    color:#7b838d;
    font-size:8px;
    margin-top:7px;
}

/* ================= PILOTOS EN EL EXTERIOR ================= */
/* El fondo (ARG.png) va en el CONTENEDOR de toda la sección, una sola
   vez -- no en cada card. Las cards en sí son minimalistas: solo un
   borde suave gris, sin foto ni fondo propio, dejan ver el fondo
   general de la sección detrás de la info. */
.pilotos-exterior{
    margin-top:14px;
    padding:22px 16px;
    background-image:url('assets/images/ARG.png');
    background-size:cover;
    background-position:center;
}
.pilotos-exterior .section-title{color:#fff}
.pilotos-exterior .section-title::before{background:#fff}

.pilotos-exterior-carousel{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:10px 2px 6px;
    cursor:grab;
    scroll-snap-type:x mandatory;
}
.pilotos-exterior-carousel.dragging{cursor:grabbing;user-select:none}
.pilotos-exterior-carousel::-webkit-scrollbar{display:none}

.pe-card{
    flex:0 0 auto;
    width:230px;
    height:320px;
    position:relative;
    overflow:hidden;
    display:block;
    color:#fff;
    text-decoration:none;
    scroll-snap-align:start;
    border:1px solid rgba(220,224,230,.4);
    border-radius:2px;
    transition:border-color .3s ease;
}
.pe-card:hover{border-color:rgba(220,224,230,.85)}
.pe-foto{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:2;
}
.pe-card:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:#000;
    opacity:.2;
    transition:opacity .35s ease;
}
.pe-card:hover:after{opacity:.5}
.pe-flag{
    position:absolute;
    z-index:3;
    top:10px;
    right:10px;
    font-size:20px;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));
}
.pe-content{
    position:absolute;
    z-index:3;
    left:16px;
    right:16px;
    bottom:16px;
}
.pe-logo{
    width:64px;
    height:64px;
    object-fit:contain;
    display:block;
    margin-bottom:8px;
}
.pe-serie{
    font-size:9px;
    font-weight:var(--w-tag-bold);
    text-transform:uppercase;
    letter-spacing:.4px;
    opacity:.75;
}
.pe-nombre{
    font-family:"Roboto Condensed",sans-serif;
    font-size:14px;
    font-weight:300;
    line-height:1.1;
    margin-top:6px;
}
.pe-apellido{
    font-family:"Roboto Condensed",sans-serif;
    font-size:20px;
    font-weight:900;
    text-transform:uppercase;
    line-height:1.05;
    text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.pe-equipo{
    margin-top:6px;
    font-size:10px;
    font-weight:300;
    opacity:.7;
}

/* ================= ARTÍCULO ================= */

.article-layout{
    display:grid;
    grid-template-columns:60% 1fr;
    gap:32px;
    margin-top:20px;
    align-items:start;
}
.article-main{min-width:0}

.article-badges{display:flex;gap:6px;margin-bottom:14px}

.article-title{
    font-family:"Roboto Condensed",sans-serif;
    font-size:32px;
    font-weight:800;
    line-height:1.22;
    letter-spacing:-.2px;
    margin:0 0 12px;
    color:var(--text);
}
.article-bajada{
    font-family:"Roboto Condensed",sans-serif;
    font-size:16px;
    font-weight:300;
    line-height:1.55;
    color:var(--muted);
    margin:0 0 20px;
}

.article-meta{
    display:flex;
    align-items:center;
    gap:10px;
    padding-bottom:18px;
    border-bottom:1px solid var(--line);
    margin-bottom:20px;
}
.article-meta .avatar{
    width:36px;
    height:36px;
    border-radius:2px;
    background:var(--blue);
    border:none;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:"Roboto Condensed",sans-serif;
    font-weight:700;
    font-size:14px;
    flex-shrink:0;
}
.article-meta-text{display:flex;flex-direction:column;line-height:1.35}
.article-autor{font-family:"Roboto Condensed",sans-serif;font-weight:600;font-size:13px;color:var(--text)}
.article-fecha{font-size:12px;color:var(--muted)}

.article-hero-img{
    width:100%;
    height:auto;
    display:block;
    border-radius:2px;
    margin-bottom:24px;
}

.article-body{
    font-family:"Roboto Condensed",sans-serif;
    font-weight:300;
    font-size:16px;
    line-height:1.75;
    color:var(--text);
}
.article-body p{margin:0 0 18px}
.article-body h2,.article-body h3{
    font-family:"Roboto Condensed",sans-serif;
    font-weight:700;
    margin:28px 0 12px;
    color:var(--text);
}
.article-body img{
    max-width:100%;
    height:auto;
    border-radius:2px;
    margin:6px 0 18px;
}
.article-body a{color:var(--blue);text-decoration:underline}
.article-body blockquote{
    margin:18px 0;
    padding:2px 0 2px 16px;
    border-left:3px solid var(--blue);
    color:var(--muted);
    font-style:italic;
}

.article-footer{
    margin-top:28px;
    padding-top:18px;
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
}
.article-actions{display:flex;align-items:center;gap:16px;font-size:18px;color:var(--muted)}
.article-actions .count{font-size:11px;font-weight:var(--w-tag-semibold);vertical-align:super;margin-left:-4px}
.article-actions span{cursor:pointer;transition:color .2s ease}
.article-actions span:hover{color:var(--text)}

.article-share{display:flex;align-items:center;gap:8px}
.article-share-label{font-size:12px;color:var(--muted);margin-right:2px}
.share-btn{
    width:30px;
    height:30px;
    border-radius:2px;
    background:var(--soft);
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:"Roboto Condensed",sans-serif;
    font-weight:600;
    font-size:13px;
    text-decoration:none;
    transition:background-color .2s ease;
}
.share-btn:hover{background:#e8ebef}

/* ---- sidebar de extras ---- */
.article-sidebar{display:flex;flex-direction:column;gap:22px;min-width:0}
.sidebar-widget{min-width:0}
.sidebar-widget > .section-title{margin-bottom:12px}

.sidebar-news-list{display:flex;flex-direction:column;gap:12px}
.sidebar-news-item{
    display:flex;
    gap:10px;
    text-decoration:none;
    color:inherit;
    padding:6px;
    border-radius:2px;
    transition:background-color .2s ease;
}
.sidebar-news-item:hover{background:var(--soft)}
.sidebar-news-item img{
    width:76px;
    height:60px;
    object-fit:cover;
    border-radius:2px;
    flex-shrink:0;
}
.sidebar-news-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.sidebar-news-badge{
    font-size:9px;
    font-weight:var(--w-tag-bold);
    text-transform:uppercase;
    color:var(--blue);
    letter-spacing:.3px;
}
.sidebar-news-text h3{
    margin:0;
    font-family:"Roboto Condensed",sans-serif;
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    color:var(--text);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.sidebar-news-date{font-size:11px;color:var(--muted)}

.sidebar-ad{
    height:280px;
    background:var(--soft);
    border:1px dashed var(--line);
    border-radius:2px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.sidebar-ad-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}

.article-not-found{
    padding:60px 0;
    text-align:center;
    color:var(--muted);
    font-family:"Roboto Condensed",sans-serif;
}

@media(max-width:980px){
    .article-layout{grid-template-columns:1fr;gap:28px}
    .article-title{font-size:26px}
}
@media(max-width:620px){
    .article-title{font-size:22px}
    .article-bajada{font-size:14px}
    .article-footer{flex-direction:column;align-items:flex-start}
}

/* ================= DETALLE DE EVENTO ================= */

.evento-detalle{margin-top:20px}

.evento-hero{
    background:var(--ink);
    color:#fff;
    border-radius:2px;
    padding:24px;
}
.evento-hero-row{display:flex;align-items:center;gap:18px}
.evento-hero-logo{
    width:64px;
    height:64px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.evento-hero-logo img{width:100%;height:100%;object-fit:contain}
.evento-hero-txt{min-width:0}
.evento-hero-serie{
    font-size:11px;
    font-weight:var(--w-tag-bold);
    text-transform:uppercase;
    letter-spacing:.5px;
    color:rgba(255,255,255,.6);
}
.evento-hero-nombre{
    margin:2px 0 8px;
    font-family:"Roboto Condensed",sans-serif;
    font-size:24px;
    font-weight:800;
    line-height:1.2;
}
.evento-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:2px;
    font-size:11px;
    font-weight:var(--w-tag-semibold);
    text-transform:uppercase;
    letter-spacing:.3px;
    border:1px solid;
}
.evento-badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.evento-badge-green{color:#3ddc84;border-color:rgba(61,220,132,.3);background:rgba(61,220,132,.12)}
.evento-badge-orange{color:#ffb057;border-color:rgba(255,176,87,.3);background:rgba(255,176,87,.12)}
.evento-badge-blue{color:#5aa4ff;border-color:rgba(90,164,255,.3);background:rgba(90,164,255,.12)}
.evento-badge-gray{color:#a7adb5;border-color:rgba(167,173,181,.3);background:rgba(167,173,181,.12)}

.evento-meta{
    display:flex;
    gap:28px;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.12);
    flex-wrap:wrap;
}
.evento-meta-item{display:flex;flex-direction:column;gap:3px}
.evento-meta-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.5)}
.evento-meta-val{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:"Roboto Condensed",sans-serif;
    font-size:14px;
    font-weight:500;
}
.evento-meta-flag{width:18px;height:12px;object-fit:cover;border-radius:1px}

.evento-body{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:0;
    margin-top:2px;
    border:1px solid var(--line);
    border-top:none;
    border-radius:0 0 2px 2px;
    align-items:start;
}

.evento-sidebar{
    border-right:1px solid var(--line);
    padding:10px 0;
}
.evento-sidebar.single{padding-top:10px}
.evento-sb-head{
    padding:6px 16px 10px;
    font-size:11px;
    font-weight:var(--w-tag-bold);
    text-transform:uppercase;
    letter-spacing:.4px;
    color:var(--muted);
}
.evento-sb-empty{padding:10px 16px;font-size:12px;color:var(--muted)}

.evento-sb-clase-btn{
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    background:none;
    border:none;
    font-family:"Roboto Condensed",sans-serif;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.3px;
    color:var(--text);
    cursor:pointer;
    text-align:left;
    transition:background-color .2s ease;
}
.evento-sb-clase-btn:hover{background:var(--soft)}
.evento-sb-chevron{
    display:inline-block;
    font-size:14px;
    color:var(--muted);
    transition:transform .2s ease;
}
.evento-sb-clase-btn.open .evento-sb-chevron{transform:rotate(90deg)}

.evento-sb-btn{
    width:100%;
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 16px 9px 28px;
    background:none;
    border:none;
    border-left:2px solid transparent;
    font-family:"Roboto Condensed",sans-serif;
    font-size:13px;
    font-weight:400;
    color:var(--text);
    cursor:pointer;
    text-align:left;
    transition:background-color .2s ease;
}
.evento-sidebar.single .evento-sb-btn{padding-left:16px}
.evento-sb-btn:hover{background:var(--soft)}
.evento-sb-btn.active{
    background:var(--soft);
    border-left-color:var(--blue);
    font-weight:600;
    color:var(--blue);
}
.evento-sb-icon{font-size:13px;flex-shrink:0}

.evento-content{padding:18px 20px;min-width:0}
.evento-content-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    margin-bottom:14px;
}
.evento-content-title{
    font-family:"Roboto Condensed",sans-serif;
    font-size:17px;
    font-weight:700;
    color:var(--text);
}
.evento-content-count{font-size:12px;color:var(--muted)}

.evento-table-scroll{overflow-x:auto}
.evento-table{width:100%;border-collapse:collapse;font-size:13px}
.evento-table thead th{
    text-align:left;
    padding:8px 10px;
    font-size:10px;
    font-weight:var(--w-tag-bold);
    text-transform:uppercase;
    letter-spacing:.3px;
    color:var(--muted);
    border-bottom:1px solid var(--line);
    white-space:nowrap;
}
.evento-table thead th.center{text-align:center}
.evento-table tbody td{
    padding:9px 10px;
    border-bottom:1px solid #edf0f3;
    color:var(--text);
    white-space:nowrap;
}
.evento-table tbody td.center{text-align:center}
.evento-table tbody tr:hover{background:var(--soft)}

.evento-empty{
    padding:30px 0;
    text-align:center;
    color:var(--muted);
    font-size:13px;
}

@media(max-width:760px){
    .evento-body{grid-template-columns:1fr}
    .evento-sidebar{
        border-right:none;
        border-bottom:1px solid var(--line);
        display:flex;
        overflow-x:auto;
        padding:8px 10px;
        gap:4px;
    }
    .evento-sb-head{display:none}
    .evento-sb-clase-btn,.evento-sb-btn{width:auto;white-space:nowrap;padding:8px 12px;border-left:none;border-radius:2px}
    .evento-sb-btn.active{border-left:none}
    .evento-sb-grupo{display:flex!important;gap:4px}
    .evento-hero-nombre{font-size:19px}
    .evento-meta{gap:18px}
}

/* ================= FOOTER ================= */

footer{
    margin-top:12px;
    background:#f4f6f8;
    border-top:1px solid #d8dde3;
}
.footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1fr 1.5fr;
    gap:25px;
    padding:30px 0 24px;
}
.footer-col{
    border-right:1px solid #d5dae0;
    padding-right:22px;
}
.footer-col:last-child{border-right:0}
.footer-title{
    font-family:"Roboto Condensed",sans-serif;
    font-size:16px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:10px;
}
.footer p{
    color:#69717d;
    font-size:10px;
    line-height:1.5;
    max-width:260px;
}
.footer-links a{
    display:block;
    color:#2a2e34;
    font-weight:600;
    font-size:10px;
    line-height:19px;
    padding:1px 6px;
    margin:0 -6px;
    border-radius:var(--radius);
    text-decoration:none;
    transition:background-color .2s ease;
}
.footer-links a:hover{
    background:#e8ebef;
    text-decoration:underline dotted;
    text-underline-offset:2px;
}
.footer-social{
    display:flex;
    gap:8px;
    margin-top:14px;
}
.footer-social .social-icon{width:22px;height:22px}
.newsletter input{
    width:100%;
    height:36px;
    border:1px solid #cfd5dc;
    background:#fff;
    padding:0 10px;
    outline:0;
    margin-bottom:6px;
}
.newsletter button{
    width:100%;
    height:36px;
    border:0;
    background:var(--blue);
    color:#fff;
    font-size:10px;
    font-weight:var(--w-tag-bold);
}
.footer-bottom{
    border-top:1px solid #d5dae0;
    padding:10px 0;
    color:#7b838d;
    text-align:center;
    font-size:8px;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1200px){
    .main-nav{gap:15px}
    .search-form{width:200px}
    .search-form .search{min-width:36px}
    .search-scope{font-size:8.5px;padding:0 16px 0 8px}
    .post h1{font-size:21.96px}
}

@media(max-width:980px){
    .shell{width:min(100% - 20px,var(--container))}
    .header-main{gap:12px}
    .logo{width:150px;min-width:150px}
    .main-nav{display:none}
    .socials{display:none}
    .hero-grid{grid-template-columns:repeat(2,1fr)}
    .post{height:390px;border-bottom:1px solid #fff}
    .content-row{grid-template-columns:1fr 1fr}
    .content-row .panel:first-child{grid-column:1/-1}
    .lower{grid-template-columns:1fr}
    .lower .panel:last-child{grid-column:auto}
    .footer-grid{grid-template-columns:repeat(3,1fr)}
    .footer-col:last-child{grid-column:1/-1;border-top:1px solid #d5dae0;padding-top:20px}
}

@media(max-width:620px){
    body{font-size:12px}
    .shell{width:100%}
    .header-main{padding:0 10px}
    .logo{width:130px;min-width:130px}
    .header-actions{margin-left:auto}
    .search-form{display:none}
    .login{padding:0 10px}
    .category-bar{height:64px}
    .category-logo-btn{height:48px;padding:0 12px}
    .category-logo-btn img{height:30px}
    .category{padding:0 11px;font-size:11px}
    .hero-grid{grid-template-columns:1fr}
    .post{height:440px;border-right:0}
    .post h1{font-size:24.39px}
    .standings{padding:8px 8px 0}
    .content-row{display:block;margin:8px}
    .content-row .panel{margin-bottom:6px}
    .lower{display:block;margin:8px}
    .news-grid{grid-template-columns:1fr 1fr}
    .video-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr;padding:24px 12px}
    .footer-col{border-right:0}
    .footer-col:first-child,.footer-col:last-child{grid-column:1/-1}
} 

/* ================================================================
   PANEL DE ANALISIS DE DATOS (.ecx-msdata-root)
   Movido acá desde detalle_evento.php para que viva en el CSS
   global del sitio y lo puedan reusar otras páginas.
   ================================================================ */

/* ======================================================================
   MS360 DATA — panel de análisis (clasificación, sectores, comparativas,
   head-to-head, ritmo, matriz, distribución de vueltas).
   Vive acá, en el CSS global del sitio, para que cualquier página que
   embeba este panel (detalle_evento.php, EventCard.php, etc.) comparta
   un único lugar de estilos en vez de tenerlo duplicado.
   Ya NO tiene paleta propia: .ecx-msdata-root define alias locales
   (--bg-0, --text-2, --cyan, etc. -- son los nombres que usa el resto
   de este bloque de CSS) que apuntan a las variables globales de :root
   definidas arriba. Los pocos tokens que el sitio todavía no tenía
   (tiers intermedios de gris, magenta, ámbar) se agregaron a :root
   junto a los que ya existían, con el prefijo --ecx- para distinguirlos.
   Modo día por defecto; el modo noche se arma después redefiniendo
   estos mismos nombres bajo .ecx-msdata-root.ecx-dark, sin tocar el
   resto de esta hoja.
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

.ecx-msdata-root {
  --bg-0: var(--white);
  --bg-1: var(--soft);
  --bg-2: var(--ecx-bg-2);
  --bg-3: var(--ecx-bg-3);
  --panel: var(--white);
  --border: var(--line);
  --border-strong: var(--ecx-border-strong);
  --border-accent: var(--blue2);

  --text-0: var(--text);
  --text-1: var(--ecx-text-1);
  --text-2: var(--ecx-text-2);
  --text-3: var(--muted);

  --cyan: var(--blue2);
  --cyan-dim: var(--blue);
  --magenta: var(--ecx-magenta);
  --amber: var(--ecx-amber);
  --gold: var(--ecx-amber);
  /* --green, --red y --purple NO se redeclaran acá: son el mismo
     nombre que ya existe en :root, así que este panel simplemente
     hereda el verde/rojo/violeta del sitio, sin alias. */

  --radius: 4px;
  --radius-lg: 8px;
  --mono: 'JetBrains Mono', 'Consolas', monospace;
  --hud: 'Roboto Condensed', -apple-system, sans-serif;
  --sans: 'Roboto Condensed', -apple-system, sans-serif;

  box-sizing: border-box;
  color: var(--text-0);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.ecx-msdata-root *, .ecx-msdata-root *::before, .ecx-msdata-root *::after { box-sizing: border-box; }

/* Marco visual del panel principal (NO se aplica al modal de ficha de
   piloto, que vive en su propio .ecx-msdata-root pero a pantalla
   completa -- el overflow:hidden/border-radius acá lo cortaría mal). */
.ecx-panel-frame {
  background: var(--bg-0);
  border-radius: 0;
  padding: 8px;
  position: relative;
}

/* ---------------------------------------------------------------------
   GATE DE LOGIN -- usuario no logueado. La pestaña "Clasificación" NUNCA
   se bloquea (se pinta completa siempre). El resto de las pestañas
   (Comparar, Head to Head, Ritmo, Matriz, etc.) se envuelven en
   .ecx-tab-panel-outer.ecx-locked (clase agregada dinámicamente en JS,
   ver renderActiveTabContent() en detalle_evento.php): el contenido real
   queda desenfocado y sin click detrás, con un cartel invitando a
   iniciar sesión encima.

   La altura del bloque queda acotada (max-height + overflow:hidden) a
   propósito: así el cartel siempre entra en el viewport sin que el
   usuario tenga que scrollear una tabla entera desenfocada para
   encontrarlo -- el "teaser" de contenido se corta ahí. El cartel se
   ancla a 50px del borde superior del contenedor (no centrado), y el
   velo blanco es bien sutil para que la tabla/gráfico desenfocado de
   atrás se note como "teaser".
   --------------------------------------------------------------------- */
.ecx-tab-panel-outer {
  position: relative;
}
.ecx-tab-panel-outer.ecx-locked {
  max-height: 380px;
  min-height: 480px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.ecx-tab-panel-outer.ecx-locked .ecx-tab-panel {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.ecx-lock-overlay {
  display: none;
}
.ecx-tab-panel-outer.ecx-locked .ecx-lock-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 30;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  padding-top: 50px;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.42) 45%, rgba(255,255,255,.6) 100%);
}

.ecx-lock-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-0);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(10, 20, 40, .18);
  padding: 20px 22px 18px;
  text-align: center;
}
.ecx-lock-ico {
  width: 38px; height: 38px; margin: 0 auto 10px;
  border-radius: 999px;
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.ecx-lock-card h3 {
  margin: 0 0 6px;
  font-family: var(--hud);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-0);
  line-height: 1.3;
}
.ecx-lock-card p {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
}
.ecx-lock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  background: var(--text-0);
  color: var(--bg-0);
  border: 1px solid var(--text-0);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--hud);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.ecx-lock-btn:hover { opacity: .85; }
.ecx-lock-btn img { width: 16px; height: 16px; }
.ecx-lock-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-3);
}

.ecx-msdata-root ::selection { background: #cfe0ff; color: #0a1a33; }

.ecx-msdata-root ::-webkit-scrollbar { width: 9px; height: 9px; }
.ecx-msdata-root ::-webkit-scrollbar-track { background: var(--bg-1); }
.ecx-msdata-root ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0; }
.ecx-msdata-root ::-webkit-scrollbar-thumb:hover { background: #9aa7b8; }

.ecx-msdata-root a { color: var(--cyan); }

.ecx-msdata-root button { font-family: inherit; }

.ecx-mono { font-family: var(--mono); }

/* ---------------------------------------------------------------------
   Header / barra superior
   --------------------------------------------------------------------- */
.ecx-app-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  height: var(--header-h);
  padding: 0 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(47,141,255,.08);
}

.ecx-brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--hud);
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 15px;
  white-space: nowrap;
}
.ecx-brand .ecx-dot {
  width: 9px; height: 9px; border-radius: 0;
  background: var(--cyan);
  box-shadow: 0 0 10px 2px var(--cyan);
  animation: ecx-pulse 2.2s ease-in-out infinite;
}
.ecx-brand .ecx-sub {
  font-family: var(--sans); font-weight: 600; font-size: 10px;
  color: var(--text-2); letter-spacing: .12em; text-transform: uppercase;
}
@keyframes ecx-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}

.ecx-header-spacer { flex: 1; }

.ecx-toolbar { display: flex; gap: 8px; align-items: center; }

.ecx-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #2f74e0, #1552c9);
  color: #fff; border: 1px solid #3b9dff;
  border-radius: 0;
  padding: 8px 14px;
  font-weight: 600; font-size: 12.5px;
  cursor: pointer; white-space: nowrap;
  transition: filter .15s, transform .1s;
}
.ecx-btn:hover { filter: brightness(1.12); }
.ecx-btn:active { transform: translateY(1px); }
.ecx-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }

.ecx-btn.ecx-secondary {
  background: var(--bg-3); border: 1px solid var(--border-strong); color: var(--text-1);
}
.ecx-btn.ecx-secondary:hover { background: var(--bg-2); border-color: var(--border-accent); }
.ecx-btn.ecx-secondary.ecx-active { background: var(--cyan); border-color: var(--cyan); color: #fff; }

.ecx-btn.ecx-ghost {
  background: transparent; border: 1px solid transparent; color: var(--text-2);
  padding: 8px 10px;
}
.ecx-btn.ecx-ghost:hover { color: var(--text-0); background: var(--bg-3); }

.ecx-btn.ecx-icon-only { padding: 8px 10px; }

.ecx-btn .ecx-label { display: inline; }
@media (max-width: 720px) {
  .ecx-btn .ecx-label { display: none; }
  .ecx-brand .ecx-sub { display: none; }
}

/* ---------------------------------------------------------------------
   Layout general
   --------------------------------------------------------------------- */
.ecx-app-main {
  width: 100%;
  margin: 0;
  padding: 8px 6px 32px;
}

.ecx-empty-state {
  margin: 60px auto; max-width: 460px; text-align: center;
  color: var(--text-2);
  padding: 30px 20px;
}
.ecx-empty-state .ecx-flag { font-size: 40px; margin-bottom: 10px; }
.ecx-empty-state h2 { font-family: var(--hud); color: var(--text-1); font-size: 16px; letter-spacing: .03em; }
.ecx-empty-state p { font-size: 13px; }

/* ---------------------------------------------------------------------
   Franja "Líder de la sesión"
   --------------------------------------------------------------------- */
.ecx-leader-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #fff8e6, #ffffff) !important;
  border: 1px solid var(--border); border-radius: 0;
  padding: 7px 10px; margin-bottom: 7px;
  position: relative; overflow: hidden;
}
.ecx-leader-strip::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,209,102,.06), transparent 40%);
  pointer-events: none;
}
.ecx-leader-strip .ecx-crown { font-size: 20px; }
.ecx-leader-strip .ecx-who { display: flex; flex-direction: column; min-width: 140px; }
.ecx-leader-strip .ecx-who .ecx-name { font-weight: 700; font-size: 15px; color: var(--gold); }
.ecx-leader-strip .ecx-who .ecx-meta { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.ecx-leader-strip .ecx-time { font-family: var(--mono); font-weight: 700; font-size: 22px; color: var(--gold); }
.ecx-leader-strip .ecx-sectors { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.ecx-leader-strip .ecx-sector-chip {
  display: flex; flex-direction: column; align-items: center;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 0;
  background: var(--bg-2);
}
.ecx-leader-strip .ecx-sector-chip .ecx-lbl { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.ecx-leader-strip .ecx-sector-chip .ecx-val { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text-1); }

/* ---------------------------------------------------------------------
   Contexto de sesión (breadcrumb)
   --------------------------------------------------------------------- */
.ecx-session-context {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 11.5px; color: var(--text-2); margin-bottom: 7px;
}
.ecx-session-context b { color: var(--text-1); }
.ecx-session-context .ecx-sep { color: var(--border-strong); }
.ecx-badge {
  font-family: var(--mono); font-weight: 700; font-size: 10px;
  padding: 2px 8px; border-radius: 0; text-transform: uppercase; letter-spacing: .05em;
}
.ecx-badge.ecx-final { background: rgba(255,79,163,.15); color: var(--magenta); border: 1px solid rgba(255,79,163,.4); }
.ecx-badge.ecx-clasif { background: rgba(34,211,238,.13); color: var(--cyan); border: 1px solid rgba(34,211,238,.35); }
.ecx-badge.ecx-clase { background: rgba(167,139,250,.13); color: var(--purple); border: 1px solid rgba(167,139,250,.35); }
.ecx-cat-logo { height: 22px; width: auto; max-width: 60px; object-fit: contain; border-radius: 0; }

/* Filas clickeables (doble clic abre ficha de piloto) */
tr.ecx-row-clickable { cursor: pointer; }
tr.ecx-row-clickable:hover td.ecx-piloto { color: var(--cyan); }
.ecx-table-dbl-hint { margin: 5px 2px 0; font-size: 10.5px; }

/* ---------------------------------------------------------------------
   Ficha de piloto (modal)
   --------------------------------------------------------------------- */
.ecx-modal.ecx-modal-piloto { max-width: 1040px !important; }
.ecx-piloto-ficha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ecx-piloto-foto {
  width: 64px; height: 64px; border-radius: 0; object-fit: cover;
  opacity: .55; border: 1px solid var(--border-strong);
  filter: saturate(.7);
}
.ecx-piloto-datos { flex: 1; min-width: 180px; }
.ecx-piloto-nombre { font-weight: 700; font-size: 15px; color: var(--text-0); }
.ecx-piloto-meta { font-size: 11px; color: var(--text-2); font-family: var(--mono); margin-top: 2px; }
.ecx-piloto-info-grid { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.ecx-piloto-info-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-1); }
.ecx-piloto-info-item .ecx-lbl { color: var(--text-3); text-transform: uppercase; font-size: 9.5px; letter-spacing: .05em; font-weight: 700; min-width: 60px; }
.ecx-marca-logo { height: 16px; width: auto; max-width: 40px; object-fit: contain; }
.ecx-piloto-mejor { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ecx-piloto-mejor .ecx-caption { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.ecx-piloto-mejor .ecx-time { font-size: 20px; font-weight: 700; color: var(--gold); }

/* ---------------------------------------------------------------------
   Tabs
   --------------------------------------------------------------------- */
.ecx-tabs-bar {
  display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0; margin-bottom: 6px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.ecx-tab-btn {
  flex: 0 0 auto;
  background: var(--bg-1) !important; color: var(--text-2);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 0;
  padding: 5px 10px;
  font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .05em;
  cursor: pointer; white-space: nowrap;
}
.ecx-tab-btn:hover { background: var(--bg-2); color: var(--text-1); }
.ecx-tab-btn.ecx-active { background: #eaf3fb; color: var(--cyan); border-color: var(--border-accent); }

.ecx-tab-panel { display: none; animation: ecx-fadein .18s ease; }
.ecx-tab-panel.ecx-active { display: block; }
@keyframes ecx-fadein { from { opacity: 0; transform: translateY(3px);} to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   Tarjetas / paneles
   --------------------------------------------------------------------- */
.ecx-card {
  background: var(--panel) !important; border: 1px solid var(--border); border-radius: 0;
  padding: 8px; margin-bottom: 7px;
}
.ecx-card h3 {
  margin: 0 0 8px; font-family: var(--hud); font-size: 12px; font-weight: 700;
  color: var(--cyan); text-transform: uppercase; letter-spacing: .07em;
  display: flex; align-items: center; gap: 8px;
}
.ecx-card h3 .ecx-hint { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11px; color: var(--text-3); }

/* ---------------------------------------------------------------------
   Respuesta cruda de la API (debug de sesiones sin jsonlaps)
   --------------------------------------------------------------------- */
.ecx-raw-details { border: 1px solid var(--border); border-radius: 0; margin-bottom: 8px; overflow: hidden; }
.ecx-raw-details + .ecx-raw-details { margin-top: 8px; }
.ecx-raw-details summary {
  cursor: pointer; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--text-1);
  background: var(--bg-2); list-style: none; user-select: none;
}
.ecx-raw-details summary::-webkit-details-marker { display: none; }
.ecx-raw-details summary::before { content: "▶"; display: inline-block; margin-right: 7px; font-size: 9px; color: var(--cyan); transition: transform .12s; }
.ecx-raw-details[open] summary::before { transform: rotate(90deg); }
.ecx-raw-details summary code { font-family: var(--mono); color: var(--cyan); font-size: 11px; }
.ecx-raw-json {
  margin: 0; padding: 10px 12px; background: var(--bg-1); color: var(--text-1);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  max-height: 420px; overflow: auto; white-space: pre; border-top: 1px solid var(--border);
}

.ecx-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ecx-piloto-modal-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.ecx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 860px) {
  .ecx-grid-2, .ecx-grid-3 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Barra global de selección de pilotos (única — reemplaza los pickers de
   chips/botones que había repetidos en cada tab). Vive debajo del líder de
   la sesión y arriba de las tabs: la selección hecha acá alimenta a todos
   los análisis (Comparar, Head to Head, Ritmo, Matriz, Avanzado).
   --------------------------------------------------------------------- */
.ecx-pilot-select-bar {
  background: var(--panel) !important; border: 1px solid var(--border); border-radius: 0;
  padding: 7px 10px; margin-bottom: 7px;
  display: flex; flex-direction: column; gap: 6px;
}
.ecx-psb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ecx-psb-label {
  font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; white-space: nowrap;
}
.ecx-psb-label .ecx-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-2); font-size: 11px; }
.ecx-psb-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.ecx-psb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cyan); border: 1px solid var(--cyan); color: #fff;
  border-radius: 0; padding: 4px 6px 4px 11px; font-size: 12px;
}
.ecx-psb-chip .ecx-num { font-family: var(--mono); color: var(--text-1); opacity: .75; font-size: 10.5px; }
.ecx-psb-chip button {
  background: rgba(255,255,255,.22); border: none; color: #fff; border-radius: 0;
  width: 17px; height: 17px; line-height: 1; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ecx-psb-chip button:hover { background: var(--red); }
.ecx-psb-add { max-width: 320px; }
.ecx-psb-add select { width: 100%; }

/* ---------------------------------------------------------------------
   Posiciones por sector — columnas lado a lado (una por sector)
   --------------------------------------------------------------------- */
.ecx-ps-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ecx-ps-col { border: 1px solid var(--border); border-radius: 0; background: var(--bg-2) !important; }
.ecx-ps-col-head { padding: 6px 8px 5px; border-bottom: 1px solid var(--border); }
.ecx-ps-col-title { font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--cyan); text-transform: uppercase; letter-spacing: .05em; }
.ecx-ps-hint { font-size: 10.5px; margin-top: 4px; }
.ecx-ps-col-diffs { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }
.ecx-ps-diff { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; }
.ecx-ps-diff .ecx-lbl { color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.ecx-ps-diff .ecx-val { font-family: var(--mono); font-weight: 700; }
.ecx-ps-table-wrap { border: none; border-radius: 0; }
.ecx-ps-table-wrap table.ecx-data { min-width: 0; table-layout: fixed; width: 100%; }
.ecx-ps-table-wrap th:nth-child(1), .ecx-ps-table-wrap td:nth-child(1) { width: 24px; }
.ecx-ps-table-wrap th:nth-child(3), .ecx-ps-table-wrap td:nth-child(3) { width: 32px; }
.ecx-ps-table-wrap th:nth-child(4), .ecx-ps-table-wrap td:nth-child(4) { width: 58px; }
.ecx-ps-table-wrap th:nth-child(5), .ecx-ps-table-wrap td:nth-child(5) { width: 52px; }
.ecx-ps-table-wrap td.ecx-ps-name { overflow: hidden; padding-right: 4px; }
.ecx-ps-table-wrap td.ecx-ps-name .ecx-ps-name-text {
  display: block; overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
}
.ecx-ps-gap { color: var(--text-2); }
.ecx-ps-gap-lider { color: var(--text-3); font-style: italic; }
table.ecx-data tbody tr.ecx-ps-row-focus td { background: #dbe9ff; }
table.ecx-data tbody tr.ecx-ps-row-focus td.ecx-piloto { color: var(--text-0); font-weight: 700; }
table.ecx-data tbody tr.ecx-ps-row-focus td.ecx-ps-gap { color: var(--cyan-dim); }

/* ---------------------------------------------------------------------
   Selector de pilotos (chips clickeables) — reemplaza el drag & drop
   --------------------------------------------------------------------- */
.ecx-pilot-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.ecx-pilot-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-3); border: 1px solid var(--border-strong);
  color: var(--text-1); border-radius: 0;
  padding: 5px 11px; font-size: 12px; cursor: pointer;
  transition: all .12s;
}
.ecx-pilot-chip:hover { border-color: var(--cyan); }
.ecx-pilot-chip .ecx-num { font-family: var(--mono); color: var(--text-3); font-size: 10.5px; }
.ecx-pilot-chip.ecx-star { color: var(--gold); }
.ecx-pilot-chip.ecx-star .ecx-num { color: var(--gold); opacity: .7; }
.ecx-pilot-chip.ecx-selected {
  background: var(--cyan); border-color: var(--cyan); color: #fff;
  box-shadow: 0 0 0 1px var(--cyan) inset;
}
.ecx-pilot-chip.ecx-selected.ecx-slot-a { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.ecx-pilot-chip.ecx-selected.ecx-slot-b { background: var(--magenta); border-color: var(--magenta); color: #fff; }

.ecx-field-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 8px; }
.ecx-field {
  display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex: 1;
}
.ecx-field label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

.ecx-msdata-root select, .ecx-msdata-root input[type="text"], .ecx-msdata-root input[type="search"] {
  background: var(--bg-3) !important; border: 1px solid var(--border-strong); border-radius: 0;
  padding: 6px 9px; color: var(--text-0) !important; font-size: 13px; font-family: var(--sans);
  -webkit-appearance: none; appearance: none;
}
.ecx-msdata-root select option {
  background: var(--bg-3) !important; color: var(--text-0) !important;
}
.ecx-msdata-root select:focus, .ecx-msdata-root input:focus { outline: none; border-color: var(--cyan); }

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */
.ecx-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 0; }
table.ecx-data {
  width: 100%; border-collapse: collapse; font-size: 12px; min-width: 480px;
}
table.ecx-data thead th {
  background: var(--bg-2) !important; color: var(--text-2); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 7px; text-align: left; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; white-space: nowrap;
}
table.ecx-data tbody td {
  padding: 4px 7px; border-bottom: 1px solid var(--border); white-space: nowrap;
  background: transparent;
}
table.ecx-data tbody tr { background: var(--bg-1) !important; }
table.ecx-data tbody tr:nth-child(even) { background: var(--bg-2) !important; }
table.ecx-data tbody tr:hover { background: #eef4ff !important; }
table.ecx-data td.ecx-num, table.ecx-data th.ecx-num { font-family: var(--mono); }
table.ecx-data td.ecx-piloto { font-weight: 600; white-space: normal; }
table.ecx-data tbody tr.ecx-row-favorite td.ecx-piloto { color: var(--gold); }

/* Piloto resaltado: en vez de solo teñir el nombre, invertimos toda
   la fila (fondo oscuro / texto claro) -- mismo criterio en todas
   las pestañas de análisis, porque todas arman sus filas con la
   misma clase .ecx-row-selected sobre table.ecx-data. */
table.ecx-data tbody tr.ecx-row-selected,
table.ecx-data tbody tr.ecx-row-selected:nth-child(even),
table.ecx-data tbody tr.ecx-row-selected:hover {
  background: var(--text-0) !important;
}
table.ecx-data tbody tr.ecx-row-selected td {
  color: var(--bg-0);
  border-bottom-color: var(--border-strong);
}
table.ecx-data tbody tr.ecx-row-selected td.ecx-num,
table.ecx-data tbody tr.ecx-row-selected td.ecx-mono {
  color: var(--bg-0);
}
table.ecx-data tbody tr.ecx-row-selected td.ecx-piloto { color: var(--cyan); font-weight: 700; }
table.ecx-data tbody tr.ecx-row-selected td.ecx-piloto::before { content: "●"; font-size: 8px; margin-right: 5px; color: var(--cyan); }
table.ecx-data tbody tr.ecx-row-pole td { background: #fff8e6; }

.ecx-t-best { color: var(--magenta); font-weight: 700; }
.ecx-t-personal { color: var(--green); font-weight: 700; }
.ecx-t-mid { color: var(--amber); }
.ecx-t-slow { color: var(--red); }
.ecx-t-neutral { color: var(--text-1); }
.ecx-diff-pos { color: var(--red); }
.ecx-diff-neg { color: var(--green); }
.ecx-diff-zero { color: var(--amber); }

/* ---------------------------------------------------------------------
   Head to head
   --------------------------------------------------------------------- */
.ecx-h2h-summary { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 4px 0 12px; }
.ecx-h2h-side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 110px; }
.ecx-h2h-side .ecx-name { font-weight: 700; font-size: 13px; }
.ecx-h2h-side .ecx-badge-num {
  /* Hereda forma/tamaño de .badge-nro (2px radius, ancho fijo); acá
     solo se pisa el color de fondo para distinguir piloto A / B. */
  color: #04060a;
}
.ecx-h2h-side.ecx-a .ecx-badge-num { background: var(--cyan); }
.ecx-h2h-side.ecx-b .ecx-badge-num { background: var(--magenta); }
.ecx-h2h-side .ecx-time { font-family: var(--mono); font-weight: 700; font-size: 24px; }
.ecx-h2h-side.ecx-a .ecx-time { color: var(--cyan); }
.ecx-h2h-side.ecx-b .ecx-time { color: var(--magenta); }
.ecx-h2h-side .ecx-caption { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.ecx-h2h-gap {
  font-family: var(--mono); font-size: 16px; font-weight: 700;
  border: 1px solid var(--cyan-dim); border-radius: 0; padding: 8px 16px;
}

.ecx-tug-row { display: grid; grid-template-columns: 36px 1fr 68px; align-items: center; gap: 8px; height: 26px; }
.ecx-tug-label { text-align: right; font-family: var(--mono); font-size: 10px; color: var(--text-2); }
.ecx-tug-track { position: relative; height: 18px; background: var(--bg-3); border-radius: 0; overflow: hidden; }
.ecx-tug-track::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); }
.ecx-tug-bar { position: absolute; top: 0; bottom: 0; border-radius: 0; }
.ecx-tug-bar.ecx-a { background: var(--cyan); right: 50%; }
.ecx-tug-bar.ecx-b { background: var(--magenta); left: 50%; }
.ecx-tug-delta { font-family: var(--mono); font-size: 10.5px; }

.ecx-gauges-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.ecx-gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; }
.ecx-gauge-ring {
  width: 76px; height: 76px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--ring-color, var(--cyan)) calc(var(--pct, 0) * 1%), var(--bg-3) 0);
  position: relative;
}
.ecx-gauge-ring::before {
  content: ""; position: absolute; inset: 7px; border-radius: 0; background: var(--bg-1);
}
.ecx-gauge-ring .ecx-val { position: relative; font-family: var(--mono); font-size: 12px; font-weight: 700; }
.ecx-gauge .ecx-caption { font-size: 9px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; text-align: center; }

.ecx-sw-line { text-align: center; font-size: 12.5px; color: var(--text-1); margin-top: 6px; }
.ecx-sw-line b { color: var(--text-0); }

/* ---------------------------------------------------------------------
   Índice de rendimiento (barras horizontales tipo radar plano)
   --------------------------------------------------------------------- */
.ecx-perf-row { display: grid; grid-template-columns: 130px 1fr 46px; align-items: center; gap: 10px; margin-bottom: 7px; }
.ecx-perf-label { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecx-perf-track { height: 10px; background: var(--bg-3); border-radius: 0; overflow: hidden; }
.ecx-perf-fill { height: 100%; border-radius: 0; }
.ecx-perf-val { font-family: var(--mono); font-size: 11.5px; text-align: right; }

/* ---------------------------------------------------------------------
   Chart containers
   --------------------------------------------------------------------- */
.ecx-chart-box { position: relative; height: 280px; }
.ecx-chart-box.ecx-tall { height: 340px; }
@media (max-width: 600px) {
  .ecx-chart-box { height: 230px; }
  .ecx-chart-box.ecx-tall { height: 280px; }
}

/* ---------------------------------------------------------------------
   Modales / diálogos (Sesiones, Mi equipo)
   --------------------------------------------------------------------- */
.ecx-modal-overlay {
  position: fixed; inset: 0; background: rgba(2,3,6,.72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 14px; z-index: 100; overflow-y: auto;
  backdrop-filter: blur(2px);
}
.ecx-modal-overlay.ecx-hidden { display: none; }
.ecx-hidden { display: none !important; }
.ecx-modal {
  width: 100%; max-width: 620px;
  background: #ffffff !important; border: 1px solid var(--border-accent); border-radius: 0;
  box-shadow: 0 0 40px rgba(7,100,222,.15);
  padding: 10px;
}
.ecx-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ecx-modal-head h2 { font-family: var(--hud); font-size: 15px; margin: 0; color: var(--text-0); letter-spacing: .03em; }
.ecx-modal-close { background: none; border: none; color: var(--text-2); font-size: 20px; cursor: pointer; line-height: 1; }
.ecx-modal-close:hover { color: var(--text-0); }

.ecx-session-list { display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow-y: auto; margin: 8px 0; }
.ecx-session-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 0;
  padding: 6px 9px; cursor: pointer; font-size: 12.5px;
}
.ecx-session-row:hover { border-color: var(--border-accent); }
.ecx-session-row.ecx-checked { border-color: var(--cyan); background: #eaf3fb; }
.ecx-session-row .ecx-s-tipo { font-weight: 700; color: var(--text-0); }
.ecx-session-row .ecx-s-meta { color: var(--text-2); font-size: 11px; margin-left: auto; }
.ecx-session-row-novueltas { opacity: .75; }
.ecx-s-novueltas {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3); border: 1px solid var(--border-strong); border-radius: 0; padding: 1px 6px;
}

.ecx-team-list { display: flex; flex-direction: column; gap: 14px; max-height: 340px; overflow-y: auto; }
.ecx-team-group { display: flex; flex-direction: column; gap: 6px; }
.ecx-team-group-title {
  font-family: var(--hud); font-size: 10.5px; font-weight: 700; color: var(--cyan);
  text-transform: uppercase; letter-spacing: .06em;
  padding-bottom: 3px; border-bottom: 1px solid var(--border);
}
.ecx-team-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 0;
  padding: 6px 9px; font-size: 13px;
}
.ecx-team-row .ecx-star { color: var(--gold); }
.ecx-team-row .ecx-name { flex: 1; font-weight: 600; }
.ecx-team-row button { background: none; border: 1px solid var(--border-strong); color: var(--text-2); border-radius: 0; padding: 4px 8px; cursor: pointer; font-size: 11px; }
.ecx-team-row button:hover { color: var(--red); border-color: var(--red); }

.ecx-search-results { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; margin-top: 8px; }
.ecx-search-result-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 0; cursor: pointer; font-size: 12.5px;
}
.ecx-search-result-row:hover { background: var(--bg-3); }

/* ---------------------------------------------------------------------
   Loading / toast
   --------------------------------------------------------------------- */
.ecx-loading-bar {
  position: fixed; top: 0; left: 0; height: 2px; background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan); z-index: 200; transition: width .25s ease;
}
.ecx-toast-container {
  position: fixed; bottom: 16px; right: 16px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px; max-width: 320px;
}
.ecx-toast {
  background: #ffffff; border: 1px solid var(--border-accent); border-radius: 0;
  padding: 10px 14px; font-size: 12.5px; color: var(--text-1);
  box-shadow: 0 4px 20px rgba(20,23,28,.15);
}
.ecx-toast.ecx-error { border-color: var(--red); color: var(--red); }
.ecx-toast.ecx-success { border-color: var(--green); }

/* ---------------------------------------------------------------------
   Skeleton / spinner
   --------------------------------------------------------------------- */
.ecx-spinner {
  width: 34px; height: 34px; border-radius: 0;
  border: 3px solid var(--border-strong); border-top-color: var(--cyan);
  animation: ecx-spin .8s linear infinite; margin: 30px auto;
}
@keyframes ecx-spin { to { transform: rotate(360deg); } }

.ecx-muted { color: var(--text-2); font-size: 12px; }
.ecx-center { text-align: center; }
.ecx-mt-8 { margin-top: 8px; } .ecx-mt-14 { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* ---------------------------------------------------------------------
   Responsive / mobile
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
  .ecx-leader-strip { gap: 8px; padding: 6px 8px; }
  .ecx-leader-strip .ecx-time { font-size: 18px; }
  .ecx-leader-strip .ecx-sectors { margin-left: 0; width: 100%; }
  .ecx-psb-row { flex-direction: column; align-items: flex-start; }
  .ecx-tab-btn { font-size: 9.5px; padding: 5px 8px; }
  .ecx-card { padding: 6px; }
  table.ecx-data { font-size: 11px; min-width: 380px; }
  .ecx-grid-2, .ecx-grid-3 { grid-template-columns: 1fr; }
  .ecx-ps-columns { grid-template-columns: 1fr; }
  .ecx-h2h-summary { gap: 10px; }
  .ecx-h2h-side .ecx-time { font-size: 18px; }
  .ecx-gauges-row { gap: 8px; }
  .ecx-gauge { width: 72px; }
  .ecx-gauge-ring { width: 60px; height: 60px; }
  .ecx-modal { padding: 8px; max-width: 96vw !important; }
  .ecx-piloto-modal-2col { grid-template-columns: 1fr !important; }
}


/* ---------------------------------------------------------------------
   Dropdown propio (reemplaza <select> nativo) -- el popup de opciones
   de un <select> lo pinta el sistema operativo/navegador, no CSS: por
   más !important que se le ponga a "option", en Chrome/Firefox/Safari
   el popup abierto suele salir con fondo blanco y texto negro sin
   forma confiable de tocarlo. Este widget da control total.
   --------------------------------------------------------------------- */
.ecx-ddown { position: relative; display: inline-block; min-width: 220px; }
.ecx-ddown-btn {
  width: 100%; text-align: left;
  background: var(--bg-3) !important; border: 1px solid var(--border-strong);
  color: var(--text-0) !important; font-size: 13px; font-family: var(--sans);
  padding: 6px 28px 6px 9px; border-radius: 0; cursor: pointer;
  position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecx-ddown-btn::after {
  content: "▾"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  color: var(--text-2); font-size: 10px;
}
.ecx-ddown-btn:hover, .ecx-ddown-btn:focus { border-color: var(--cyan); outline: none; }
.ecx-ddown-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  margin-top: 2px; max-height: 260px; overflow-y: auto;
  background: var(--bg-3) !important; border: 1px solid var(--cyan);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.ecx-ddown-item {
  padding: 6px 9px; font-size: 12.5px; color: var(--text-0) !important;
  background: var(--bg-3) !important; cursor: pointer; white-space: nowrap;
}
.ecx-ddown-item:hover, .ecx-ddown-item.ecx-hl { background: var(--bg-2) !important; color: var(--text-0) !important; }
.ecx-ddown-item.ecx-sel { color: var(--cyan) !important; font-weight: 700; }

/* ================================================================
   PÁGINA DE DETALLE DE EVENTO (detalle_evento.php)
   Movido acá desde el <style> propio de esa página, para que todo
   el CSS del sitio viva en head.php y use las variables de :root
   (nada de hex sueltos). Dos bloques originales, mantenidos en el
   mismo orden en que estaban.
   ================================================================ */

/* ------------------------------------------------------------
   Bloque 1: encabezado unificado (hero + selectores Clase/Sesión
   + botón de análisis).
   ------------------------------------------------------------ */
.evento-hero-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.evento-hero-row .evento-hero-logo { flex: 0 0 auto; }
.evento-hero-row .evento-hero-txt { flex: 0 1 auto; min-width: 0; }

/* Fecha / Lugar / Circuito: ancho fijo a su contenido -- ya no
   compite por crecer, el reparto lo hace justify-content en
   .evento-hero-row. */
.evento-hero-info {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px 22px;
    flex: 0 0 auto;
}
.evento-hero-info .evento-meta-item {
    display: flex; flex-direction: column; gap: 1px;
}
.evento-hero-info .evento-meta-val { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.evento-hero-info .evento-meta-flag { width: 16px; height: 16px; object-fit: contain; border-radius: 2px; }

/* Selectores de Clase / Sesión + botón de análisis */
.evento-hero-selectors {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 10px;
}
.evento-select-group {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 150px;
}
.evento-select-group label {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: inherit; opacity: .75;
}
.evento-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 10px 7px;
    border: 1px solid var(--evt-select-border);
    border-radius: 6px;
    padding: 7px 28px 7px 10px;
    font-size: 11.5px; font-weight: 500; color: var(--evt-select-text);
    min-width: 150px;
    cursor: pointer;
}
.evento-select:focus { outline: none; border-color: var(--evt-accent); box-shadow: 0 0 0 2px rgba(7,100,222,.18); }

.evento-btn-analisis {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--evt-btn-bg); border: 1px solid var(--evt-btn-border);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--evt-select-text); white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.evento-btn-analisis:hover { background: var(--evt-btn-hover-bg); border-color: var(--evt-accent); color: var(--evt-accent); }
.evento-btn-analisis:active { transform: translateY(1px); }
.evento-btn-analisis-ico { font-size: 12px; line-height: 1; }

@media (max-width: 900px) {
    .evento-hero-row { flex-wrap: wrap; }
    .evento-hero-selectors { width: 100%; }
}
@media (max-width: 720px) {
    .evento-hero-info { flex-wrap: wrap; }
    .evento-hero-info .evento-meta-item { flex: 1 1 100%; }
    .evento-select-group { flex: 1 1 140px; min-width: 0; }
    .evento-select { min-width: 0; width: 100%; }
}

/* Sin sidebar: el panel de análisis ocupa todo el ancho del body. */
.evento-body-full { display: block !important; }
.evento-body-full .evento-content { width: 100%; }

#EVX-panel { margin-top: 8px; }
.EVX-loading, .EVX-msg {
    text-align: center;
    padding: 20px 10px;
    color: var(--evt-msg-muted);
    font-size: 12.5px;
}
.EVX-msg.error { color: var(--evt-error); }

/* Fondo oscuro forzado alrededor del panel de análisis, igual que en
   EventCard.php -- evita un borde claro filtrándose desde el CSS
   global del sitio (padding/fondo por default de .evento-content /
   .evento-body, que vive fuera de este archivo). Antes forzaba negro
   (#05070d) -- ahora blanco, modo día, a la espera del toggle dark. */
.evento-content, .evento-body { background: var(--white) !important; }

/* ------------------------------------------------------------
   Bloque 2: legibilidad -- refuerzo pedido para esta página.
   El body global define font-weight:200 para todo el sitio, y
   algunos textos secundarios del hero usan blanco con opacidad
   baja. Acá, SOLO dentro de .evento-detalle (no se toca nada
   global ni --muted), se sube el piso de peso a 400 y se suben un
   poco los grises/opacidades silenciadas para que todo quede
   legible sin dejar de ser "liviano" (nada llega a negrita salvo
   lo que ya era negrita antes).
   ------------------------------------------------------------ */

/* Piso general: nada en esta página queda por debajo de 400,
   aunque el body global esté en 200. */
.evento-detalle{font-weight:400}

/* ------------------------------------------------------------
   Hero -- modo día: el .evento-hero global (más arriba en esta
   misma hoja) es oscuro (background:var(--ink), texto blanco) a
   propósito para todo el sitio. Para esta página, pedido explícito:
   fondo blanco/claro como el resto del sitio (el modo noche se
   arma después), y más compacto en alto -- menos padding, logo un
   poco más grande (15% más que el tamaño base de 46px = ~53px) y
   menos gap entre fila de hero y meta.
   ------------------------------------------------------------ */
.evento-detalle{margin-top:12px}
.evento-hero{
    background:var(--white);
    color:var(--text);
    border:1px solid var(--line);
    border-radius:2px;
    padding:12px 18px;
}
.evento-hero-row{gap:14px}
.evento-hero-logo{width:53px;height:53px}
.evento-hero-serie{color:var(--evt-label);font-weight:700;font-size:10px}
.evento-hero-nombre{font-size:18px;margin:1px 0 6px;font-weight:800;color:var(--text)}
.evento-badge{font-size:10px}
.evento-meta{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.evento-meta-lbl{color:var(--evt-label-soft);font-weight:500;font-size:9px}
.evento-meta-val{font-weight:600;color:var(--text);font-size:13px}
.evento-select-group label{opacity:1;color:var(--evt-label);font-weight:700}

/* Badges de estado (FINALIZADA/EN VIVO/PRÓXIMA): en el resto de esta
   hoja están pensados sobre fondo oscuro (texto pastel + fondo muy
   transparente). Sobre blanco esos mismos colores quedan lavados --
   se oscurece el texto y se deja el fondo tintado bien sutil, con
   color-mix() sobre las mismas variables (--green/--orange/--blue/
   --muted) en vez de hex nuevos. */
.evento-badge-green{color:var(--green);border-color:color-mix(in srgb, var(--green) 35%, transparent);background:color-mix(in srgb, var(--green) 8%, transparent)}
.evento-badge-orange{color:var(--orange);border-color:color-mix(in srgb, var(--orange) 35%, transparent);background:color-mix(in srgb, var(--orange) 8%, transparent)}
.evento-badge-blue{color:var(--blue2);border-color:color-mix(in srgb, var(--blue2) 35%, transparent);background:color-mix(in srgb, var(--blue2) 8%, transparent)}
.evento-badge-gray{color:var(--muted);border-color:color-mix(in srgb, var(--muted) 35%, transparent);background:color-mix(in srgb, var(--muted) 8%, transparent)}

/* Sidebar de clases/sesiones y contadores: usaban var(--muted)
   (#69717d) sin peso propio -> heredaban 200, quedaban muy tenues
   sobre fondo blanco. Se oscurece un poco el gris (--evt-label) y se
   sube el peso. */
.evento-sb-head{color:var(--evt-label);font-weight:700}
.evento-sb-empty{color:var(--evt-label);font-weight:400}
.evento-sb-btn{font-weight:500}
.evento-content-count{color:var(--evt-label);font-weight:400}
.evento-empty{color:var(--evt-label);font-weight:400}

/* Tabla de resultados (clasificación simple): el texto de las celdas
   heredaba el 200 del body -- en una tabla de datos chica (13px) eso
   es difícil de leer. Encabezados y celdas quedan en 400/500. */
.evento-table thead th{color:var(--evt-label)}
.evento-table tbody td{font-weight:400}
.evento-table tbody td.ecx-piloto,
.evento-table tbody td:first-child{font-weight:500}

/* ============================================================
   Estilos de VerSerie.php / VerCalendario.php / VerPiloto.php /
   VerPilotos.php / lower.php -- centralizados acá, mismo criterio
   que ya se venía aplicando (ver notas de detalle_evento.php y
   agenda.php más arriba en este mismo archivo): todo el CSS del
   sitio vive en head.php, ninguna página tiene <style> propio.
   ============================================================ */

/* ---- VerSerie.php ---- */
/* =====================================================================
   VerSerie.php -- estilos propios de esta página.
   Reutiliza los tokens globales definidos en head.php (--blue, --line,
   --soft, --muted, --ink, --radius, --radius-card, Roboto Condensed). Acá solo
   se agregan los componentes que el sitio todavía no tenía: navegador
   de series activo, widgets de próxima/última fecha, tabs de
   campeonato, grid de pilotos y los 4 paneles de estadísticas.
   ===================================================================== */

.vs-wrap{ padding:18px 0 60px; }

/* -- Header de la serie -- */
.vs-head{
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 0 14px;
}
.vs-head-logo{
    width:52px;height:52px;flex-shrink:0;
    border:1px solid var(--line);border-radius:var(--radius-card);
    display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;
}
.vs-head-logo img{width:100%;height:100%;object-fit:contain}
.vs-head-titles{display:flex;flex-direction:column;min-width:0}
.vs-head-nombre{
    font-family:"Roboto Condensed",sans-serif;font-weight:800;font-size:24px;
    text-transform:uppercase;color:var(--ink);line-height:1.05;
}
.vs-head-year{font-size:13px;font-weight:600;color:var(--muted)}

/* -- Subnav de la categoría: Calendario | Pilotos | Equipos | Campeonatos -- */
/* -- Subnav de "más contenido de esta categoría" -- compartido entre
   VerSerie.php / VerCalendario.php / VerPiloto.php / VerPilotos.php,
   ver ms360_category_subnav() más arriba en este mismo archivo. -- */
.ms360-cat-subnav{
    display:flex;gap:4px;flex-wrap:wrap;padding:4px 0 18px;
    border-bottom:1px solid var(--line);margin-bottom:18px;
}
.ms360-cat-subnav-item{
    display:inline-flex;align-items:center;gap:7px;
    font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
    color:var(--muted);text-decoration:none;padding:9px 16px;border-radius:var(--radius);
    transition:background-color .15s ease,color .15s ease;
}
.ms360-cat-subnav-item i{font-size:12px;color:var(--blue)}
a.ms360-cat-subnav-item:hover{background:var(--soft);color:var(--ink)}
.ms360-cat-subnav-item.is-active{background:var(--blue);color:#fff;cursor:default}
.ms360-cat-subnav-item.is-active i{color:#fff}

/* -- Aviso sin datos -- */
.vs-empty{
    padding:26px;text-align:center;color:var(--muted);
    border:1px dashed var(--line);border-radius:var(--radius-card);
}

/* -- Fila de 3 widgets: próxima/última fecha | último ganador | campeonato --
   (el campeonato vuelve acá, mismo diseño rico de podio+tabla del
   .vs-champ-wide pero escalado a este ancho -- ver .vs-champ-narrow
   más abajo). */
.vs-row3{
    display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px;margin-bottom:26px;
}
@media (max-width:900px){ .vs-row3{grid-template-columns:1fr} }

.vs-widget{
    border:1px solid var(--line);border-radius:var(--radius-card);
    background:#fff;overflow:hidden;display:flex;flex-direction:column;
}
.vs-widget-head{
    display:flex;align-items:center;gap:8px;padding:9px 12px;
    background:var(--soft);border-bottom:1px solid var(--line);
}
.vs-widget-status{
    font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
    padding:3px 8px;border-radius:20px;color:#fff;flex-shrink:0;
}
.vs-widget-status--champ{background:var(--blue)}

/* -- Card "próxima/en curso/última carrera" -- mismo .vs-widget que
   sus dos vecinas de fila (mismo ancho/alineación), calcado fiel de
   una referencia visual puntual, escalado al ancho angosto de esta
   card (la referencia es un hero de 2 columnas texto+foto a pantalla
   completa; acá la foto pasa a ser una tira arriba, como el resto de
   las cards del sitio, porque a este ancho no entran las 2 columnas
   lado a lado).

   OJO CON LOS PESOS -- en la referencia el bold pesado (800) es SOLO
   para: el número de fecha, el título del circuito, y los números del
   countdown. Todo lo demás (label de estado, subtítulo, autódromo,
   "comienza en", labels del countdown, "agregar al calendario") es
   peso medio (600-700), no 800 -- antes esta card tenía font-weight:800
   puesto de más en casi todo.

   Mismo límite ya documentado en el PHP: sin trazado de circuito ni
   longitud en metros (no hay ese dato en la DB). */

/* Fondo: bgportrait.png (el mismo de siempre en todo el sitio), capa
   propia detrás de todo, mismo criterio que .vpl-card/.vc-cal-card --
   no una regla aparte sin relación con el resto. */
.vs-widget.vs-nextrace-card{position:relative;background:linear-gradient(150deg,#eef1f5 0%,#dde4ea 100%)}
.vs-widget.vs-nextrace-card::before{
    content:'';
    position:absolute;inset:0;
    z-index:0;
    background:url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    opacity:.14;
    pointer-events:none;
}
.vs-widget.vs-nextrace-card > *{position:relative;z-index:1}

/* Header de ambos widgets de esta fila ("Próxima carrera" / "Última
   carrera") -- ya no llevan foto de tapa, se reemplazó por
   .section-head/.section-title, mismo criterio que ya se usa en el
   widget de campeonato de esta misma fila -- consistente entre las 3
   cards. */
.vs-nextrace-card .section-head{margin:12px 10px 6px;padding:0;height:auto;border-bottom-color:#4a4f57;border-bottom-width:1px}
.vs-nextrace-card .section-title{font-size:13.2px;letter-spacing:.1px;gap:6px;line-height:1.5}

.vs-nr-content{padding:12px 14px 0}

.vs-nr-label{display:flex;align-items:center;gap:7px;font-size:8.5px;font-weight:700;letter-spacing:.8px;color:#3a414a}
.vs-nr-stripes{display:inline-flex;gap:2px;transform:skewX(-15deg)}
.vs-nr-stripes span{width:3px;height:10px;background:var(--red)}
.vs-nr-stripes span:nth-child(2n){background:var(--muted)}

.vs-nr-datebox{display:flex;align-items:flex-end;gap:7px;margin:10px 0}
.vs-nr-date-badge{
    background:var(--ink);color:#fff;
    padding:6px 12px 6px 9px;
    clip-path:polygon(0 0, 100% 0, 88% 100%, 0% 100%);
}
.vs-nr-date-badge b{font-family:"Oxanium",sans-serif;font-size:22px;font-weight:800;line-height:1}
.vs-nr-date-txt{display:flex;flex-direction:column;line-height:1.05;padding-bottom:1px}
.vs-nr-date-txt .mes{font-family:"Roboto Condensed",sans-serif;font-size:14px;font-weight:700;color:var(--blue)}
.vs-nr-date-txt .anio{font-size:11px;font-weight:500;color:var(--muted)}

/* El título del circuito es el elemento más grande/pesado de toda la
   card -- así es en la referencia, no se achica al nivel de los demás
   textos aunque sea una card angosta. */
.vs-nr-titulo{font-family:"Roboto Condensed",sans-serif;font-weight:800;font-size:21px;color:var(--ink);line-height:1.08;margin-bottom:6px}
/* Ciudad, provincia y país -- todo junto en .vs-nr-autodromo (una
   sola línea, al lado de la bandera). Antes esto estaba partido en
   dos líneas separadas (.vs-nr-sub arriba del divisor con
   provincia+país, y .vs-nr-autodromo abajo solo con la ciudad) --
   ahora es una sola línea con los tres datos juntos. */
.vs-nr-divider{border:0;border-top:2px solid var(--red);width:26px;margin:9px 0}
.vs-nr-autodromo{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:var(--ink);padding-bottom:12px}
.vs-nr-autodromo img{height:12px;width:auto;border-radius:2px;flex-shrink:0}

.vs-nr-bar{
    position:relative;overflow:hidden;
    margin:0 10px 10px;
    background:#0d1520;
    border-radius:3px;
    padding:12px 14px;
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.vs-nr-bar::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    opacity:.12;pointer-events:none;
}
.vs-nr-bar > *{position:relative;z-index:1}
.vs-nr-bar-left{display:flex;flex-direction:column;gap:7px}
.vs-nr-bar-label{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:600;letter-spacing:.5px;color:#fff;text-transform:uppercase}
.vs-nr-bar-label i{color:var(--blue2,#4da3ff);font-size:11px}
.vs-nr-countdown{display:flex;align-items:flex-start;gap:11px}
.vs-nr-cd-item{display:flex;flex-direction:column;align-items:center;line-height:1;min-width:18px;position:relative}
.vs-nr-cd-item + .vs-nr-cd-item::before{content:'';position:absolute;left:-6px;top:1px;bottom:6px;width:1px;background:rgba(255,255,255,.2)}
/* Peso bajado de 800 a 600 -- pedido puntual, quedaba muy pesado al
   lado de todo lo demás en 600-700. */
.vs-nr-cd-item b{font-family:"Oxanium",sans-serif;font-size:17px;font-weight:600;color:#fff}
.vs-nr-cd-item span{font-size:6px;font-weight:500;letter-spacing:.2px;color:rgba(255,255,255,.5);text-transform:uppercase;margin-top:3px}

.vs-nr-bar-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.vs-nr-gcal{
    display:flex;align-items:center;gap:5px;
    font-size:7.5px;font-weight:600;letter-spacing:.2px;line-height:1.2;
    color:var(--blue2,#4da3ff);text-decoration:none;text-transform:uppercase;text-align:right;
}
.vs-nr-gcal i{font-size:12px}
.vs-nr-gcal:hover{text-decoration:underline}
.vs-nr-detalles{
    display:inline-flex;align-items:center;gap:4px;
    border:1px solid rgba(255,255,255,.4);color:#fff;
    font-size:8.5px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;
    padding:5px 8px;border-radius:5px;text-decoration:none;white-space:nowrap;
    transition:background-color .15s ease,border-color .15s ease;
}
.vs-nr-detalles:hover{background:rgba(255,255,255,.1);border-color:#fff}

.vs-widget-title{font-size:11px;font-weight:700;color:var(--ink);flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vs-widget-body{padding:10px 12px;display:flex;flex-direction:column;gap:4px;}
.vs-widget-body .row{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.vs-widget-body .row b{color:var(--ink);font-weight:600}
.vs-widget-body .row img{height:14px;width:auto;border-radius:2px}
.vs-widget-foot{padding:10px 12px;border-top:1px solid var(--line)}
.vs-btn{
    display:inline-flex;align-items:center;gap:5px;background:var(--blue);color:#fff;
    font-size:11px;font-weight:700;padding:7px 12px;border-radius:var(--radius);
    text-decoration:none;
}
.vs-btn:hover{background:var(--blue2)}

/* -- Ganadores última carrera -- mismo lenguaje visual que el widget 1
   (.vs-nr-content/.vs-nr-titulo/.vs-nr-divider/.vs-nr-autodromo/
   .vs-nr-label/.vs-nr-stripes -- reusa el MISMO header de rayitas que
   "Próxima carrera", en vez de un pill de otro color; definidos arriba
   junto al widget 1), más las clases propias
   de este widget: la lista de podio por clase (sin tiempo/gap/puntos
   -- no hay ese dato, ver nota grande en el PHP). */

.vs-nr-podio-label{
    display:flex;align-items:center;gap:8px;
    font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);
    margin:10px 0 6px;
}
.vs-nr-podio-label::after{content:'';flex:1;height:1px;background:var(--line)}

.vs-nr-podio{display:flex;flex-direction:column}
.vs-nr-podio-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.vs-nr-podio-row:last-child{border-bottom:0}
.vs-nr-podio-badge{
    flex-shrink:0;
    width:26px;height:26px;
    border-radius:5px;
    background:var(--ink);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:"Roboto Condensed",sans-serif;font-weight:800;font-size:10.5px;
}
.vs-nr-podio-foto{flex-shrink:0;width:26px;height:32px;object-fit:cover;border-radius:3px;background:var(--soft)}
.vs-nr-podio-dorsal{
    flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;box-sizing:border-box;
    background:var(--blue);color:#fff;
    font-family:'JetBrains Mono',monospace;font-weight:800;font-size:10.45px;
    padding:3px 0;border-radius:4px;text-align:center;
}
.vs-nr-podio-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.vs-nr-podio-nombre{font-size:12.65px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-nr-podio-marca-row{display:flex;align-items:center;gap:4px;min-width:0}
.vs-nr-podio-marca-logo{flex-shrink:0;width:13px;height:13px;object-fit:contain}
.vs-nr-podio-marca{font-size:10.35px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-nr-podio-flag{flex-shrink:0;color:var(--red);font-size:13px}

.vs-nr-resultados{padding:12px 0 12px}
.vs-nr-detalles-full{
    display:inline-flex;align-items:center;gap:6px;
    border:1px solid var(--line);color:var(--ink);
    font-size:10px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;
    padding:7px 12px;border-radius:6px;text-decoration:none;
    transition:background-color .15s ease,border-color .15s ease;
}
.vs-nr-detalles-full:hover{background:var(--soft);border-color:var(--ink)}
.vs-nr-detalles-full i{color:var(--red)}

/* -- Campeonato -- calcado fiel de una referencia visual (tabs +
   podio de 3 lado a lado + tabla de 7 columnas), ANCHO COMPLETO (fuera
   de .vs-row3, sección propia .vs-champ-wide). */
.vs-champ-wide{
    border:1px solid var(--line);border-radius:var(--radius-card);
    background:linear-gradient(150deg,#f5f7f9 0%,#e9edf1 100%);
    position:relative;overflow:hidden;margin-bottom:26px;
}
.vs-champ-wide::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    opacity:.22;pointer-events:none;
}
.vs-champ-wide > *{position:relative;z-index:1}

/* Header reemplazado por .section-head/.section-title (mismo patrón
   que ya usa el resto del sitio, ej. "Calendario {Year}" del
   pre-calendario) -- antes era un pill propio de esta sección
   (.vs-champ-wide-pill), ahora consistente con el resto. Solo se le
   agrega padding acá porque .section-head normalmente vive a nivel de
   página (sin padding propio); adentro de esta card con borde sí
   hace falta. */
/* margin (no padding) para el espaciado horizontal -- así el
   border-bottom, que se dibuja sobre el borde de ESTA caja, arranca
   exactamente en el mismo punto que el bloque azul+texto de adentro,
   en vez de extenderse más a la izquierda (con padding el borde ocupa
   todo el ancho de la caja incluyendo el padding; con margin la caja
   en sí se corre, así que el borde corre con ella). Margin más chico
   (16px en vez de los 20px que tenía antes) -- menos espacio muerto
   antes del ícono. */
.vs-champ-wide .section-head{margin:16px 16px 0;padding:0;margin-bottom:8px;border-bottom-color:#4a4f57;border-bottom-width:1px}
.vs-champ-wide .section-title{font-size:20.9px;letter-spacing:.1px;line-height:1.6}

.vs-champw-panel{padding:0 20px 20px}
.vs-champ-genlabel{display:flex;align-items:center;gap:7px;padding:10px 14px 0;font-size:8.5px;font-weight:700;letter-spacing:.8px;color:#3a414a}
.vs-champ-genlabel--wide{padding:18px 0 0;font-size:18px;text-transform:uppercase;color:var(--ink);flex-wrap:wrap}
.vs-champ-genlabel--wide small{flex-basis:100%;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-left:22px}

/* -- Podio de 3, calcado del layout de la referencia: la card del
   medio (1°) queda destacada -- fondo navy, un poco más alta/elevada
   que las otras dos -- mismo truco visual que un podio real. */
.vs-cw-podio{display:grid;grid-template-columns:.8fr 1.4fr .8fr;gap:14px;align-items:end;margin:16px 0}
@media (max-width:760px){ .vs-cw-podio{grid-template-columns:1fr;gap:10px} }

.vs-cw-pcard{
    position:relative;
    background:linear-gradient(150deg,#f2f4f6 0%,#dfe4e9 100%);
    border-radius:12px;
    padding:0 0 14px;overflow:hidden;
    box-shadow:0 4px 14px rgba(15,23,42,.08);
    display:flex;flex-direction:column;
}
/* Textura bgportrait.png en TODA la card, mismo criterio ya probado en
   .vpl-card (::before propio, opacidad independiente del resto del
   contenido, que queda 100% opaco encima gracias a z-index). */
.vs-cw-pcard::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    opacity:.3;pointer-events:none;
}
.vs-cw-pcard > *{position:relative;z-index:1}
.vs-cw-pcard--vacia{background:transparent;border:1px dashed var(--line);box-shadow:none}
.vs-cw-pcard--vacia::before{display:none}
.vs-cw-pcard--1{
    background:#0d1520; /* mismo dark global que el resto de las cards oscuras del sitio -- ya hereda el decorado bgportrait vía .vs-cw-pcard::before, compartido con las cards claras de al lado */
    box-shadow:0 10px 26px rgba(13,31,61,.4);
}
@media (min-width:761px){ .vs-cw-pcard--1{margin-bottom:-14px} }

/* Fila de foto -- retrato de fondo estilo poster (mismo espíritu que
   .vpl-photo): la foto se funde con el gradiente/textura de la card
   con una máscara en el borde izquierdo, en vez de un corte duro.
   Número de posición + flecha van ABSOLUTE encima, como marca de agua
   -- mismo truco que .vpl-bignum. */
.vs-cw-pcard-photorow{position:relative;height:180px;flex-shrink:0}
.vs-cw-pcard--1 .vs-cw-pcard-photorow{height:230px}
.vs-cw-pcard-foto{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;object-position:top center;
    -webkit-mask-image:linear-gradient(100deg, transparent 0%, #000 38%);
    mask-image:linear-gradient(100deg, transparent 0%, #000 38%);
}
.vs-cw-pcard-top{
    position:absolute;top:8px;left:12px;z-index:2;
    display:flex;flex-direction:column;align-items:flex-start;gap:3px;
    pointer-events:none;
}
.vs-cw-pcard-pos{font-family:"Oxanium",sans-serif;font-size:40px;font-weight:800;color:rgba(17,17,17,.55);line-height:1;text-shadow:0 1px 3px rgba(255,255,255,.6)}
.vs-cw-pcard--1 .vs-cw-pcard-pos{font-size:52px;color:rgba(255,255,255,.55);text-shadow:0 2px 6px rgba(0,0,0,.4)}

.vs-cw-var{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:700;pointer-events:auto}
.vs-cw-var--up{color:var(--green)}
.vs-cw-var--down{color:var(--red)}
.vs-cw-var--flat{color:var(--muted)}
.vs-cw-var i{font-size:9px}

.vs-cw-pcard-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px 0}
.vs-cw-pcard-nro{font-size:13px}
.vs-cw-pcard-nombre{font-size:18px;font-weight:800;color:var(--ink);text-transform:uppercase}
.vs-cw-pcard--1 .vs-cw-pcard-nombre{color:#fff}

.vs-cw-pcard-equipo{font-size:13px;color:var(--muted);margin-top:3px;padding:0 16px}
.vs-cw-pcard--1 .vs-cw-pcard-equipo{color:rgba(255,255,255,.65)}

.vs-cw-pcard-marca{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink);text-transform:uppercase;margin-top:10px;padding:0 16px}
.vs-cw-pcard--1 .vs-cw-pcard-marca{color:#fff}
.vs-cw-pcard-marca img{height:18px;width:auto;max-width:26px;object-fit:contain;flex-shrink:0}

.vs-cw-pcard-pts{margin-top:12px;padding:0 16px}
.vs-cw-pcard-pts b{display:block;font-family:"Oxanium",sans-serif;font-size:26px;font-weight:500;color:var(--ink)}
.vs-cw-pcard--1 .vs-cw-pcard-pts b{color:#fff}
.vs-cw-pcard-pts span{font-size:10.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.vs-cw-pcard--1 .vs-cw-pcard-pts span{color:rgba(255,255,255,.55)}

/* -- Tabla del resto de posiciones (4ta en adelante) -- */
.vs-cw-table-wrap{overflow-x:auto;margin-top:8px;border-top:1px solid var(--line)}
.vs-cw-table{width:100%;border-collapse:collapse;font-size:12.5px}
.vs-cw-table thead th{
    text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
    padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.vs-cw-table thead th.right{text-align:right}
.vs-cw-table tbody td{padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.vs-cw-table tbody tr:last-child td{border-bottom:0}
.vs-cw-table td.right{text-align:right}
.vs-cw-td-piloto{font-weight:800;color:var(--ink);text-transform:uppercase}
.vs-cw-td-muted{color:var(--muted)}
.vs-cw-td-logo{height:14px;width:auto;max-width:20px;object-fit:contain;vertical-align:middle;margin-right:5px}
.vs-cw-td-pts{font-weight:800;color:var(--ink)}

.vs-champ-full{padding:10px 14px 14px}
.vs-champ-full--wide{padding:18px 0 0;display:flex;justify-content:center}
.vs-champ-full-btn{
    display:flex;align-items:center;justify-content:center;gap:6px;
    border:1px solid var(--line);color:var(--ink);
    font-size:10px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;
    padding:8px 10px;border-radius:6px;text-decoration:none;
    transition:background-color .15s ease,border-color .15s ease;
}
.vs-champ-full--wide .vs-champ-full-btn{padding:11px 24px;font-size:11px}
.vs-champ-full-btn:hover{background:var(--soft);border-color:var(--ink)}
.vs-champ-full-btn i{color:var(--red)}

/* -- .vs-champ-narrow -- MISMO markup/clases que .vs-champ-wide (el
   PHP genera exactamente lo mismo), viviendo adentro de .vs-row3 en
   vez de ser una sección propia -- estos overrides solo achican
   tamaños/paddings para que el podio de 3 + la tabla entren en el
   ancho angosto de la columna, sin duplicar HTML ni reescribir la
   lógica. La tabla queda con scroll horizontal propio adentro
   (.vs-cw-table-wrap ya tiene overflow-x:auto), no se sacan columnas. */
.vs-champ-narrow{position:relative;background:linear-gradient(150deg,#f5f7f9 0%,#e9edf1 100%)}
.vs-champ-narrow::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    opacity:.22;pointer-events:none;
}
.vs-champ-narrow > *{position:relative;z-index:1}

.vs-champ-narrow .section-head{margin:12px 10px 6px;padding:0;height:auto;border-bottom-color:#4a4f57;border-bottom-width:1px}
.vs-champ-narrow .section-title{font-size:13.2px;letter-spacing:.1px;gap:6px;line-height:1.5}
.vs-champ-narrow .section-title::before{width:3px;height:11px}

.vs-champ-narrow .vs-champw-panel{padding:0 14px 14px}
.vs-champ-narrow .vs-champ-genlabel--wide{padding:12px 0 0;font-size:12px}
.vs-champ-narrow .vs-champ-genlabel--wide small{font-size:7.5px;margin-left:16px}

.vs-champ-narrow .vs-cw-podio{gap:6px;margin:10px 0;grid-template-columns:.8fr 1.4fr .8fr}
.vs-champ-narrow .vs-cw-pcard{padding:0 0 8px;border-radius:8px}
@media (min-width:761px){ .vs-champ-narrow .vs-cw-pcard--1{margin-bottom:-8px} }
.vs-champ-narrow .vs-cw-pcard-pos{font-size:26px}
.vs-champ-narrow .vs-cw-pcard--1 .vs-cw-pcard-pos{font-size:35.7px} /* 34px +5% */
.vs-champ-narrow .vs-cw-var{font-size:8px}
.vs-champ-narrow .vs-cw-pcard--1 .vs-cw-var{font-size:8.4px} /* +5% */
.vs-champ-narrow .vs-cw-pcard-top{top:5px;left:8px}
.vs-champ-narrow .vs-cw-pcard-photorow{height:120px}
.vs-champ-narrow .vs-cw-pcard--1 .vs-cw-pcard-photorow{height:155px}
.vs-champ-narrow .vs-cw-pcard-info{gap:4px;padding:8px 8px 0}
.vs-champ-narrow .vs-cw-pcard-nro{font-size:9.5px;padding:1px 4px}
.vs-champ-narrow .vs-cw-pcard--1 .vs-cw-pcard-nro{font-size:10px} /* +5% */
.vs-champ-narrow .vs-cw-pcard-nombre{font-size:12.5px}
.vs-champ-narrow .vs-cw-pcard--1 .vs-cw-pcard-nombre{font-size:13.1px} /* +5% */
.vs-champ-narrow .vs-cw-pcard-equipo{font-size:8.5px;margin-top:1px;padding:0 8px}
.vs-champ-narrow .vs-cw-pcard--1 .vs-cw-pcard-equipo{font-size:8.9px} /* +5% */
.vs-champ-narrow .vs-cw-pcard-marca{font-size:8.5px;gap:3px;margin-top:5px;padding:0 8px}
.vs-champ-narrow .vs-cw-pcard--1 .vs-cw-pcard-marca{font-size:8.9px} /* +5% */
.vs-champ-narrow .vs-cw-pcard-marca img{height:11px;max-width:15px}
.vs-champ-narrow .vs-cw-pcard-pts{margin-top:6px;padding:0 8px}
.vs-champ-narrow .vs-cw-pcard-pts b{font-size:15px}
.vs-champ-narrow .vs-cw-pcard--1 .vs-cw-pcard-pts b{font-size:15.8px} /* +5% */
.vs-champ-narrow .vs-cw-pcard-pts span{font-size:7px}
.vs-champ-narrow .vs-cw-pcard--1 .vs-cw-pcard-pts span{font-size:7.4px} /* +5% */

.vs-champ-narrow .vs-cw-table{font-size:10px}
.vs-champ-narrow .vs-cw-table thead th{font-size:7.5px;padding:6px 5px}
.vs-champ-narrow .vs-cw-table tbody td{padding:5px 5px}
.vs-champ-narrow .vs-cw-td-logo{height:11px;max-width:15px}

.vs-champ-narrow .vs-champ-full--wide{padding:12px 0 0}
.vs-champ-narrow .vs-champ-full--wide .vs-champ-full-btn{padding:8px 14px;font-size:9.5px}

/* -- Noticias -- */
.vs-news-track{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
.vs-news-track::-webkit-scrollbar{display:none}
.vs-news-card{
    flex:0 0 auto;width:230px;height:300px;border-radius:var(--radius-card);
    overflow:hidden;position:relative;background:#111;color:#fff;scroll-snap-align:start;
}
.vs-news-card img{width:100%;height:100%;object-fit:cover;display:block}
.vs-news-overlay{
    position:absolute;
    inset:auto 0 0 0;
    padding:100px 12px 12px;
    box-sizing:border-box;
    background: linear-gradient(to top,
        #000 0%,
        rgba(0,0,0,.97) 25%,
        rgba(0,0,0,.85) 45%,
        rgba(0,0,0,.55) 65%,
        rgba(0,0,0,.2) 85%,
        rgba(0,0,0,0) 100%);
}
.vs-news-badges{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
/* Badges más chicos que el .badge global (el del hero) -- estas cards
   son mucho más chicas (230x300) que las del hero, el tamaño normal se
   ve desproporcionado acá. Mismo criterio de color que el hero (ver
   vs_renderPilotosClase... digo, hero.php: ms360_badge_class() para la
   categoría principal, "dark" para el resto) -- antes todas quedaban
   hardcodeadas en azul sin importar la categoría real. */
.vs-news-badges .badge{font-size:7.5px;padding:2.5px 6px}
.vs-news-title{font-size:13px;font-weight:700;line-height:1.25;margin-bottom:4px}
.vs-news-desc{font-size:10px;opacity:.8;font-weight:300}

/* -- Pilotos (mismo tamaño y estructura que las cards de calendario) -- */
.vs-drivers-clase{margin-bottom:26px}
.vs-drivers-clase-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid var(--blue)}
.vs-drivers-clase-label{font-size:9px;font-weight:800;text-transform:uppercase;color:#fff;background:var(--blue);padding:3px 9px;border-radius:20px}
/* El grid de cards en sí usa .vpl-grid directo (mismas clases que
   VerPilotos.php, ver vs_renderPilotosClase() más abajo en el
   archivo) -- ya no hace falta .vs-drivers-grid ni .vs-driver-card/
   -hdr/-dorsal/-body/-nombre/-apellido/-meta/-foot, reemplazadas por
   el diseño "poster" compartido (.vpl-*). */
.vs-drivers-full{text-align:center;margin-top:14px}
.vs-drivers-full-btn{
    display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;
    font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;
    padding:11px 26px;border-radius:var(--radius);text-decoration:none;
    transition:background-color .2s ease;
}
.vs-drivers-full-btn:hover{background:var(--blue2)}

/* -- Calendario (tarjetas por fecha) -- */
.vs-cal-section{margin-top:4px}
/* Card del pre-calendario -- MISMO estilo que el calendario completo
   (VerCalendario.php): se reusa .vc-cal-grid/.vc-cal-card y toda su
   familia de clases directo acá (ver head.php, bloque grande con el
   comentario "Card de fecha del calendario"), en vez de mantener una
   copia aparte -- ya no hace falta duplicar CSS ni mantenerlo
   sincronizado a mano entre las dos páginas. La ventana acá es de
   máximo 5 fechas, entra justo en las 5 columnas default de
   .vc-cal-grid. */
.vs-cal-full{text-align:center;margin-top:18px;margin-bottom:26px}
.vs-cal-full-btn{
    display:inline-flex;align-items:center;gap:8.1px;background:var(--blue);color:#fff;
    font-size:12.6px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;
    padding:11.7px 27px;border-radius:var(--radius);text-decoration:none;
    transition:background-color .2s ease;
}
.vs-cal-full-btn:hover{background:var(--blue2)}

/* -- Estadísticas: 4 paneles -- */
.vs-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px}
@media (max-width:1100px){ .vs-stats-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .vs-stats-grid{grid-template-columns:1fr} }

/* -- Panel "Ganadores" -- simplificado tras feedback ("mucha info"):
   se sacó el bloque de "últimos ganadores por clase" (era la parte
   más recargada), queda header + donut + 3 filas de clase + una barra
   oscura de resumen final. El número que se muestra en todos lados es
   GANADORES DIFERENTES por clase (no "victorias del líder", esa
   confusión quedó corregida -- $GAN_totalPorClase, cuenta de pilotos
   distintos que ganaron al menos una vez en esa clase). */
.vs-gan-panel{position:relative;padding-bottom:14px}
.vs-gan-header{display:flex;align-items:center;gap:8px;padding:12px 10px 0}
.vs-gan-titulo{font-family:"Roboto Condensed",sans-serif;font-size:13px;font-weight:800;color:var(--blue);text-transform:uppercase}

.vs-gan-donut{display:flex;flex-direction:column;align-items:center;padding:12px 10px 4px;position:relative}
.vs-gan-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);text-align:center;pointer-events:none}
.vs-gan-center b{display:block;font-family:"Oxanium",sans-serif;font-size:26px;font-weight:500;color:var(--ink)}
.vs-gan-center span{font-size:6.5px;font-weight:700;text-transform:uppercase;color:var(--muted);line-height:1.3}

.vs-gan-clases{display:flex;flex-direction:column;gap:3px;padding:6px 10px 0}
.vs-gan-clase-row{
    position:relative;overflow:hidden;cursor:pointer;
    display:flex;align-items:center;gap:8px;
    border:1px solid var(--line);border-radius:5px;
    padding:6px 8px;
}
/* Fade de izquierda a derecha al hover -- mismo truco ya usado en
   .vp-hud-item (scaleX con transform-origin:left, más liviano que
   animar background-position). Color propio de cada clase vía CSS
   var puesta inline en el style="" de la fila (--row-accent). */
.vs-gan-clase-row::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:var(--row-accent, var(--blue));
    opacity:.2;
    transform:scaleX(0);transform-origin:left;
    transition:transform .3s ease;
    pointer-events:none;
}
.vs-gan-clase-row:hover::before{transform:scaleX(1)}
.vs-gan-clase-row > *{position:relative;z-index:1}
/* Badge trapezoidal -- mismo motivo ya usado en los badges de fecha
   del resto del sitio (corte diagonal en el borde derecho), calcado
   del boceto. */
.vs-gan-clase-badge{
    flex-shrink:0;width:30px;height:27px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-family:"Roboto Condensed",sans-serif;font-weight:800;font-size:12.5px;
    clip-path:polygon(0 0, 100% 0, 82% 100%, 0% 100%);
}
.vs-gan-clase-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.vs-gan-clase-nombre{font-size:11.9px;font-weight:800;color:var(--ink);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-gan-clase-sub{font-size:8.1px;font-weight:600;color:var(--muted);text-transform:uppercase}
.vs-gan-clase-num{flex-shrink:0;text-align:right;line-height:1}
.vs-gan-clase-num b{display:block;font-family:"Oxanium",sans-serif;font-size:26px;font-weight:500}
.vs-gan-clase-num span{font-size:6.9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.vs-gan-clase-trofeo{flex-shrink:0;font-size:15px;color:var(--line)}

/* Barra oscura de resumen final -- total general + 1 columna por
   clase, todo en una franja compacta al pie del panel. */
.vs-gan-resumen{
    position:relative;
    display:flex;flex-wrap:wrap;
    background:#0d1520;border-radius:3px;
    margin:10px 10px 0;overflow:hidden;
}
.vs-gan-resumen::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    opacity:.12;pointer-events:none;
}
.vs-gan-resumen-item{position:relative;z-index:1;
    flex:1 1 0;min-width:52px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:8px 6px;text-align:center;
    border-left:1px solid rgba(255,255,255,.1);
}
.vs-gan-resumen-item:first-child{border-left:0}
.vs-gan-resumen-item .lbl{display:flex;align-items:center;justify-content:center;gap:3px;font-size:7.2px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.vs-gan-resumen-item .lbl i{color:var(--blue2,#4da3ff);font-size:9.6px}
.vs-gan-resumen-item .lbl .dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
/* Valor grande, pero suave -- opacidad baja + menos peso, mismo
   criterio de "número fantasma" que ya se usa en otras partes del
   sitio (.vpl-bignum, .vp-ghost-num) en vez de un número sólido de
   máximo contraste. */
.vs-gan-resumen-item b{display:block;font-family:"Oxanium",sans-serif;font-size:26px;font-weight:500;color:#fff;margin-top:3px}
.vs-gan-resumen-total b{color:#fff}
.vs-gan-resumen-item .sub{font-size:5.5px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* -- Panel "Marcas destacadas" -- mismo lenguaje visual que
   "Ganadores" (header con rayitas, badge de clase trapezoidal
   coloreado), calcado de un boceto puntual: 1°/2°/3°... por clase,
   logo, marca + modelo más ganador, y ganadores + barra de progreso
   coloreada por clase. */
.vs-mrc-panel{padding-bottom:8px}
.vs-mrc-clases{display:flex;flex-direction:column;gap:6px;padding-top:6px}
.vs-mrc-clase-block{padding:0 10px}
.vs-mrc-clase-head{
    position:relative;overflow:hidden;
    display:flex;align-items:center;gap:6px;
    color:#fff;font-family:"Roboto Condensed",sans-serif;font-size:12.6px;font-weight:800;text-transform:uppercase;
    padding:4px 8px;border-radius:4px;margin-bottom:3px;
}
.vs-mrc-clase-head::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    mix-blend-mode:overlay; /* se nota la textura sin lavar el color de fondo -- opacity pura (como estaba antes) mezclaba blanco liso encima y apagaba el verde/azul/rojo */
    opacity:.7;pointer-events:none;
}
.vs-mrc-clase-head > *{position:relative;z-index:1}
.vs-mrc-clase-head .badge{
    display:inline-flex;align-items:center;justify-content:center;
    width:16px;height:16px;border-radius:2px;background:rgba(255,255,255,.25);font-size:9.6px;
}
.vs-mrc-fila{position:relative;overflow:hidden;cursor:pointer;display:flex;align-items:center;gap:7px;padding:3px 0 3px 6px;border-bottom:1px solid var(--line)}
/* Fade de izquierda a derecha al hover -- mismo truco que
   .vs-gan-clase-row (scaleX + transform-origin:left), color propio de
   cada clase vía --row-accent puesta inline. */
.vs-mrc-fila::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:var(--row-accent, var(--blue));
    opacity:.15;
    transform:scaleX(0);transform-origin:left;
    transition:transform .3s ease;
    pointer-events:none;
}
.vs-mrc-fila:hover::before{transform:scaleX(1)}
.vs-mrc-fila > *{position:relative;z-index:1}
.vs-mrc-fila:last-child{border-bottom:0}
.vs-mrc-pos{flex-shrink:0;width:19px;font-size:10.8px;font-weight:700;color:var(--muted)}
.vs-mrc-logo{flex-shrink:0;width:20px;height:20px;object-fit:contain}
.vs-mrc-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.vs-mrc-info .marca{font-size:12px;font-weight:800;color:var(--ink);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-mrc-info .modelo{font-size:9.6px;font-weight:600;color:var(--muted);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-mrc-num{flex-shrink:0;width:76px;text-align:right}
.vs-mrc-num b{display:block;font-family:"Oxanium",sans-serif;font-size:26px;font-weight:500;line-height:1}
.vs-mrc-num span{font-size:8.6px;font-weight:700;letter-spacing:.2px;text-transform:uppercase}
.vs-mrc-num .bar{height:3px;background:var(--soft);border-radius:2px;overflow:hidden;margin-top:2px}
.vs-mrc-num .bar .fill{height:100%;border-radius:2px}

/* -- Panel "Avances en finales" -- nivel "F1 dashboard": rank como
   badge sólido oscuro (no texto suelto), foto grande, delta bien
   grande con fondo oscuro + número en Oxanium a máximo contraste --
   nada de texto chico ambiguo, cada dato pesa visualmente lo que
   comunica. */
.vs-av-panel{padding-bottom:8px}
.vs-av-lista{padding-top:4px}
.vs-av-row{position:relative;overflow:hidden;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid var(--line)}
/* Fade de izquierda a derecha al hover -- mismo truco que
   .vs-gan-clase-row/.vs-mrc-fila. */
.vs-av-row::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:var(--blue);opacity:.08;
    transform:scaleX(0);transform-origin:left;
    transition:transform .3s ease;
    pointer-events:none;
}
.vs-av-row:hover::before{transform:scaleX(1)}
.vs-av-row > *{position:relative;z-index:1}
.vs-av-row:last-child{border-bottom:0}
.vs-av-rank{
    flex-shrink:0;width:24px;height:24px;
    display:flex;align-items:center;justify-content:center;
    background:var(--ink);color:#fff;
    font-family:"Oxanium",sans-serif;font-size:13px;font-weight:800;
    border-radius:3px;
}
.vs-av-thumb{width:38px;height:48px;border-radius:4px;object-fit:cover;object-position:top;background:var(--soft);flex-shrink:0}
/* .vs-av-dorsal reusa el badge global .ms360-dorsal-badge (ver
   head.php, comentario "Badge de dorsal -- estilo ÚNICO y global") --
   acá solo se ajusta el font-size al tamaño de esta fila puntual, el
   resto (ancho fijo 3ch, radius 2px, color) ya lo trae la clase base. */
.vs-av-dorsal{font-size:12px}
.vs-av-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.vs-av-name{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-av-equipo{font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-av-delta{
    display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2px;flex-shrink:0;
    background:#0d1520;
    color:var(--green);font-family:"Oxanium",sans-serif;font-size:26px;font-weight:500;line-height:1;
    padding:5px 18px;border-radius:3px;min-width:70px;
}
/* Flecha y número en spans separados -- antes era un solo nodo de
   texto ("↑" + número pegados), así que el flex-direction:column de
   acá arriba no tenía nada que alinear (una sola línea de texto no se
   "apila"). El carácter Unicode ↑ no comparte la misma métrica
   vertical que los dígitos de Oxanium -- se ajusta con un pequeño
   desplazamiento propio en vez de dejarlo flotando desalineado. */
.vs-av-delta .arrow{position:relative;top:-1px;font-size:.75em}
.vs-av-delta .num{line-height:1}

/* -- Panel "Participación" -- nivel dashboard premium calcado de un
   boceto puntual: título partido en 2 colores, tabs con corte
   trapezoidal, card oscura con 3 KPIs + ícono, y filas Debuts/Retornos
   con ícono circular + acento diagonal. Coherente con el resto del
   sitio: mismo header de rayitas, misma paleta azul/navy, mismo
   Oxanium para los números grandes. */
.vs-wp-panel{padding-bottom:10px}
.vs-wp-titulo-dark{color:var(--ink)}

.vs-wp-tabs{display:flex;padding:12px 10px 0}
.vs-wp-tab{
    flex:1;
    font-family:"Roboto Condensed",sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.2px;
    padding:8px 6px;color:var(--muted);background:var(--soft);
    border:none;border-right:1px solid #fff;cursor:pointer;
    clip-path:polygon(0 0, 100% 0, 94% 100%, 0% 100%);
    margin-right:-6px;
    transition:background-color .15s ease,color .15s ease;
}
.vs-wp-tab:last-child{margin-right:0;clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)}
.vs-wp-tab.active{background:var(--blue);color:#fff;position:relative;z-index:1}

.vs-wp-clasepanel{padding:12px 10px 0}

/* Card oscura de KPIs -- mismo navy que .vs-cw-pcard--1/.vs-av-delta,
   no un color nuevo. */
.vs-wp-kpis{
    display:flex;
    background:#0d1520; /* mismo dark global -- ver .ms360-dark-card */
    border-radius:8px;
    padding:16px 6px 12px;
    position:relative;overflow:hidden;
}
.vs-wp-kpis::before{
    content:'';position:absolute;inset:0;
    background:url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    opacity:.12;pointer-events:none;
}
.vs-wp-kpi{flex:1;text-align:center;position:relative;z-index:1}
.vs-wp-kpi + .vs-wp-kpi{border-left:1px solid rgba(255,255,255,.1)}
.vs-wp-kpi i{font-size:16px;color:var(--blue2,#4da3ff)}
.vs-wp-kpi b{display:block;font-family:"Oxanium",sans-serif;font-size:26px;font-weight:500;color:#fff;line-height:1;margin-top:6px}
.vs-wp-kpi span{display:block;font-size:8.5px;font-weight:700;color:var(--blue2,#4da3ff);text-transform:uppercase;letter-spacing:.3px;margin-top:4px}
.vs-wp-kpi::after{
    content:'';display:block;width:20px;height:2px;background:var(--blue2,#4da3ff);
    border-radius:2px;margin:6px auto 0;
}

.vs-wp-events{display:flex;flex-direction:column;gap:8px;padding:10px 10px 0}
.vs-wp-event{
    position:relative;overflow:hidden;
    display:flex;align-items:center;gap:10px;
    background:var(--soft);border-radius:8px;
    padding:9px 12px;
}
/* Textura de puntitos -- radial-gradient repetido, mismo espíritu
   decorativo del boceto sin necesitar una imagen aparte. */
.vs-wp-event::before{
    content:'';position:absolute;inset:0;
    background-image:radial-gradient(circle, rgba(18,100,216,.12) 1px, transparent 1px);
    background-size:7px 7px;
    -webkit-mask-image:linear-gradient(90deg, transparent 45%, #000 75%);
    mask-image:linear-gradient(90deg, transparent 45%, #000 75%);
    pointer-events:none;
}
/* Acento diagonal a la derecha -- una franja angosta rotada, mismo
   azul que el resto del panel. */
.vs-wp-event::after{
    content:'';position:absolute;top:-20%;right:14px;width:3px;height:140%;
    background:var(--blue2,#4da3ff);border-radius:2px;
    transform:rotate(18deg);
}
.vs-wp-event-icon{
    position:relative;z-index:1;flex-shrink:0;
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--blue);color:#fff;font-size:15px;
    box-shadow:0 0 0 3px #fff, 0 2px 8px rgba(18,100,216,.35);
}
.vs-wp-event-info{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.vs-wp-event-info .lbl{font-family:"Roboto Condensed",sans-serif;font-size:12.5px;font-weight:800;color:var(--ink);text-transform:uppercase}
.vs-wp-event-info .sub{font-size:9px;font-weight:600;color:var(--muted);text-transform:uppercase}
.vs-wp-event .val{position:relative;z-index:1;flex-shrink:0;font-family:"Oxanium",sans-serif;font-size:26px;font-weight:500;font-style:italic;color:var(--blue)}

/* -- Modal genérico (detalle de ganador / marca / avance / participación) -- */
.vs-modal-overlay{position:fixed;inset:0;background:rgba(10,14,20,.55);z-index:9998;display:none;}
.vs-modal-overlay.open{display:block}
.vs-modal{position:fixed;z-index:9999;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(420px,92vw);max-height:80vh;overflow:auto;background:#fff;border-radius:var(--radius-card);
    display:none;}
.vs-modal.open{display:block}
.vs-modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.vs-modal-head h4{margin:0;font-size:13px;font-weight:800;color:var(--ink)}
.vs-modal-close{background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;line-height:1}
.vs-modal-body{padding:12px 14px;font-size:12px;color:var(--ink)}
.vs-modal-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line)}
.vs-modal-item:last-child{border-bottom:0}
.vs-modal-item img{width:28px;height:36px;object-fit:cover;border-radius:2px;background:var(--soft)}

/* ---- VerCalendario.php ---- */
/* =====================================================================
   VerCalendario.php -- estilos propios de esta página. Mismos tokens
   globales de head.php que usa VerSerie.php (--blue, --line, --soft,
   --muted, --ink, --radius, --radius-card, Roboto Condensed); prefijo vc- para
   no chocar con las clases vs-* de VerSerie.php.
   ===================================================================== */

.vc-wrap{ padding:18px 0 60px; }

.vc-back{
    display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
    color:var(--muted);padding:6px 0;margin-bottom:6px;
}
.vc-back:hover{color:var(--blue)}

.vc-head{
    display:flex;align-items:center;gap:14px;padding:6px 0 14px;flex-wrap:wrap;
}
.vc-head-logo{
    width:52px;height:52px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--radius-card);
    display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;
}
.vc-head-logo img{width:100%;height:100%;object-fit:contain}
.vc-head-titles{display:flex;flex-direction:column;min-width:0}
.vc-head-nombre{font-family:"Roboto Condensed",sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;color:var(--ink);line-height:1.05}
.vc-head-sub{font-size:12px;font-weight:600;color:var(--muted)}

/* -- Selector de año -- */
.vc-years{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.vc-year-btn{
    font-size:12px;font-weight:700;padding:7px 14px;border-radius:var(--radius);
    border:1px solid var(--line);color:var(--ink);background:#fff;text-decoration:none;
}
.vc-year-btn:hover{background:var(--soft)}
.vc-year-btn.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

/* -- Leyenda de estados -- */
.vc-legend{display:flex;gap:16px;align-items:center;padding:10px 0 4px;flex-wrap:wrap}
.vc-legend-item{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--muted)}
.vc-legend-swatch{width:18px;height:5px;border-radius:3px;background:var(--line);flex-shrink:0}
.vc-legend-swatch.pasada{background:#000}
.vc-legend-swatch.actual{background:var(--green)}
.vc-legend-swatch.futura{background:var(--cyan)}

/* -- Grid de tarjetas (mismo diseño que el pre-calendario de VerSerie) -- */
.vc-cal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px}
@media (max-width:1300px){ .vc-cal-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:1000px){ .vc-cal-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .vc-cal-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .vc-cal-grid{grid-template-columns:1fr} }

/* Card de fecha del calendario -- rediseño 1:1 sobre una referencia
   visual puntual (no una interpretación libre). Dos cosas de esa
   referencia NO están: el trazado del circuito (silueta con la curva
   marcada) y la longitud en metros -- no hay ese dato en la DB
   (confirmado), así que esta card simplemente no los muestra, en vez
   de inventar un trazado falso.

   Radius: máximo 2px en todo el bloque (a propósito, ver cada regla
   más abajo) -- excepto .vc-cal-logo-badge, que es un círculo real
   (50%), no una esquina redondeada cualquiera, así que no cuenta.

   position:relative + ::before para el fondo (bgportrait.png). */
.vc-cal-card{
    position:relative;
    border-radius:2px;
    background:#fff;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    scroll-margin-top:80px;
    box-shadow:0 2px 8px rgba(15,23,42,.08);
    border:2px solid var(--line); /* color real por estado, ver .vc-cal-pasada/actual/futura -- no un borde plano */
    transition:box-shadow .3s ease, transform .3s ease;
}
.vc-cal-card:hover{box-shadow:0 12px 24px rgba(15,23,42,.16);transform:translateY(-2px)}
.vc-cal-pasada{border-color:#000}
.vc-cal-actual{border-color:var(--green)}
.vc-cal-futura{border-color:var(--cyan)}

/* Fondo real: la imagen mezclada con un lavado blanco EN LA MISMA
   capa (linear-gradient + url en un solo background), no dos capas
   apiladas -- la versión anterior tenía el ::before con la imagen
   Y ADEMÁS un .vc-cal-body{background:#fff} sólido encima cubriendo
   TODO el cuerpo (título, fecha, ganadores -- básicamente toda la
   card salvo la franja de la foto de tapa, que también es opaca) --
   entre las dos capas opacas no quedaba ni un pixel visible de la
   imagen. Acá se ve la imagen en TODA la card, con un lavado blanco
   parejo (55%) para que el texto oscuro se siga leyendo. */
.vc-cal-card::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    background:
        linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
        url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    pointer-events:none;
}
.vc-cal-card > *{position:relative;z-index:1}

.vc-cal-hdr{position:relative;height:96px;background:#111;overflow:hidden}
.vc-cal-cover{width:100%;height:100%;object-fit:cover;display:block}
/* Degradado blanco desde la izquierda -- para que la fecha grande se
   lea siempre, sea cual sea la foto de fondo de esa fecha en
   particular. */
.vc-cal-hdr::before{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.8) 32%, rgba(255,255,255,0) 62%);
    pointer-events:none;
}
.vc-cal-date-big{position:absolute;top:10px;left:12px;line-height:.85}
.vc-cal-date-big b{display:block;font-family:"Oxanium",sans-serif;font-size:30px;font-weight:800;color:var(--ink)}
.vc-cal-date-big span{display:block;font-family:"Roboto Condensed",sans-serif;font-size:12px;font-weight:800;color:var(--red);letter-spacing:.3px;margin-top:1px}
.vc-cal-logo-badge{
    position:absolute;top:8px;right:8px;
    width:26px;height:26px;border-radius:50%; /* círculo real, no cuenta como "radius" a sacar */
    overflow:hidden;border:2px solid #fff;background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.vc-cal-logo-badge img{width:100%;height:100%;object-fit:contain}

.vc-cal-body{padding:10px 12px 4px;display:flex;flex-direction:column;flex:1}
.vc-cal-titulo{font-family:"Roboto Condensed",sans-serif;font-weight:800;font-size:13.5px;color:var(--ink);line-height:1.15}
.vc-cal-fecha-txt{font-size:10px;font-weight:600;color:var(--muted);margin-top:1px}
.vc-cal-divider{border:0;border-top:2px solid var(--red);width:28px;margin:6px 0}
.vc-cal-circuito-txt{font-size:9.5px;font-weight:600;color:#3a414a;margin-bottom:2px}

.vc-cal-destacados-label{
    display:flex;align-items:center;gap:6px;
    font-size:7.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
    margin:8px 0 6px;
}
.vc-cal-destacados-label::after{content:'';flex:1;height:1px;background:var(--line)}

.vc-cal-wins{display:flex;flex-direction:column}
.vc-cal-win{
    display:flex;align-items:center;gap:6px;
    padding:5px 0;
    border-bottom:1px solid var(--line);
}
.vc-cal-win:last-child{border-bottom:0}
/* Badge de clase -- ahora es un badge real (fondo + radio), no texto
   suelto como antes -- calcado del formato de referencia. Solo se
   imprime si sesCls > 0 (ver PHP) -- una categoría de clase única
   (clase=0) no tiene nada que distinguir "por clase", así que esa fila
   va directo al ganador sin badge. */
.vc-cal-win__clase{
    flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;
    background:var(--ink);color:#fff;
    font-family:"Roboto Condensed",sans-serif;font-weight:800;font-size:11px;
    border-radius:2px;
}
.vc-cal-win__dorsal{
    background:var(--ink);
    font-size:10.5px;
}
/* Invitados en azul, titulares (y sin distinción, tipo=3) en negro --
   mismo criterio de color que ya usa el resto del sitio para separar
   estas dos categorías. */
.vc-cal-win__dorsal.is-invitado{background:var(--blue)}
.vc-cal-win__foto{width:24px;height:30px;object-fit:cover;border-radius:2px;flex-shrink:0;background:var(--soft)}
/* Nombre + marca/modelo apilados -- antes solo había nombre en una
   línea; el formato de referencia trae una segunda línea gris chica
   con marca/modelo debajo. */
.vc-cal-win__nombrewrap{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.vc-cal-win__nombre{font-family:"Roboto Condensed",sans-serif;font-weight:700;font-size:11px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-cal-win__marca{font-size:9px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.vc-cal-foot{padding:8px 12px 12px}
.vc-btn{
    display:inline-flex;align-items:center;gap:5px;
    background:#fff;color:var(--ink);
    border:1.5px solid var(--ink);
    font-family:"Roboto Condensed",sans-serif;font-size:9.5px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;
    padding:6px 10px;border-radius:2px;text-decoration:none;
    transition:background-color .15s ease, color .15s ease;
}
.vc-btn:hover{background:var(--ink);color:#fff}

.vc-empty{padding:26px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-card);margin-top:14px}

/* ---- VerPiloto.php ---- */

/* =====================================================================
   VerPiloto.php -- "F1 Dashboard", en versión light. Mismo concepto de
   panel de telemetría (tipografía monoespaciada para datos, acento de
   color por marca, HUD de stats, tabla de desempeño) pero manteniendo
   la paleta clara del resto del sitio en vez de dark mode -- queda
   pendiente para más adelante armar una variante dark (azul oscuro)
   como alternativa, no como reemplazo de esta.
   Import de la monoespaciada: el resto del sitio ya la referencia en
   head.php (badge-nro) sin traerla explícita -- acá sí la pedimos para
   asegurar que cargue en esta página.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap');

:root{
    --vp-accent: <?= $AccentColor ?? '#1264d8' ?>;
    --vp-bg: #f7f9fb;
    --vp-bg2: #eaeef3;
    --vp-page: #eef1f5;
    --vp-panel: #f9fafc;
    --vp-panel2: #ffffff;
    --vp-line: #d6dbe2;
    --vp-line-strong: #c1c8d1;
    --vp-text: #12151c;
    --vp-dim: #69717d;
}
/* fondo de página gris muy suave -- pisa el body blanco de head.php
   nada más para esta página, para que el hero y el panel se sientan
   como superficies elevadas en vez de blanco sobre blanco */
body{background:var(--vp-page)}
.vp-mono{font-family:'JetBrains Mono','Consolas',monospace}

.vp-wrap{padding:0 0 60px}

/* -- Volver -- */
.vp-back{
    display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
    color:var(--vp-dim);padding:16px 0 0;text-transform:uppercase;letter-spacing:.5px;
}
.vp-back:hover{color:var(--vp-accent)}

/* -- Fila superior: Volver a la izquierda, Más pilotos + selector a la derecha -- */
.vp-toprow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px}
.vp-toprow-right{display:flex;align-items:center;gap:10px;padding-top:16px;flex-wrap:wrap}
.vp-mas-pilotos{
    display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
    color:var(--vp-accent);text-transform:uppercase;letter-spacing:.5px;text-decoration:none;
}
.vp-mas-pilotos:hover{text-decoration:underline}

/* -- Dropdown propio (reemplaza <select> nativo): usado tanto para
   "cambiar de piloto" como para el selector de rival del Head to
   Head -- un <option> nativo no puede llevar badge de color ni logo,
   por eso es un dropdown armado a mano. -- */
.vp-dd{position:relative}
.vp-dd-toggle{
    font-family:"Roboto Condensed",sans-serif;font-size:11.5px;font-weight:600;color:var(--vp-text);
    background:#fff;border:1px solid var(--vp-line-strong);border-radius:6px;padding:6px 10px;min-width:200px;
    display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left;width:100%;
}
.vp-dd-toggle:hover{border-color:var(--vp-accent)}
.vp-dd-toggle::after{content:"";margin-left:auto;border:4px solid transparent;border-top-color:var(--vp-dim);margin-top:2px;flex-shrink:0}
.vp-dd-placeholder{color:var(--vp-dim)}
.vp-dd-menu{
    position:absolute;top:calc(100% + 4px);left:0;z-index:40;background:#fff;
    border:1px solid var(--vp-line-strong);border-radius:8px;box-shadow:0 10px 30px rgba(15,23,42,.15);
    max-height:280px;overflow-y:auto;min-width:230px;display:none;padding:4px;
}
.vp-dd.open .vp-dd-menu{display:block}
.vp-dd-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;}
.vp-dd-item:hover{background:var(--vp-bg2)}
.vp-dd-badge{font-size:10px}
.vp-dd-logo{width:22px;height:22px;object-fit:contain;flex-shrink:0;border-radius:3px}
.vp-dd-nombre{font-size:11.5px;font-weight:600;color:var(--vp-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* -- HERO full-bleed -- */
.vp-hero{
    position:relative;overflow:hidden;margin-top:14px;border-radius:14px;
    background:
        radial-gradient(circle at 14% 20%, color-mix(in srgb, var(--vp-accent) 10%, transparent) 0%, transparent 45%),
        linear-gradient(135deg, var(--vp-bg) 0%, var(--vp-bg2) 100%);
    border:1px solid var(--vp-line);
    box-shadow:0 6px 26px rgba(15,23,42,.09);
}
/* patrón de líneas finas tipo HUD -- gris suave pero que se note,
   como pedían (antes casi no se veía sobre blanco) */
.vp-hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:repeating-linear-gradient(115deg, rgba(18,21,28,.05) 0 1px, transparent 1px 34px);
}
.vp-hero-topbar{
    height:5px;width:100%;
    background:linear-gradient(90deg, var(--vp-accent), transparent 70%);
}
.vp-hero-inner{position:relative;padding:30px 34px 0;display:grid;grid-template-columns:1fr 220px;gap:30px;align-items:start}
@media (max-width:1000px){ .vp-hero-inner{grid-template-columns:1fr;text-align:center} }

/* dorsal fantasma gigante de fondo -- relleno gris muy claro en vez
   del contorno blanco que usaba la versión dark */
.vp-ghost-num{
    position:absolute;right:-10px;top:-40px;font-size:min(320px,26vw);font-weight:800;
    font-family:"Oxanium",sans-serif;color:rgba(18,21,28,.06);
    line-height:1;user-select:none;pointer-events:none;z-index:0;
}

/* identidad */
.vp-id{position:relative;z-index:1;padding-top:6px}
.vp-id-dorsal{
    font-size:20px;
    background:var(--vp-accent);color:#0b0d14;
    letter-spacing:1px;margin-bottom:14px;
    box-shadow:0 6px 16px color-mix(in srgb, var(--vp-accent) 45%, transparent);
}
.vp-id-nombre{font-size:14px;font-weight:600;color:var(--vp-dim);letter-spacing:.5px;text-transform:uppercase}
.vp-id-apellido{
    font-family:"Roboto Condensed",sans-serif;font-size:44px;font-weight:800;
    text-transform:uppercase;color:var(--vp-text);line-height:.95;letter-spacing:-.5px;margin-bottom:16px;
}

.vp-id-row{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:16px}
@media (max-width:1000px){ .vp-id-row{justify-content:center} }
.vp-id-block{display:flex;align-items:center;gap:9px}
.vp-id-block img{width:24px;height:24px;object-fit:contain;border-radius:4px;flex-shrink:0}
.vp-id-block .vp-cityprov-flag{width:24px;height:24px;border-radius:50%;background-size:cover;background-position:center;border:1px solid var(--vp-line-strong);flex-shrink:0}
.vp-id-block-txt b{display:block;font-size:12.5px;font-weight:700;color:var(--vp-text)}
.vp-id-block-txt span{display:block;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--vp-dim)}

.vp-crew{display:flex;flex-wrap:wrap;gap:22px}
@media (max-width:1000px){ .vp-crew{justify-content:center} }
.vp-crew-item span{display:block;font-size:8.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--vp-dim);margin-bottom:2px}
.vp-crew-item b{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--vp-text)}

/* -- Compañeros de equipo (hueco central del header) -- */
.vp-mates{margin-top:16px}
@media (max-width:1000px){ .vp-mates{text-align:center} }
.vp-mates-label{display:block;font-size:8.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--vp-dim);margin-bottom:8px}
.vp-mates-list{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:1000px){ .vp-mates-list{justify-content:center} }
.vp-mates-item{
    display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:20px;
    background:#fff;border:1px solid var(--vp-line-strong);text-decoration:none;
    transition:border-color .15s ease,background-color .15s ease;
}
.vp-mates-item:hover{border-color:var(--vp-accent);background:var(--vp-bg2)}
.vp-mates-dorsal{
    display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 5px;
    background:#0d6efd;color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:800;
    border-radius:4px;flex-shrink:0;
}
.vp-mates-nombre{font-size:11px;font-weight:700;color:var(--vp-text);white-space:nowrap}




/* foto grande recortada */
.vp-foto{position:relative;z-index:1;justify-self:end;width:220px;height:247px;border-radius:10px;overflow:hidden;
    clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);
    background-image:url('https://metasport360.com/assets/images/bgportrait.png');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    box-shadow:0 14px 34px rgba(15,23,42,.16), inset 0 0 0 1px var(--vp-line-strong);
    display:flex;align-items:flex-start;justify-content:center; 
}




@media (max-width:1000px){ .vp-foto{justify-self:center;clip-path:none;border-radius:14px} }
.vp-foto img{width:100%;height:auto;max-width:100%;display:block}
.vp-foto::after{
    content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%, rgba(15,23,42,.16) 100%);
}

/* -- HUD stats strip -- */
.vp-hud{position:relative;z-index:1;display:grid;grid-template-columns:repeat(8,1fr);margin-top:30px;background:#0d1520;overflow:hidden}
@media (max-width:1000px){ .vp-hud{grid-template-columns:repeat(4,1fr)} }
@media (max-width:560px){ .vp-hud{grid-template-columns:repeat(2,1fr)} }
.vp-hud::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    opacity:.12;pointer-events:none;
}
.vp-hud-item{
    position:relative;
    display:block;
    overflow:hidden;
    padding:16px 14px;
    border-right:1px solid rgba(255,255,255,.12);
    text-align:center;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}
.vp-hud-item:last-child{border-right:0}
/* Fade de izquierda a derecha al hacer hover -- todo el div, no solo
   el texto. scaleX con transform-origin:left en vez de animar
   background-position, más liviano para el navegador. */
.vp-hud-item::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--vp-accent);
    opacity:.18;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s ease;
    z-index:0;
    pointer-events:none;
}
.vp-hud-item:hover::before{transform:scaleX(1)}
.vp-hud-item > *{position:relative;z-index:1}
.vp-hud-label{display:flex;align-items:center;justify-content:center;gap:5px;font-size:8.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}
.vp-hud-label i{color:var(--vp-accent);font-size:10px}
.vp-hud-val{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:800;color:#fff;line-height:1}
.vp-hud-val.pos{color:var(--green)}
.vp-hud-val.neg{color:var(--red)}
.vp-hud-sub{margin-top:4px;font-size:8.5px;font-weight:600;color:rgba(255,255,255,.45)}

/* -- Panel de desempeño -- */
.vp-perf{position:relative;margin-top:20px;background:var(--vp-panel);border:1px solid var(--vp-line);border-radius:14px;padding:24px 26px 28px;overflow:hidden;box-shadow:0 4px 20px rgba(15,23,42,.08)}
.vp-perf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--vp-accent),transparent)}
.vp-perf-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.vp-perf-title{font-family:"Roboto Condensed",sans-serif;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--vp-text);display:flex;align-items:center;gap:9px}
.vp-perf-title i{color:var(--vp-accent)}
.vp-perf-legend{display:flex;gap:14px;font-size:9px;font-weight:700;color:var(--vp-dim);text-transform:uppercase}
.vp-perf-legend span{display:inline-flex;align-items:center;gap:5px}
.vp-perf-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}

.vp-perf-table{width:100%;border-collapse:collapse;font-size:11.5px;font-family:'JetBrains Mono',monospace}
.vp-perf-table th{
    text-align:center;font-family:"Roboto Condensed",sans-serif;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
    color:var(--vp-dim);padding:9px 6px;border-bottom:1px solid var(--vp-line-strong);white-space:nowrap;
}
.vp-perf-table td{text-align:center;padding:9px 6px;border-bottom:1px solid var(--vp-line);color:var(--vp-text);font-weight:600}
.vp-perf-table tbody tr{transition:background-color .15s ease}
.vp-perf-table tbody tr:hover{background:rgba(15,23,42,.025)}
.vp-perf-table tr.vp-best-race{background:color-mix(in srgb, var(--vp-accent) 8%, transparent)}
.vp-perf-table tr.vp-best-race td:first-child{box-shadow:inset 3px 0 0 var(--vp-accent)}
.vp-perf-fecha{color:var(--vp-dim);font-weight:600}
.vp-pos-pill{display:inline-flex;min-width:26px;justify-content:center;padding:3px 7px;border-radius:4px;background:var(--soft, #f4f6f8);font-weight:800;color:var(--vp-text)}
.vp-pos-pill.p1{background:#d4af37;color:#1a1200;box-shadow:0 0 10px rgba(212,175,55,.4)}
.vp-pos-pill.p2{background:#9aa5b1;color:#12151a;box-shadow:0 0 8px rgba(154,165,177,.3)}
.vp-pos-pill.p3{background:#b06a3a;color:#180b02;box-shadow:0 0 8px rgba(176,106,58,.35)}
.vp-avance-up{color:var(--green);font-weight:800}
.vp-avance-down{color:var(--red);font-weight:800}
.vp-grilla-btn{
    font-family:"Roboto Condensed",sans-serif;font-size:9px;font-weight:800;color:var(--vp-accent);
    border:1px solid var(--vp-accent);border-radius:4px;padding:4px 9px;cursor:pointer;background:none;
    text-transform:uppercase;letter-spacing:.3px;transition:background-color .15s ease,color .15s ease;
    display:inline-block;text-decoration:none;
}
.vp-grilla-btn:hover{background:var(--vp-accent);color:#0b0d14}

/* -- Modal de grilla -- */
.vp-grilla-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);z-index:9998;display:none;align-items:center;justify-content:center}
.vp-grilla-overlay.open{display:flex}
.vp-grilla-box{background:var(--vp-panel2);border:1px solid var(--vp-line-strong);border-radius:12px;width:min(360px,90vw);max-height:80vh;overflow:auto;padding:18px;box-shadow:0 20px 50px rgba(15,23,42,.22)}
.vp-grilla-close{float:right;background:none;border:none;font-size:20px;color:var(--vp-dim);cursor:pointer;line-height:1}
.vp-grilla-close:hover{color:var(--vp-text)}
.vp-grilla-item{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--vp-line)}
.vp-grilla-item.actual{background:color-mix(in srgb, var(--vp-accent) 12%, transparent);border-radius:5px}
.vp-grilla-pos{width:24px;height:24px;border-radius:50%;background:var(--soft, #f4f6f8);color:var(--vp-text);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vp-grilla-short{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--vp-text)}

/* -- Chart -- */
.vp-chart-wrap{margin-top:22px;padding-top:18px;border-top:1px solid var(--vp-line)}
.vp-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:720px){ .vp-chart-grid{grid-template-columns:1fr;gap:20px} }
.vp-chart-col{min-width:0}
.vp-chart-title{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--vp-dim);margin-bottom:10px}

.vp-empty{padding:30px;text-align:center;color:var(--vp-dim);border:1px dashed var(--vp-line-strong);border-radius:14px;margin-top:14px;background:var(--vp-panel)}

/* -- Selector de rival (Head to Head en vivo) -- entre el hero y las
   "Evoluciones". No recarga la página: al elegir un rival dispara un
   fetch() a VerPilotoRival.php y el JS inyecta el resultado acá mismo
   (resumen) y como dataset extra en los charts de más abajo. -- */
.vp-vs{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    margin-top:14px;padding:14px 18px;background:var(--vp-panel);
    border:1px solid var(--vp-line);border-radius:12px;box-shadow:0 2px 14px rgba(15,23,42,.05);
}
.vp-vs-label{display:flex;align-items:center;gap:7px;font-family:"Roboto Condensed",sans-serif;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--vp-text);flex-shrink:0}
.vp-vs-label i{color:var(--vp-accent)}
.vp-vs select{
    font-family:"Roboto Condensed",sans-serif;font-size:12px;font-weight:600;color:var(--vp-text);
    background:#fff;border:1px solid var(--vp-line-strong);border-radius:6px;padding:7px 10px;min-width:210px;
}
.vp-vs-clear{display:none;font-size:10.5px;font-weight:700;color:var(--vp-dim);text-transform:uppercase;letter-spacing:.3px;cursor:pointer;background:none;border:none;padding:0}
.vp-vs-clear:hover{color:var(--vp-accent)}
.vp-vs-clear.show{display:inline-block}

/* resumen inyectado por JS al elegir rival */
.vp-vs-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px}
.vp-vs-chip{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;border-radius:20px;background:var(--vp-bg2)}
.vp-vs-chip img{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0;background:var(--vp-bg2)}
.vp-vs-chip b{font-weight:800;color:var(--vp-text)}
.vp-vs-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.vp-vs-score{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px}
.vp-vs-sep{width:1px;height:22px;background:var(--vp-line-strong);flex-shrink:0}
.vp-vs-duelos{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vp-vs-duelos-label{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--vp-dim)}
.vp-vs-loading{font-size:11px;font-weight:600;color:var(--vp-dim)}
.vp-vs-error{font-size:11px;font-weight:700;color:#dc2626}

/* ---- VerPilotos.php ---- */
/* =====================================================================
   VerPilotos.php -- estilos propios. Mismos tokens de head.php y misma
   estructura de card que ya usan VerSerie.php / VerCalendario.php
   (prefijo vpl- para no chocar con las clases vs-/vc-/vp- de las otras
   páginas).
   ===================================================================== */
.vpl-wrap{padding:18px 0 60px}
.vpl-back{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--muted);padding:6px 0;margin-bottom:6px}
.vpl-back:hover{color:var(--blue)}

.vpl-head{display:flex;align-items:center;gap:14px;padding:6px 0 14px;flex-wrap:wrap}
.vpl-head-logo{width:52px;height:52px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--radius-card);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.vpl-head-logo img{width:100%;height:100%;object-fit:contain}
.vpl-head-titles{display:flex;flex-direction:column;min-width:0}
.vpl-head-nombre{font-family:"Roboto Condensed",sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;color:var(--ink);line-height:1.05}
.vpl-head-sub{font-size:12px;font-weight:600;color:var(--muted)}

.vpl-clases{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.vpl-clase-btn{font-size:12px;font-weight:700;padding:7px 14px;border-radius:var(--radius);border:1px solid var(--line);color:var(--ink);background:#fff;text-decoration:none}
.vpl-clase-btn:hover{background:var(--soft)}
.vpl-clase-btn.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

.vpl-years{display:flex;gap:6px;flex-wrap:wrap}
.vpl-year-btn{font-size:12px;font-weight:700;padding:7px 14px;border-radius:var(--radius);border:1px solid var(--line);color:var(--ink);background:#fff;text-decoration:none}
.vpl-year-btn:hover{background:var(--soft)}
.vpl-year-btn.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

.vpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
@media (max-width:1200px){ .vpl-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .vpl-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .vpl-grid{grid-template-columns:1fr} }

/* Cards estilo "poster" -- retrato del piloto a página completa, dorsal
   gigante de fondo, nombre grande, marca/equipo, y una franja de stats
   de campeonato abajo (rank/puntos/podios/victorias -- ver
   $statsByDorsal en VerPilotos.php, sale del mismo Master-{Serie}.json
   que usa el widget de campeonato de VerSerie.php).

   Toda la card es un solo <a> (sin botón "Ver piloto" aparte, a
   diferencia del diseño anterior) -- container-type:inline-size para
   que el número de fondo y los textos escalen con el ANCHO REAL de la
   card (cqw) en vez de con el viewport (vw): así se ven proporcionados
   sea cual sea la cantidad de columnas que le toque en cada
   breakpoint, sin tener que pisar cada tamaño a mano por media query. */
.vpl-card{
    position:relative;
    display:block;
    /* Otros -50px sobre el ancho típico de card (~300px en la grilla
       de 3-4 columnas): era 1/1 (~300px de alto), ahora más ancha que
       alta (~250px de alto). Igual que antes, escala con el ancho real
       de cada card (container query), el -50px es aproximado, no un
       valor fijo en todos los breakpoints. */
    aspect-ratio:6/5;
    border-radius:2px; /* no var(--radius-card) -- esa es global (8px), compartida por otros componentes; acá se pisa puntual, solo para esta card */
    overflow:hidden;
    background:linear-gradient(135deg,#e4e6e9,#c9cdd3);
    text-decoration:none;
    container-type:inline-size;
    box-shadow:0 1px 3px rgba(0,0,0,.08);
    transition:box-shadow .25s ease, transform .25s ease;
}
.vpl-card:hover{box-shadow:0 12px 28px rgba(0,0,0,.24);transform:translateY(-3px)}

/* Fondo de marca -- ::before en vez de background-image directo en
   .vpl-card, para poder bajarle la opacidad SOLO a la imagen (0.7) sin
   afectar el resto de la card (foto, textos, franja de stats), que
   quedan 100% opacos por encima (z-index 1/2/3/4, todos > 0). */
.vpl-card::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    background:url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    opacity:.7;
}

.vpl-bignum{
    position:absolute;
    top:3%;
    left:5%;
    font-family:"Oxanium",sans-serif;
    font-weight:800;
    font-size:clamp(36px,28cqw,110px);
    line-height:1;
    color:rgba(17,17,17,.24); /* -10% de transparencia sobre el .14 anterior */
    letter-spacing:-2px;
    z-index:1;
    pointer-events:none;
}

.vpl-photo{position:absolute;inset:0;z-index:2}
.vpl-photo img{
    position:absolute;
    right:-30px; /* +30px más allá del borde derecho, se esconde hacia la derecha -- se recorta contra .vpl-card{overflow:hidden}, a propósito */
    bottom:0;
    height:83.8%; /* +10% sobre el 76.2% anterior */
    width:auto;
    max-width:none;
    object-fit:contain;
    object-position:bottom right;
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.18));
}

.vpl-info{
    position:absolute;
    left:0;right:0;
    top:16%;
    z-index:3;
    padding-left:6%;
    margin-top:50px; /* corrido hacia abajo -- deja ver más del número grande de fondo arriba */
}
.vpl-name{display:flex;flex-direction:column;line-height:.98;margin-bottom:10px}
.vpl-name-first{
    font-family:"Roboto Condensed",sans-serif;
    font-weight:600;
    font-size:clamp(11px,4.2cqw,15px);
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#2b2f36;
    max-width:64%;
    padding-right:8%;
    box-sizing:border-box;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.vpl-name-last{
    font-family:"Roboto Condensed",sans-serif;
    font-weight:800;
    font-size:clamp(16px,7.6cqw,27px);
    text-transform:uppercase;
    color:#111;
    letter-spacing:.2px;
    width:100%; /* ancho total -- a diferencia del resto (nombre, marca, equipo), no se limita al 64% para no pisar la foto */
    padding-right:8%;
    box-sizing:border-box;
    overflow-wrap:break-word;
}

.vpl-brand{display:flex;align-items:center;gap:6px;margin-bottom:8px;max-width:64%;padding-right:8%;box-sizing:border-box}
.vpl-brand img{width:32px;height:32px;object-fit:contain;flex-shrink:0} /* al doble del 16px original */
.vpl-brand span{font-size:clamp(8px,2.6cqw,10.5px);font-weight:700;color:#3a3f46;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.vpl-team{
    font-size:clamp(8px,2.6cqw,10.5px);
    font-weight:700;
    color:#3a3f46;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding-top:8px;
    padding-right:8%;
    box-sizing:border-box;
    max-width:64%;
    border-top:1px solid rgba(0,0,0,.18);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.vpl-stats{
    position:absolute;
    left:0;right:0;bottom:0;
    z-index:4;
    overflow:hidden;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#0d1520; /* mismo dark global que el resto del sitio, ver .vp-hud/.vs-nr-bar/etc -- antes era rgba(10,10,12,.86), un negro semitransparente aparte */
    padding:8px 4px 9px;
}
/* Esta barra es z-index:4, arriba de TODO lo demás de la card poster
   (incluida la textura de .vpl-card::before, que queda tapada acá
   abajo) -- por eso necesita su propia capa de bgportrait, no hereda
   nada del padre. Opacidad más alta que en otras cards (.18 en vez de
   .12) porque acá pidieron específicamente que se note el efecto. */
.vpl-stats::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:url('https://metasport360.com/assets/images/bgportrait.png') center/cover no-repeat;
    opacity:.18;pointer-events:none;
}
.vpl-stat{position:relative;z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    text-align:center;
    border-right:1px solid rgba(255,255,255,.16);
}
.vpl-stat:last-child{border-right:0}
.vpl-stat .lbl{font-size:clamp(8px,1.9cqw,10.5px);font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.6)}
.vpl-stat .val{font-family:"Oxanium",sans-serif;font-size:clamp(13px,5cqw,20px);font-weight:500;color:#fff;line-height:1.15}

/* Fallback para navegadores sin soporte de container queries (cqw) --
   si el navegador no entiende container-type, TODA declaración que use
   cqw queda inválida (no cae al resto del clamp, se ignora entera), así
   que hace falta repisar tamaños fijos razonables acá. */
@supports not (container-type: inline-size) {
    .vpl-bignum{font-size:64px}
    .vpl-name-first{font-size:12px}
    .vpl-name-last{font-size:20px}
    .vpl-brand span,.vpl-team{font-size:9.5px}
    .vpl-stat .lbl{font-size:9.5px}
    .vpl-stat .val{font-size:16px}
}

.vpl-empty{padding:26px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-card);margin-top:14px}

/* ================= VerEquipos.php / VerEquipo.php ================= */
.veq-grid{column-count:3;column-gap:14px;margin-top:14px}
@media (max-width:1100px){ .veq-grid{column-count:2} }
@media (max-width:640px){ .veq-grid{column-count:1} }

.veq-card{
    display:inline-block;
    width:100%;
    vertical-align:top;
    break-inside:avoid;
    margin-bottom:14px;
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    background:#fff;
    text-decoration:none;
    overflow:hidden;
    transition:box-shadow .2s ease, transform .2s ease;
}
.veq-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.1);transform:translateY(-2px)}
.veq-card-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--ink)}
.veq-card-icon{width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.veq-card-titulos{display:flex;flex-direction:column;min-width:0}
.veq-card-nombre{font-family:"Roboto Condensed",sans-serif;font-weight:600;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.veq-card-sub{font-size:10.5px;color:#b8bcc4;font-weight:600}
.veq-card-roster{padding:10px 14px 12px;display:flex;flex-direction:column;gap:6px}
.veq-roster-grupo-titulo{font-family:"Roboto Condensed",sans-serif;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:6px}
.veq-roster-grupo-titulo:first-child{margin-top:0}
.veq-roster-item{display:flex;flex-direction:row;align-items:center;font-size:11.5px;background:var(--soft);border-radius:8px;overflow:hidden}
/* Retrato -- ahora un cuadrado chico a la IZQUIERDA de la fila (antes
   ocupaba el 100% del ancho arriba de la mini-card en grilla de 3
   columnas). Tamaño FIJO (56x56) con overflow:hidden -- lo que sobra
   del retrato original queda "escondido" (recortado), no deformado.
   El recorte real (y el cacheo) lo sigue haciendo phpThumb del lado
   del server (w/h/zc=1 + a=t, ver el <img> en VerEquipos.php) --
   object-position acá es solo un respaldo por si algún retrato ya
   cacheado en otro tamaño no calza exacto. */
.veq-roster-avatar{position:relative;width:64px;height:76px;background:#fff;color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;flex-shrink:0;align-self:stretch}
.veq-roster-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.veq-roster-info{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:6px 10px;min-width:0;flex:1}
.veq-roster-top{display:flex;align-items:center;gap:6px;min-width:0}
.veq-roster-dorsal{flex-shrink:0}
.veq-roster-nombre{font-size:13px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.veq-roster-loc,.veq-roster-auto{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.veq-roster-loc i,.veq-roster-auto i{flex-shrink:0;font-size:9.5px;color:var(--blue)}
.veq-roster-mas{font-size:10.5px;color:var(--muted);font-weight:700;text-align:center;padding-top:2px}

/* Ficha de equipo (VerEquipo.php) -- reusa .vpl-head/.vpl-grid/.vpl-card
   (mismos poster de VerPilotos.php/VerSerie.php), solo agrega el ícono
   circular en vez del logo de categoría (acá no hay una sola
   categoría -- el equipo puede correr en varias). */
.veq-ficha-icon{width:52px;height:52px;flex-shrink:0;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px}
.veq-grupo{margin-bottom:8px}

/* ================= VerMapa.php -- distribución geográfica ================= */
.vgm-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px;align-items:start}
@media (max-width:900px){ .vgm-wrap{grid-template-columns:1fr} }

.vgm-tabla-col{border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:#fff}
.vgm-tabla{width:100%;border-collapse:collapse;font-size:12px}
.vgm-tabla thead th{
    text-align:left;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
    color:var(--muted);
    background:var(--soft);
    padding:9px 14px;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
}
.vgm-th-num{text-align:right !important}
.vgm-tabla td{padding:7px 14px;border-bottom:1px solid var(--line)}
.vgm-tabla tbody tr:last-child td{border-bottom:0}

/* Fila de provincia -- clickeable, hace de acordeón para las ciudades
   que le siguen (si no, con 24 provincias + todas sus ciudades
   desplegadas de una, la tabla se va altísima). Colapsada por
   default. */
.vgm-fila-provincia{cursor:pointer;user-select:none}
.vgm-fila-provincia td{font-weight:800;color:var(--ink);background:#fafbfc}
.vgm-fila-provincia td:first-child{display:flex;align-items:center;gap:8px}
.vgm-fila-provincia .vgm-th-num{font-family:'JetBrains Mono',monospace}
.vgm-fila-provincia:hover td{background:var(--soft)}
.vgm-prov-logo{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.vgm-prov-chevron{
    margin-left:auto;
    flex-shrink:0;
    font-size:10px;
    color:var(--muted);
    transition:transform .18s ease;
}
.vgm-fila-provincia.is-open .vgm-prov-chevron{transform:rotate(180deg)}

.vgm-fila-ciudad{display:none} /* JS agrega/saca .is-visible según el acordeón */
.vgm-fila-ciudad.is-visible{display:table-row}
.vgm-fila-ciudad td{padding-left:28px;color:var(--muted);font-size:11.5px}
.vgm-fila-ciudad td:first-child{font-weight:700;color:var(--ink)} /* más peso al nombre de la localidad */
.vgm-fila-ciudad .vgm-th-num{font-family:'JetBrains Mono',monospace}
/* Solo las ciudades que sí tienen marker en el mapa (geocodificadas)
   se ven clickeables -- las que todavía no se geocodificaron (o
   Nominatim no las encontró) quedan con el cursor normal, sin
   afordance de click, porque clickearlas no haría nada. */
.vgm-fila-ciudad.is-clickeable{cursor:pointer}
.vgm-fila-ciudad.is-clickeable:hover td{background:var(--soft)}
.vgm-ciudad-pin{color:var(--blue);font-size:9px;margin-left:4px;opacity:.7}

.vgm-mapa-col{position:sticky;top:80px}
.vgm-mapa-card{border:1px solid var(--line);border-radius:var(--radius-card);background:#fff;padding:14px}

/* Mapa Leaflet -- alto fijo (Leaflet necesita un contenedor con
   dimensiones reales, no puede autoajustarse a "el contenido"). */
.vgm-leaflet{width:100%;height:560px;border-radius:var(--radius);overflow:hidden;background:var(--soft)}

/* Pin custom (L.divIcon) -- círculo con el retrato del piloto de
   fondo, en vez del pin default de Leaflet. */
.vgm-pin{background:transparent;border:0}
.vgm-pin-foto{
    width:36px;
    height:36px;
    border-radius:50%;
    border:2.5px solid #fff;
    box-shadow:0 2px 6px rgba(0,0,0,.35);
    background-color:var(--soft);
    background-size:cover;
    background-position:center top;
    cursor:pointer;
    transition:box-shadow .3s ease;
}
/* Pulso breve cuando se llega al pin desde un click en la tabla --
   para que quede claro cuál es "el" piloto entre varios pines
   cercanos. */
.vgm-pin-foto.is-highlighted{
    animation:vgm-pulso 1.8s ease-out;
}
@keyframes vgm-pulso{
    0%   { box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 0 0 rgba(18,100,216,.6); }
    70%  { box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 0 14px rgba(18,100,216,0); }
    100% { box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 0 0 rgba(18,100,216,0); }
}
/* Clúster (varios pilotos agrupados) -- pisa el estilo default del
   plugin para que combine con la paleta del sitio en vez del
   amarillo/verde/naranja default de Leaflet.markercluster. */
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background-color:rgba(18,100,216,.25)}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{
    background-color:var(--blue);
    color:#fff;
    font-family:'JetBrains Mono',monospace;
    font-weight:700;
}

.vgm-nota{
    display:flex;
    align-items:flex-start;
    gap:6px;
    font-size:10.5px;
    color:var(--muted);
    margin:12px 2px 0;
    line-height:1.4;
}
.vgm-sin-match{
    display:flex;
    align-items:flex-start;
    gap:6px;
    font-size:11px;
    color:var(--muted);
    background:var(--soft);
    border:1px dashed var(--line);
    border-radius:var(--radius);
    padding:10px 12px;
    margin-top:14px;
}

/* ---- lower.php (panel de Más noticias / Últimos Videos del home) ---- */
/* ── Bloque "Autor" sobre cada card (logo + nombre + "hace X") ── */
.MS360-Youtube-BoxAutorMS {
    display: flex;
    align-items: center;
    max-height: 25px;
    line-height: 1;
    font-size: 10px;
    flex-wrap: nowrap;
    overflow: hidden;
    color: #fff;
    margin-bottom: 4px;
}
.MS360-Youtube-BoxAutorMS-Img {
    border-radius: 2px;
    padding: 1px;
    margin-right: 6px;
    display: flex;
    align-items: center;
    height: 25px;
    width: 25px;
    color: inherit;
}
.MS360-Youtube-BoxAutorMS-Img img{height:25px;width:25px;display:block}
.MS360-Youtube-CardOverlay-SVG img{width:30px;height:30px}
.MS360-Youtube-BoxAutorMS-Nombre span{font-weight:var(--w-tag-medium);color:#ccc}
.MS360-Youtube-BoxAutorMS-Nombre strong{
    font-weight:var(--w-tag-medium);
    color:#ccc;
    margin-right:20px;
}

/* ── Layout: 1 video grande (más protagonismo) + grilla 2x2 de 4
   miniaturas -- ambos bloques ocupan el mismo alto exacto (altura fija
   del contenedor, en vez del truco de padding-bottom por card, que no
   garantiza que 1 card grande y una grilla de 4 midan lo mismo). ── */
.MS360-Youtube-Content{display:flex;gap:6px;flex-wrap:nowrap;height:320px}
.MS360-Youtube-LatestVideo{flex:0 0 calc(50% - 3px);height:100%}
.MS360-Youtube-Thumbnails{
    flex:0 0 calc(50% - 3px);
    height:100%;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(2,1fr);
    gap:6px;
}

/* ── Skeleton (mientras el fetch() de más abajo no resolvió) --
   mismo reparto 55/45 que el contenido real, para que no haya salto
   de layout cuando se reemplaza por las cards de YouTube. ── */
.ms360-yt-skeleton{display:flex;gap:6px;height:100%}
.ms360-yt-skeleton-main{flex:0 0 calc(50% - 3px)}
.ms360-yt-skeleton-grid{
    flex:0 0 calc(50% - 3px);
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(2,1fr);
    gap:6px;
}

/* ── Card ── */
.MS360-Youtube-Card{
    position:relative;
    cursor:pointer;
    overflow:hidden;
    border-radius:2px;
}
.MS360-Youtube-CardImg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transition:opacity .25s ease;
}
.MS360-Youtube-Card:hover .MS360-Youtube-CardImg{opacity:.82}
.MS360-Youtube-CardOverlay{
    position:absolute;
    bottom:0;
    width:100%;
    background:rgba(0,0,0,.8);
    color:#fff;
    padding:5px;
    box-sizing:border-box;
}
.MS360-Youtube-PlayIcon{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:42px;
    color:#fff;
    text-shadow:0 0 10px rgba(0,0,0,.7);
    pointer-events:none;
    opacity:.9;
    transition:opacity .25s ease;
}
.MS360-Youtube-Card:hover .MS360-Youtube-PlayIcon{opacity:1}
.MS360-Youtube-CardOverlay h5{
    margin:0;
    font-family:"Roboto Condensed",sans-serif;
    font-weight:var(--w-tag-semibold);
    font-size:14px;
    color:#fff;
}
.MS360-Youtube-Thumbnails h5{font-size:10px}

/* ── Modal de reproducción ── */
.MS360-Youtube-Modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    justify-content:center;
    align-items:center;
    z-index:9999;
}
.MS360-Youtube-ModalContent{
    position:relative;
    width:90%;
    max-width:900px;
}
.MS360-Youtube-Modal iframe{
    width:100%;
    height:50vw;
    max-height:506px;
    border:0;
}
.MS360-Youtube-ModalClose{
    position:absolute;
    top:-30px;
    right:0;
    font-size:26px;
    color:#fff;
    cursor:pointer;
    opacity:.8;
    transition:opacity .2s ease;
}
.MS360-Youtube-ModalClose:hover{opacity:1}

/* ── Responsive móvil: scroll horizontal ── */
@media (max-width:768px){
    .MS360-Youtube-Content{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory}
    .MS360-Youtube-LatestVideo,.MS360-Youtube-Thumbnail{flex:0 0 280px;scroll-snap-align:start}
    .MS360-Youtube-Thumbnails{display:flex;flex-wrap:nowrap;gap:6px}
    .MS360-Youtube-CardOverlay h5,.MS360-Youtube-Thumbnails h5{font-size:11px}
}
/* ---- vercampeonato.php ---- */
.vrk-wrap{padding:18px 0 60px}
.vrk-back{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--muted);padding:6px 0;margin-bottom:6px}
.vrk-back:hover{color:var(--blue)}

.vrk-head{display:flex;align-items:center;gap:14px;padding:6px 0 14px;flex-wrap:wrap}
.vrk-head-logo{width:52px;height:52px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--radius-card);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.vrk-head-logo img{width:100%;height:100%;object-fit:contain}
.vrk-head-titles{display:flex;flex-direction:column;min-width:0}
.vrk-head-nombre{font-family:"Roboto Condensed",sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;color:var(--ink);line-height:1.05}
.vrk-head-sub{font-size:12px;font-weight:600;color:var(--muted)}

.vrk-clases{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.vrk-clase-btn{font-size:12px;font-weight:700;padding:7px 14px;border-radius:var(--radius);border:1px solid var(--line);color:var(--ink);background:#fff;text-decoration:none}
.vrk-clase-btn:hover{background:var(--soft)}
.vrk-clase-btn.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

.vrk-years{display:flex;gap:6px;flex-wrap:wrap}
.vrk-year-btn{font-size:12px;font-weight:700;padding:7px 14px;border-radius:var(--radius);border:1px solid var(--line);color:var(--ink);background:#fff;text-decoration:none}
.vrk-year-btn:hover{background:var(--soft)}
.vrk-year-btn.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

.vrk-empty{padding:26px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-card);margin-top:14px}

.vrk-table{width:100%;border-collapse:collapse;font-size:13px}
.vrk-panel-scroll{overflow-x:auto}
.vrk-table th{
    text-align:left;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
    color:var(--muted);padding:10px 12px;border-bottom:2px solid var(--line);white-space:nowrap;
}
.vrk-table td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle;white-space:nowrap}
.vrk-table tbody tr:hover{background:var(--soft)}

.vrk-pos-pill{
    display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;
    border-radius:6px;background:var(--soft);font-weight:800;font-size:12px;color:var(--ink);
}
.vrk-pos-pill.p1{background:#d4af37;color:#fff}
.vrk-pos-pill.p2{background:#9aa5b1;color:#fff}
.vrk-pos-pill.p3{background:#b06a3a;color:#fff}

/* -- Celdas clickeables enteras (Nombre/Equipo/Fecha) -- el <a> pasa
   a ocupar toda la celda (padding propio, td queda en 0), así el
   hover cubre el rectángulo completo en vez de solo el texto. Sin
   subrayado -- el tooltip (data-tooltip, mismo mecanismo genérico de
   script360.php que ya usan los botones de categoría) es la señal de
   que es clickeable, no el subrayado. -- */
.vrk-nombre-cell, .vrk-equipo-cell, .vrk-fecha-td{padding:0 !important}
.vrk-cell-link{
    display:block;padding:9px 12px;color:inherit;text-decoration:none;
    transition:background-color .15s ease;
}
.vrk-cell-link:hover{background:#a9cdff}
.vrk-cell-plain{display:block;padding:9px 12px}

.vrk-nombre-cell{font-weight:700;color:var(--ink)}
.vrk-marca-cell{color:var(--ink);font-size:12px;font-weight:600}
.vrk-equipo-cell{color:var(--muted);font-size:12px}
.vrk-pts-cell{font-weight:800;color:var(--blue2);white-space:nowrap}
.vrk-logo-cell{width:34px}
.vrk-logo-cell img{height:20px;width:auto;max-width:32px;object-fit:contain}

/* -- Desglose por fecha -- */
.vrk-fecha-th{text-align:center}
.vrk-fecha-td{text-align:center;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700}
.vrk-fecha-td .vrk-cell-link,
.vrk-fecha-td .vrk-cell-plain{text-align:center}
.vrk-fecha-vacia{display:block;padding:9px 12px;color:var(--line);font-weight:400}






                /* --------------------------------------------------------
                   BannerAdsShow -- antes vivía fuera de <main class="shell">
                   por eso pegaba borde a borde (edge-to-edge) mientras el
                   resto del contenido respeta el margen del shell. Se
                   reusa la clase "shell" (misma que usan <main> y el
                   footer) para heredar el mismo ancho/centrado, y se arma
                   un layout de 2 slots lado a lado, autocontenido acá
                   porque no tenemos acceso al CSS global del sitio.
                   -------------------------------------------------------- */
                .BannerAdsShow.shell {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    align-items: stretch;
                    gap: 16px;
                    margin: 16px auto;
                }
                .BannerAdsShow .ad-slot {
                    flex: 1 1 0;
                    min-width: 280px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                    border-radius: 3px;
                }
                /* Si el banner por defecto (360-Ad-Default-*.php) o el que
                   viene de la DB trae imagen/iframe con ancho fijo, esto
                   lo hace responsive dentro de su mitad. */
                .BannerAdsShow .ad-slot > * {
                    max-width: 100%;
                    height: auto;
                }
                @media (max-width: 768px) {
                    .BannerAdsShow.shell {
                        flex-direction: column;
                        align-items: center;
                    }
                    .BannerAdsShow .ad-slot {
                        width: 100%;
                    }
                }
				
				
/* Parser embebido - estilos minimos copiados de article.php */
.player{
    width:100%; background:#F4F4F4; padding:10px; border-radius:4px; color:#000; margin:16px 0; user-select:none;
}
.player p{ margin:0 0 8px 0; color:#000; font-size:15px; line-height:1.3; font-weight:500; }
.player .controls{ display:flex; align-items:center; gap:12px; }
.player .btn{
    width:44px; height:44px; background:transparent; border:2px solid #0764DE; color:#0764DE;
    border-radius:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:6px;
}
.player .btn svg{ fill:#0764DE; width:20px; height:20px; }
.player .progress-wrap{ flex:1; display:flex; align-items:center; gap:10px; }
.player .time{ color:#000; font-size:12px; min-width:46px; text-align:center; }
.player .progress{ position:relative; height:10px; background:rgba(0,0,0,0.2); border-radius:10px; flex:1; cursor:pointer; }
.player .bar{ position:absolute; top:0; bottom:0; left:0; width:0%; background:#0764DE; border-radius:10px; }
.player .handle{ position:absolute; top:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background:#0764DE; box-shadow:0 1px 3px rgba(0,0,0,.6); left:0%; pointer-events:none; }
.bloque-resultado{ margin:16px 0; }
#BLOCK-CAMPEONATO{ margin:16px 0; }
				
				


/* =============================================================
   SECCION 2 -- Preloader (antes en preloader.php)
============================================================= */
/*
 * Mientras carga: el fondo del <html> queda SOLO como respaldo sólido
 * (evita un flash blanco en el instante antes de que este <style> se
 * aplique) -- no tiene sentido ponerle backdrop-filter acá, porque el
 * <html> es la raíz del documento y no hay nada "detrás" de él para
 * desenfocar. El efecto "vidrio esmerilado" real vive en
 * #ms360x-preloader más abajo, que sí es un overlay por ENCIMA del
 * contenido de la página.
 */
html.ms360x-loading {
    background:#020409;
}
/*
 * Antes esto ocultaba el contenido por completo (visibility:hidden +
 * opacity:0). Eso rompía el efecto de vidrio esmerilado: si no hay
 * nada pintado detrás del overlay, el backdrop-filter no tiene qué
 * desenfocar y el resultado es un cuadro negro liso, sin blur visible.
 * Ahora el contenido SIGUE pintándose (para que el overlay lo pueda
 * desenfocar de verdad); solo se bloquea la interacción mientras
 * carga.
 */
html.ms360x-loading body > *:not(#ms360x-preloader):not(script):not(style) {
    pointer-events: none !important;
}
html.ms360x-loading, html.ms360x-loading body { overflow: hidden !important; }
/* Anula viejos */
#ms360-preloader, #fmpl-loading { display:none !important; }

/* Overlay -- acá vive el efecto real de vidrio esmerilado */
#ms360x-preloader{
    position:fixed; inset:0; z-index:2147483647;
    width:100vw; height:100vh;
    display:flex; align-items:center; justify-content:center;
    background: rgba(2, 4, 9, .55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px); /* Safari */
    opacity:1;
    transition:opacity .7s cubic-bezier(.4,0,.2,1);
    visibility: visible !important;
}
#ms360x-preloader.ms360x-hide{ opacity:0; pointer-events:none; }

/* Halo */
.ms360x-halo{
    position:absolute; width:min(700px,85vw); aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle, rgba(0,110,255,.16) 0%, rgba(0,90,255,.07) 28%, transparent 68%);
    filter:blur(18px); opacity:0; transform:scale(.55);
    transition:opacity .8s ease, transform 1.8s cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
}
/* Logo wrap - empieza invisible, sin salto */
.ms360x-logo-wrap{
    width:min(420px,65vw); position:relative; z-index:2;
    opacity:0; transform:scale(.88);
    filter:drop-shadow(0 0 4px rgba(0,120,255,.15)) drop-shadow(0 0 18px rgba(0,100,255,.08));
    transition:opacity .6s ease, transform 1.2s cubic-bezier(.16,1,.3,1), filter .35s ease;
    will-change: opacity, transform;
}
.ms360x-logo-wrap svg{ width:100%; height:auto; display:block; overflow:visible; }
.ms360x-logo-wrap svg path{ will-change: stroke-dashoffset, fill-opacity; }

.ms360x-flash{
    position:absolute; z-index:1; width:75%; aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle, rgba(150,205,255,.275) 0%, rgba(70,160,255,.14) 45%, transparent 75%);
    filter:blur(40px); opacity:0; transform:scale(.5);
    pointer-events:none;
}
.ms360x-text{
    position:absolute; bottom:11%; left:0; right:0; z-index:6; text-align:center;
    font-family:'Roboto Condensed', Arial, sans-serif; font-size:11px; font-weight:600;
    letter-spacing:6px; color:rgba(255,255,255,.65);
    opacity:0; transform:translateY(10px); transition:opacity .7s ease, transform .7s ease;
}
.ms360x-logo-wrap.ms360x-enter{ opacity:1; transform:scale(1); }
.ms360x-halo.ms360x-on{ opacity:1; transform:scale(1); }
.ms360x-text.ms360x-on{ opacity:.85; transform:translateY(0); }
.ms360x-logo-wrap.ms360x-bright{
    filter:drop-shadow(0 0 10px rgba(40,150,255,.425)) drop-shadow(0 0 30px rgba(0,110,255,.3)) drop-shadow(0 0 65px rgba(0,90,255,.175));
    transition:filter .9s ease;
}
.ms360x-flash.ms360x-fire{ animation:ms360xBloom 1.4s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes ms360xBloom{
    0%{opacity:0;transform:scale(.5)}30%{opacity:.45;transform:scale(1)}65%{opacity:.275;transform:scale(1.2)}100%{opacity:0;transform:scale(1.4)}
}

/* NOTA: antes acá había una animación "ms360xReveal" que hacía
 * fade-in del contenido del body al terminar de cargar. Tenía sentido
 * cuando el contenido estaba oculto (opacity:0/visibility:hidden)
 * durante la carga -- pero ahora el contenido queda visible desde el
 * arranque (para que el backdrop-filter del overlay tenga algo real
 * que desenfocar), así que esa animación forzaba un opacity:0 -> 1
 * sobre contenido que YA estaba visible, provocando un parpadeo doble
 * justo cuando el overlay también se estaba desvaneciendo. Se saca
 * por completo -- el overlay desvaneciéndose ya alcanza para "revelar"
 * lo que hay detrás, sin necesidad de re-animar el contenido.
 */


/* =============================================================
   SECCION 3 -- Panel "Fin de Semana en vivo" (antes en weekend.php)
============================================================= */
/* Cards de timing en vivo -- TODAS las categorías del fin de semana,
   25% de ancho cada una en desktop (4 por fila) y las que sobran
   arman filas nuevas solas gracias a flex-wrap. En mobile pasan a 2 y
   después a 1 columna. */
.ms360-sh-row{display:flex;gap:10px;flex-wrap:wrap}
.ms360-sh-card{
    flex:0 0 calc(25% - 8px);
    min-width:0;
    background:#fff;
    border:1px solid var(--line);
    border-left:3px solid var(--flag-bg,var(--line));
    border-radius:var(--radius-card);
    padding:12px;
    color:var(--ink);
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:border-left-color .25s ease;
}
/* Card de fuente externa (no Speedhive) -- el borde ahora sí puede
   pisarse con --flag-bg (el JS de polling externo lo actualiza igual
   que el de Speedhive), pero el violeta queda como base/fallback antes
   de la primera lectura. */
.ms360-sh-card.is-external{border-left-color:#7b20c9}

/* Header: pin + circuito/lugar */
.ms360-sh-head{display:flex;align-items:flex-start;gap:8px}
.ms360-sh-pin{
    flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;
    padding:0;margin:0;
}
.ms360-sh-pin svg{width:20px;height:20px;fill:var(--blue);display:block}
.ms360-sh-circuito{font-family:"Poppins",sans-serif;font-style:normal;font-weight:700;font-size:11px;line-height:1.2;color:var(--ink);letter-spacing:normal}
.ms360-sh-lugar-txt{font-size:9.5px;font-weight:600;color:#3a3a3a;line-height:1.3}

.ms360-sh-hr{border:0;border-top:1px solid var(--line);margin:0}

/* Serie + fecha */
.ms360-sh-serierow{display:flex;align-items:center;flex-wrap:wrap;gap:3px}
.ms360-sh-logo-chip{display:flex;align-items:center;justify-content:center;background:#c2c6cc;border-radius:3px;padding:1px;margin:3px;flex-shrink:0}
.ms360-sh-logo-chip img{height:42px;width:auto;object-fit:contain;display:block;border-radius:2px}

/* Sesión en vivo -- el color YA NO es siempre verde: --flag-bg/--flag-fg
   se pisan por JS (ver flagInfo() en el <script>) según la bandera real
   que devuelve la API (verde/amarilla/SC/roja/a cuadros). Por default
   (antes de la primera respuesta) arrancan en verde para no parpadear
   en gris al cargar. */
.ms360-sh-card{--flag-bg:#1b5e34;--flag-fg:#fff}
.ms360-sh-labels{display:flex;align-items:center;justify-content:space-between;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--ink)}
.ms360-sh-sesion{display:flex;align-items:stretch;gap:6px}
.ms360-sh-sesion-nombre{
    flex:1;min-width:0;background:var(--flag-bg);color:var(--flag-fg);font-size:15px;font-weight:600;
    text-transform:uppercase;
    display:flex;align-items:center;padding:6px 8px;border-radius:3px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;
    transition:background-color .25s ease;
}
.ms360-sh-sesion-tiempo{
    flex:0 0 52px;background:var(--flag-bg);color:var(--flag-fg);font-size:16px;font-weight:500;
    text-transform:uppercase;
    display:flex;align-items:center;justify-content:center;border-radius:3px;
    font-family:'JetBrains Mono',monospace;
    transition:background-color .25s ease;
}
.ms360-sh-live{
    display:inline-flex;align-items:center;gap:4px;
    font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
    color:var(--flag-fg,#fff);background:var(--flag-bg,var(--red,#e0202e));padding:1px 5px;border-radius:3px;
    transition:background-color .25s ease;
}
.ms360-sh-live::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.9;animation:ms360-sh-pulse 1.4s infinite}
.ms360-sh-live.is-quiet{background:#4a4a4a;color:#fff}
.ms360-sh-live.is-quiet::before{animation:none}
.ms360-sh-live.is-static::before{animation:none}
@keyframes ms360-sh-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ms360-sh-skel{color:var(--muted);font-style:italic}
.ms360-sh-vacio{font-size:11px;color:var(--muted);padding:6px 0}

/* Top 3 → ahora es un carrusel de posiciones: se ve una ventana de 3
   filas fijas, y si hay más de 3 pilotos con datos, van rotando solas
   con un slide hacia arriba (upslide) cada pocos segundos, en el mismo
   lugar -- sin agrandar la card. Si hay 3 o menos, queda estático. */
.ms360-sh-top3{display:flex;flex-direction:column}
.ms360-sh-top3-viewport{overflow:hidden}
.ms360-sh-top3-track{display:flex;flex-direction:column;transition:transform .5s ease;will-change:transform}
.ms360-sh-top3-row{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px dashed var(--line)}
.ms360-sh-top3:not(.is-rotating) .ms360-sh-top3-row:last-child{border-bottom:0}
.ms360-sh-pos{font-size:11px;font-weight:300;color:#3a3a3a;width:14px;flex-shrink:0}
.ms360-sh-dorsal{
    width:3ch;font-size:12px;
}
.ms360-sh-piloto{flex:0 0 120px;width:120px;min-width:0;font-size:12px;font-weight:400;text-transform:uppercase;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms360-sh-tiempo{flex-shrink:0;font-size:13px;font-weight:800;color:var(--ink);font-family:'JetBrains Mono',monospace}

/* Botones */
.ms360-sh-btns{display:flex;gap:6px;margin-top:auto}
.ms360-sh-btn{
    flex:1;text-align:center;background:var(--blue);color:#fff;text-decoration:none;
    font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;
    padding:8px 4px;border-radius:4px;transition:background-color .15s ease;
}
.ms360-sh-btn:hover{background:var(--blue2)}

@media (max-width:1200px){.ms360-sh-card{flex:0 0 calc(50% - 5px)}}
@media (max-width:640px){.ms360-sh-card{flex:0 0 100%}}

/* Barra sticky ultra-reducida -- aparece pegada debajo del header del
   sitio (que ya es sticky, top:0) mientras se scrollea POR DENTRO de
   esta sección, y desaparece al salir de ella (ver el scroll handler
   más abajo, sobre los dos sentinels que la delimitan). No reemplaza
   las cards completas -- es un resumen mínimo (circuito + estado +
   tiempo) para no perder de vista lo que está pasando en vivo mientras
   se sigue leyendo el resto de la página.

   position:fixed a propósito (NO sticky) -- con position:sticky el
   navegador la "suelta" apenas el scroll pasa el borde inferior de su
   contenedor (.panel, justo después de la fila de cards): a partir de
   ahí deja de estar pegada y sigue el flujo normal de la página, se va
   para arriba con el resto y termina tapada detrás del header -- por
   más que el JS siga diciendo "tiene que estar visible", el navegador
   ya la soltó por su cuenta y gana esa pulseada. Con position:fixed no
   depende de ningún contenedor: quién decide si se ve o no es
   ÚNICAMENTE actualizar() (según los sentinels), sin que el
   comportamiento nativo del navegador la pise. top/left/width se
   calculan en JS (actualizarOffsets()) a partir del rect de .panel, y
   como position:fixed no reserva espacio en el flujo del documento
   (a diferencia de sticky, que sí lo hacía aunque estuviera en
   opacity:0), tampoco hace falta la vuelta de display:none/is-showing
   que se usaba antes solo para tapar ese hueco -- alcanza con
   opacity+pointer-events. */
.ms360-sh-sticky{
    position:fixed;
    z-index:30;
    display:flex;
    align-items:flex-start;
    gap:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:7px 10px;
    box-shadow:0 14px 26px rgba(0,0,0,.24); /* hacia abajo -- separa la barra del contenido que sigue scrolleando debajo */
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
}
.ms360-sh-sticky.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}

/* Título fijo a la izquierda -- a propósito FUERA del contenedor que
   scrollea horizontalmente (.ms360-sh-sticky-scroll), para que no se
   vaya con los chips al arrastrar/scrollear: siempre queda ahí como
   ancla de qué es esta barra. */
.ms360-sh-sticky-label{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:5px;
    padding:0 10px 0 2px;
    margin-right:8px;
    border-right:1px solid var(--line);
    font-family:"Poppins",sans-serif;
    font-weight:800;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.3px;
    color:var(--ink);
    white-space:nowrap;
    align-self:center;
}
.ms360-sh-sticky-label svg{width:12px;height:12px;flex-shrink:0;color:var(--blue,#0866db)}

.ms360-sh-sticky-scroll{
    display:flex;
    align-items:flex-start;
    gap:8px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    min-width:0;
}

/* El chip es una sola línea horizontal: punto + circuito/sesión +
   reloj + flechita de expandir + una mini-card de posición que
   muestra UNA fila (no top-3) y va rotando sola cada X segundos --
   así entra cómodo en una franja angosta y no hace falta expandir
   para saber quién va adelante. */
.ms360-sh-sticky-item{
    --flag-bg:var(--red,#e0202e);
    flex:0 0 452px;
    width:452px;
    scroll-snap-align:start;
    display:flex;align-items:center;gap:8px;
    padding:7px 10px;
    border:1px solid var(--line);border-radius:10px;
    background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.05);
    font-size:11px;
    cursor:pointer;
    transition:background-color .15s ease,border-color .15s ease;
}
.ms360-sh-sticky-item:hover{background:#fafafa;border-color:#c7ccd2}
.ms360-sh-sticky-item.is-expanded{background:#f2f3f5;border-color:#c7ccd2}

.ms360-sh-sticky-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0;transition:background-color .25s ease}
.ms360-sh-sticky-dot.is-live{background:var(--flag-bg);animation:ms360-sh-pulse 1.4s infinite}
.ms360-sh-sticky-dot.is-finish{background:var(--flag-bg);animation:none}
/* Chip de fuente externa (no Speedhive, ej.
   https://tiempos.actc.org.ar/live) -- usa var(--flag-bg) con el
   mismo fallback violeta como valor por default de la propiedad (no
   como regla CSS aparte): si fuera una regla `.is-external-dot{
   background:#7b20c9 }` normal, al agregar is-live/is-finish con datos
   reales quedaría compitiendo por la MISMA especificidad (dos clases
   cada una) contra esas reglas, y como esta viene después en la hoja,
   ganaría siempre y taparía el color real de la bandera. Con el
   fallback adentro de var(), no hay pelea de cascada: se usa
   --flag-bg si está seteada (la pisa el JS de polling), o el violeta
   si todavía no llegó ningún dato. */
.ms360-sh-sticky-dot.is-external-dot{background:var(--flag-bg, #7b20c9)}
.ms360-sh-sticky-item.is-external{cursor:default}
.ms360-sh-sticky-external-btn{
    flex-shrink:0;
    width:26px;height:26px;
    display:flex;align-items:center;justify-content:center;
    border-radius:6px;
    background:#f3ebfa;
    color:#7b20c9;
    transition:background-color .15s ease;
}
.ms360-sh-sticky-external-btn:hover{background:#e6d5f5}
.ms360-sh-sticky-external-btn svg{width:14px;height:14px}

.ms360-sh-sticky-info{flex:0 0 100px;width:100px;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ms360-sh-sticky-circuito{font-weight:800;font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms360-sh-sticky-sesion{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ms360-sh-sticky-tiempo{
    flex-shrink:0;
    background:var(--flag-bg,#1b5e34);color:#fff;
    font-family:'JetBrains Mono',monospace;font-weight:800;font-size:12px;
    padding:4px 8px;border-radius:6px;
    min-width:42px;text-align:center;
}

/* Botón expandir -- flechita que gira 180° cuando ese chip está
   expandido. Es un botón real (no todo el chip) para que quede claro
   que es opcional: el chip reducido ya muestra lo esencial (circuito
   + sesión + reloj + posición), expandir es solo "si el usuario
   quiere" ver la card completa (pin, lugar, categorías, botones) sin
   perder el scroll. */
.ms360-sh-sticky-expand-btn{
    flex-shrink:0;
    width:14px;height:14px;
    display:flex;align-items:center;justify-content:center;
    border:0;background:transparent;padding:0;margin:0;
    cursor:pointer;
    color:var(--muted);
}
.ms360-sh-sticky-expand-btn svg{width:10px;height:10px;transition:transform .18s ease}
.ms360-sh-sticky-item.is-expanded .ms360-sh-sticky-expand-btn svg{transform:rotate(180deg)}

/* Mini-card de posición -- muestra una sola fila (posición + dorsal +
   piloto + tiempo/gap, mismo cálculo que armarFilaHTML) y rota sola
   cada POSMINI_ROTATE_MS. Las dos capas de ::before/::after simulan un
   mazo de cards apiladas detrás, para sugerir que hay más posiciones
   rotando aunque en pantalla solo se vea una a la vez. */
.ms360-sh-sticky-posmini{
    position:relative;
    z-index:1;
    flex:1 1 auto;
    min-width:0;
    display:flex;align-items:center;gap:6px;
    background:var(--soft);
    border:1px solid var(--line);
    border-radius:8px;
    padding:5px 8px;
    transition:opacity .22s ease, transform .22s ease;
}
.ms360-sh-sticky-posmini::before,
.ms360-sh-sticky-posmini::after{
    content:'';
    position:absolute;
    left:5px;right:-4px;
    border-radius:8px;
    background:var(--soft);
    border:1px solid var(--line);
    z-index:-1;
}
.ms360-sh-sticky-posmini::before{top:3px;bottom:-3px;opacity:.75}
.ms360-sh-sticky-posmini::after{top:6px;bottom:-6px;opacity:.45}
.ms360-sh-sticky-posmini.is-fading{opacity:0;transform:translateY(-3px)}
.ms360-sh-sticky-posmini .ms360-sh-pos{flex-shrink:0;width:12px;font-size:10px;font-weight:700;color:var(--muted)}
.ms360-sh-sticky-posmini .ms360-sh-dorsal{font-size:10px}
.ms360-sh-sticky-posmini .ms360-sh-piloto{flex:1 1 auto;min-width:60px;font-size:10.5px;font-weight:500;text-transform:uppercase;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms360-sh-sticky-posmini .ms360-sh-tiempo{flex-shrink:0;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10.5px;color:var(--ink)}
.ms360-sh-sticky-posmini .ms360-sh-vacio{font-size:9.5px;color:var(--muted)}

@media (max-width:640px){
    .ms360-sh-sticky-item{flex:0 0 340px;width:340px}
    .ms360-sh-sticky-info{flex:0 0 80px;width:80px}
}

/* Panel de la card completa, desplegado debajo de la barra reducida.
   Reutiliza el mismo nodo .ms360-sh-card que ya vive en #ms360-sh-row
   (se reubica con JS, no se clona) -- así el polling que la mantiene
   viva sigue actualizando ese card esté donde esté en el DOM.
   position:fixed a propósito (no sticky): así NUNCA ocupa espacio en
   el flujo normal del documento, ni estando abierto -- top/left/width
   se calculan en JS (actualizarOffsets()) a partir del rect de la
   barra sticky. Si fuera sticky, al abrirse (display:flex) metería la
   altura de una card entera en el flujo, corriendo hacia abajo
   cualquier sentinel que viniera después y rompiendo el cálculo de
   visibilidad del scroll (ver nota en el HTML junto al sentinel-top). */
.ms360-sh-expand-panel{
    position:fixed;
    z-index:29;
    display:none;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 16px rgba(0,0,0,.08);
    padding:10px;
}
.ms360-sh-expand-panel.is-open{display:flex}
.ms360-sh-expand-panel .ms360-sh-card{flex:0 0 min(340px,100%)}
.ms360-sh-expand-panel-close{
    flex-shrink:0;
    align-self:flex-start;
    width:24px;height:24px;
    border:1px solid var(--line);border-radius:50%;
    background:var(--soft);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    margin-left:8px;
    color:var(--ink);
    font-size:13px;line-height:1;
}
.ms360-sh-expand-panel-close:hover{background:#eceef1}


/* =============================================================
   SECCION 4 -- VerSerie.php (fix puntual .vs-cw-pcard-nro / .vs-wp-event)
============================================================= */
/* ------------------------------------------------------------------
   FIX puntual: los badges de número de auto (.vs-cw-pcard-nro, tanto
   en el podio como en la tabla del widget Campeonato) se ven en
   head.php con un ancho fijo/mínimo excesivo y el número corrido
   hacia un costado en vez de centrado. No tengo acceso a head.php
   para editar la regla original, así que la piso acá mismo, scopeada
   a esta página, con !important en lo que hace falta para ganarle a
   la especificidad de la regla global. Caja centrada, ancho pegado al
   contenido (no fijo), mismo padding para 1 o 3 dígitos.
   ------------------------------------------------------------------ */
.vs-cw-pcard-nro {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 24px;
    max-width: none !important;
    padding: 2px 9px !important;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   FIX puntual: la raya diagonal celeste que se ve cruzando el número
   de Debuts/Retornos (widget Participación) NO es un efecto del
   número en sí -- es ".vs-wp-event::after" en head.php, un acento
   decorativo a propósito (franja angosta rotada 18°, mismo azul del
   panel) puesto cerca del borde derecho de la fila, justo donde cae
   el número. No queda bien ahí, así que se lo saca acá (scopeado a
   esta página, no toca el resto del sitio donde .vs-wp-event no se
   usa para esto). De paso, la tipografía del número ("Oxanium"
   itálica en head.php) también se pisa por una fuente derecha común,
   y se lo arma como un pill prolijo en vez de un número suelto
   flotando a la derecha.
   ------------------------------------------------------------------ */
.vs-wp-event::after {
    content: none !important;
}
.vs-wp-event {
    display: flex !important;
    align-items: center !important;
}
.vs-wp-event .val {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    min-width: 32px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eaf1ff;
    color: #1264d8;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transform: none !important;
}

/* ------------------------------------------------------------------
   FIX puntual: el divisor grueso y parejo debajo de los títulos
   "Pilotos" (border-bottom sólido de .section-head, definido en
   head.php) se ve pesado -- un borde de un solo color, mismo grosor
   de punta a punta. Reemplazado acá, scopeado con .vs-pilotos-head
   (agregada puntualmente a esos section-head, no toca el resto de
   .section-head del sitio), por una línea fina con degradado que se
   apaga hacia la derecha -- más prolijo que un trazo plano de ancho
   completo.
   ------------------------------------------------------------------ */
.vs-pilotos-head {
    border-bottom: none !important;
    position: relative;
    padding-bottom: 12px;
}
.vs-pilotos-head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ink, #1a1a2e) 0%, var(--ink, #1a1a2e) 12%, rgba(0,0,0,0.06) 65%, transparent 100%);
    border-radius: 2px;
}


/* =============================================================
   SECCION 5 -- detalle_evento.php (rediseño dashboard compacto
   del encabezado + franja de líder + tabs)
============================================================= */
/* ============================================================
   REDISEÑO "DASHBOARD COMPACTO" del encabezado + franja de líder
   + tabs de detalle_evento.php. Autocontenido a propósito (no
   toca ni depende de las reglas .evento-hero-* / .ecx-* que viven
   en head.php) para no romper nada en EventCard.php ni en otras
   páginas que compartan esas clases. Usa las mismas variables de
   :root que ya usa el resto del sitio (con fallback por si alguna
   no existiera) para no desentonar con la paleta general.

   v3 -- pedido explícito "más compacta, algo así [mock de
   referencia]": todo en franjas de una sola línea, separadas por
   líneas verticales finas en vez de cards con su propio padding
   apiladas. Mismo criterio en encabezado, franja del líder y
   selector de pilotos.
   ============================================================ */
/* FIX: antes --evtd-bg caía en el fallback oscuro (#10162a) porque
   --panel solo existe DENTRO de .ecx-msdata-root, no en :root -- y
   este bloque queda afuera de ese scope. El resto del sitio (y
   .evento-badge/.ecx-data ya parchados en head.php) es claro, así que
   la franja quedaba desentonada. Ahora todo apunta a tokens que SÍ
   existen en :root (blancos/grises reales), igual criterio que
   .evento-hero/.evento-badge-* más abajo en head.php. */
.evtd-v2 { --evtd-bg: var(--white, #fff); --evtd-bg2: var(--soft, #f4f6f8); --evtd-line: var(--line, #dfe3e8); --evtd-text: var(--text, #16181c); --evtd-muted: var(--muted, #69717d); --evtd-blue: var(--blue2, #0877ff); --evtd-green: var(--green, #159447); }
.evtd-v2 i.bi { line-height: 1; }

/* v4 -- pedido explícito: "compacta espacios, textos un 10% más
   grandes, quita radius (max 3px), quita los emojis (solo
   iconografía bootstrap), tabs como botones de verdad con hover,
   más profesional, no desperdiciar alto". Radius tope global 3px,
   paddings/márgenes recortados en todo el bloque, fuentes de acá
   subidas ~10% (los .NNem de abajo ya están recalculados). */
/* FIX: hueco vertical innecesario entre el header y la franja del
   líder. No es una sola regla: se suman .evento-body { margin-top:2px }
   + .evento-content { padding:18px 20px } (pensado para el layout CON
   sidebar) + .ecx-panel-frame { padding:8px } (los tres viven en
   head.php, compartidos con otras páginas -- se pisan acá, scoped,
   en vez de tocarlos globalmente). */
.evtd-v2 .evento-body { margin-top: 0; border: none; }
.evtd-v2 .evento-body-full .evento-content { padding: 0 20px 18px; }
.evtd-v2 .ecx-panel-frame { padding: 0; }

.evtd-card { background: var(--evtd-bg); border: 1px solid var(--evtd-line); border-radius: 3px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }

/* --- Franja 1: identidad + fecha/lugar/circuito, TODO en una
   línea con separadores verticales --- */
.evtd-topbar { display: flex; align-items: center; padding: 7px 12px; margin-bottom: 4px; flex-wrap: wrap; row-gap: 6px; }
.evtd-seg { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-right: 1px solid var(--evtd-line); }
.evtd-seg:first-child { padding-left: 0; }
.evtd-seg-noborder { border-right: none; }
.evtd-seg-identity { padding-right: 14px; }
.evtd-logo { width: 32px; height: 32px; object-fit: contain; flex: none; }
.evtd-identity-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.evtd-serie { font-size: .75em; text-transform: uppercase; letter-spacing: .6px; color: var(--evtd-muted); font-weight: 700; }
.evtd-nombre { font-size: 1.15em; font-weight: 800; color: var(--evtd-text); margin: 0; line-height: 1.2; white-space: nowrap; }
.evtd-meta-ico { flex: none; width: 18px; text-align: center; font-size: 1.05em; color: var(--evtd-muted); }
.evtd-meta-ico img.evento-meta-flag { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; }
.evtd-meta-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.evtd-meta-lbl { font-size: .7em; text-transform: uppercase; letter-spacing: .5px; color: var(--evtd-muted); }
.evtd-meta-val { font-size: .97em; color: var(--evtd-text); font-weight: 700; white-space: nowrap; }
.evtd-badge-right.evento-badge { margin-left: 12px; flex: none; border-radius: 3px; }

/* --- Selectores Evento/Clase/Sesión: ahora viven en la MISMA línea
   que circuito/badge (pedido explícito: "ahorrar una línea") --
   grupo compacto pegado a la derecha, separado del resto de la
   franja por el margin-left:auto. --- */
.evtd-topbar-selects { display: flex; align-items: flex-end; gap: 10px; margin-left: auto; padding-left: 14px; border-left: 1px solid var(--evtd-line); }
.evtd-select-group { display: flex; flex-direction: column; gap: 2px; }
.evtd-select-group label { font-size: .7em; text-transform: uppercase; letter-spacing: .5px; color: var(--evtd-muted); font-weight: 700; }
.evtd-select-group select.evento-select { min-width: 132px; padding: 4px 24px 4px 8px; border-radius: 3px; font-size: .9em; }

/* --- Franja del líder: TODA la info (líder / tiempo / series /
   sectores) en una sola línea con separadores, no cards sueltas --- */
.evtd-summary { display: flex; align-items: stretch; flex-wrap: wrap; row-gap: 6px; background: linear-gradient(135deg, rgba(255,193,7,.09), transparent 70%), var(--evtd-bg2); border: 1px solid var(--evtd-line); border-radius: 3px; padding: 7px 4px; margin-bottom: 6px; }
.evtd-sum-seg { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-right: 1px solid var(--evtd-line); }
.evtd-sum-seg:last-child { border-right: none; }
.evtd-sum-label { display: block; font-size: .7em; text-transform: uppercase; letter-spacing: .5px; color: var(--evtd-muted); font-weight: 700; margin-bottom: 2px; }
.evtd-sum-leader .ecx-crown { font-size: .95em; }
.evtd-sum-leader .ecx-who { display: flex; flex-direction: column; }
/* !important necesario -- el selector global ".ecx-leader-strip
   .ecx-who .ecx-name" (head.php) tiene MÁS especificidad (3 clases)
   que este (2 clases) y pinta el nombre dorado; sin !important el
   color local pierde el empate de especificidad aunque se declare
   después. */
.evtd-sum-leader .ecx-name { font-weight: 800; font-size: 1.05em; color: var(--evtd-text) !important; display: flex; align-items: center; gap: 6px; }
.evtd-sum-time .ecx-time { font-size: 1.43em; }
.evtd-sum-time .evtd-tt-note { font-size: .84em; color: var(--evtd-muted); margin-top: 2px; }
.evtd-sum-time .evtd-tt-note strong { color: var(--evtd-text); }

/* Cajas de dos líneas (label arriba chico, valor abajo en negrita)
   para series y sectores -- mismo lenguaje visual para ambas, así
   no compiten entre sí por atención. */
.evtd-boxes { display: flex; flex-wrap: wrap; gap: 5px; }
.evtd-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 54px; padding: 3px 8px; border-radius: 3px; background: #fff; border: 1px solid var(--evtd-line); }
.evtd-box .evtd-box-lbl { font-size: .73em; color: var(--evtd-muted); font-weight: 700; display: flex; align-items: center; gap: 3px; }
.evtd-box .evtd-box-lbl i.bi { font-size: .95em; }
.evtd-box .evtd-box-val { font-size: .92em; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--evtd-text); }
.evtd-box-best { background: rgba(0,230,120,.14); border-color: var(--evtd-green); }
.evtd-box-best .evtd-box-lbl, .evtd-box-best .evtd-box-val { color: var(--evtd-green); }

/* --- Selector de pilotos: una sola línea (ícono+label+hint a la
   izquierda, el desplegable de agregar pegado a la derecha) --- */
/* FIX: el .ecx-pilot-select-bar global (head.php) trae
   flex-direction:column (pensado para otra pantalla) -- esta regla
   nunca la pisaba, así que la barra se apilaba en vez de quedar en
   una sola línea. Se declara flex-direction explícito acá. El fondo
   sigue viniendo forzado en blanco por el !important del global
   (var(--panel) = blanco dentro de .ecx-msdata-root), así que no
   hace falta pisarlo -- ya coincide con la referencia. */
.ecx-pilot-select-bar { display: flex; flex-direction: row; align-items: center; gap: 12px; border: 1px solid var(--evtd-line); border-radius: 3px; padding: 6px 12px; margin-bottom: 6px; flex-wrap: wrap; }
.ecx-pilot-select-bar .ecx-psb-row { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.ecx-pilot-select-bar .ecx-psb-label { font-size: .86em; font-weight: 700; color: var(--evtd-text); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.ecx-pilot-select-bar .ecx-psb-label i.bi { color: var(--evtd-muted); font-size: 1.05em; }
.ecx-pilot-select-bar .ecx-psb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ecx-pilot-select-bar .ecx-psb-add { flex: none; }
.ecx-pilot-select-bar .ecx-psb-add select.evento-select { border-radius: 3px; padding: 6px 26px 6px 10px; }

/* --- Tabs: botones reales, cada uno con su propio borde/fondo,
   con hover prolijo -- ya no una barra-contenedor con pills
   flotando adentro (pedido explícito: "hazlos botones, con un
   lindo efecto hover"). --- */
.ecx-tabs-bar { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; margin-bottom: 8px; scrollbar-width: thin; }
/* FIX: el .ecx-tab-btn global (head.php) trae
   "background: var(--bg-1) !important" (pensado para el nav de tabs
   con borde de otra pantalla) -- eso SIEMPRE le ganaba al fondo
   celeste/transparente y al azul de la pestaña activa de acá, sin
   importar el orden ni la especificidad (un !important le gana a
   cualquier regla normal). Se iguala con !important para que este
   nav vuelva a mandar sobre sus propios botones. */
.ecx-tabs-bar .ecx-tab-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 3px !important; border: 1px solid var(--evtd-line) !important; background: #fff !important; color: var(--evtd-muted) !important; padding: 6px 12px; font-size: .88em; font-weight: 600; text-transform: none; letter-spacing: normal; white-space: nowrap; cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease; }
.ecx-tabs-bar .ecx-tab-btn i.bi { font-size: 1.02em; }
.ecx-tabs-bar .ecx-tab-btn:hover { background: rgba(8,119,255,.06) !important; border-color: var(--evtd-blue) !important; color: var(--evtd-blue) !important; box-shadow: 0 2px 6px rgba(8,119,255,.14); transform: translateY(-1px); }
.ecx-tabs-bar .ecx-tab-btn.ecx-active { background: var(--evtd-blue) !important; border-color: var(--evtd-blue) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(8,119,255,.28); }
.ecx-tabs-bar .ecx-tab-btn.ecx-active:hover { transform: none; }

/* --- Tabla: separador sutil antes del bloque de columnas de
   sector, para que no se lean pegadas a los datos de posición/
   equipo (pedido explícito: "info no tan toda junta mezclada") --- */
.ecx-data th.ecx-col-sector, .ecx-data td.ecx-col-sector { background: rgba(47,143,255,.05); }
.ecx-data th.ecx-col-group-start, .ecx-data td.ecx-col-group-start { border-left: 1px solid var(--evtd-line); }
.ecx-data { font-size: 1.05em; }


/* =============================================================
   SECCION 6 -- Quienes-Somos.php
============================================================= */
.qs-wrap {
    --qs-azul: #1264D8;
    --qs-azul-2: #0B4DA6;
    --qs-gris-accent: #445064;
    --qs-panel: #FFFFFF;
    --qs-panel-2: #F5F7FA;
    --qs-line: #E4E8EF;
    --qs-muted: #000;
}

/* -------- Hero -------- */
.qs-hero {
    position: relative;
    padding: 34px 4px 26px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 32px;
}
.qs-hero::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -6%;
    width: 46%;
    height: 260%;
    background: repeating-linear-gradient(
        118deg,
        var(--qs-azul) 0px, var(--qs-azul) 3px,
        transparent 3px, transparent 30px
    );
    opacity: 0.08;
    -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 70%);
            mask-image: linear-gradient(to left, #000 0%, transparent 70%);
    pointer-events: none;
}
.qs-hero-inner { position: relative; z-index: 1; max-width: 560px; flex: 1 1 420px; }
.qs-hero-media {
    position: relative;
    z-index: 1;
    flex: 1 1 704px;
    max-width: 704px;
    min-width: 0;
}
.qs-hero-media img {
    display: block;
    width: 100%;
    height: auto;
}
.qs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.2px;
    color: var(--qs-azul);
    margin: 0 0 10px;
}
.qs-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--qs-azul);
}
.qs-hero h1 {
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 10px;
    color: var(--ink, #1a1a2e);
}
.qs-hero h1 span { color: var(--qs-azul); }
.qs-hero p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--qs-muted);
    margin: 0;
    max-width: 480px;
}

@media (max-width: 760px) {
    .qs-hero { flex-direction: column; align-items: flex-start; }
    .qs-hero-media { order: -1; width: 100%; max-width: 100%; }
}

/* -------- Secciones -------- */
/* Título de sección con tab diagonal a la izquierda -- mismo lenguaje
   visual que usan otros headers del sitio (franjas inclinadas), acá
   con los 3 colores de marca rotando por sección para separar cada
   bloque de contenido visualmente. */
.qs-section { margin-top: 40px; }
.qs-section:first-of-type { margin-top: 8px; }
.qs-tag {
    display: inline-flex;
    gap: 3px;
    margin-right: 10px;
    vertical-align: middle;
}
.qs-tag span {
    display: block;
    width: 4px;
    height: 18px;
    transform: skewX(-14deg);
    background: var(--qs-tag-color, var(--qs-azul));
}
.qs-tag span:nth-child(2) { opacity: 0.55; }
.qs-tag span:nth-child(3) { opacity: 0.28; }
.qs-section h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink, #1a1a2e);
    display: flex;
    align-items: center;
    margin: 0 0 14px;
}
.qs-section > p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #2b2b2b;
    max-width: 720px;
    margin: 0 0 10px;
	font-weight:300px;
}

/* -------- Panel base -------- */
.qs-panel {
    background: var(--qs-panel);
    border: 1px solid var(--qs-line);
    border-left: 3px solid var(--qs-accent, var(--qs-azul));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    padding: 18px 20px;
}

/* -------- Nombre: Meta / Sport / 360 -------- */
.qs-name-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}
.qs-name-grid .qs-panel h3 {
    font-size: 14.5px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--qs-accent, var(--qs-azul));
}
.qs-name-grid .qs-panel p {
    font-size: 14px;
    line-height: 1.3;
    color: #000;
    margin: 0;
	font-weight:400px;
}

/* -------- Visión / Misión -------- */
.qs-vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}
.qs-vm-grid .qs-panel h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--qs-accent);
}
.qs-vm-grid .qs-panel p {
    font-size: 14px;
    line-height: 1.65;
    color: #2b2b2b;
    margin: 0;
}

/* -------- Equipo -------- */
.qs-team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}
.qs-team-card { display: flex; gap: 14px; align-items: flex-start; }
.qs-avatar {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    background: var(--qs-accent, var(--qs-azul));
}
.qs-team-card h3 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink, #1a1a2e);
    margin: 2px 0 3px;
}
.qs-team-role {
    font-size: 12px;
    font-weight: 700;
    color: var(--qs-accent, var(--qs-azul));
    margin: 0 0 8px;
}
.qs-team-card p.qs-bio {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--qs-muted);
    margin: 0;
}
.qs-team-note {
    margin-top: 14px;
    font-size: 13.5px;
    line-height: 1.65;
    color: #2b2b2b;
    border-left: 3px solid var(--qs-azul-2);
    padding: 10px 16px;
    background: var(--qs-panel-2);
}

/* -------- Submarcas -------- */
.qs-sub-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 16px;
}
.qs-sub-grid .qs-panel { padding: 14px 16px; }
.qs-sub-grid .qs-panel h3 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--ink, #1a1a2e);
}
.qs-sub-grid .qs-panel p {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--qs-muted);
    margin: 0 0 10px;
}
.qs-sub-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--qs-accent, var(--qs-azul));
    text-decoration: none;
}
.qs-sub-link:hover { text-decoration: underline; }
.qs-sub-link::after {
    content: '\2192';
    font-weight: 700;
}

.qs-footer {
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid var(--qs-line);
    font-size: 13px;
    color: var(--qs-muted);
}

@media (max-width: 860px) {
    .qs-name-grid,
    .qs-vm-grid,
    .qs-team-grid { grid-template-columns: 1fr; }
    .qs-sub-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .qs-sub-grid { grid-template-columns: 1fr; }
}


/* =============================================================
   SECCION 7 -- bloque_resultado.php (variante compacta .ecx-data-compact
   + header de evento/sesión de este fragmento)
============================================================= */
/* ---------------------------------------------------------------
   Ajustes de esta tabla en particular: más compacta, línea
   divisoria suave visible, +10% de tamaño de fuente, y todo
   centrado verticalmente de verdad. Selectores repetidos/reforzados
   a propósito (".ecx-data-compact.ecx-data" en vez de solo
   ".ecx-data-compact") para tener más especificidad que las reglas
   genéricas de head.php y que esto gane sin pelear con !important.
   ------------------------------------------------------------- */
table.ecx-data-compact.ecx-data{ font-size:13.2px; } /* 12px base +10% */
table.ecx-data-compact.ecx-data thead th{
  font-size:10.5px; /* 9.5px base +10% */
  padding:6px 10px;
  vertical-align:middle;
}
table.ecx-data-compact.ecx-data tbody td{
  padding:5px 10px; /* antes heredaba un padding mucho más generoso -- esto es lo que realmente compacta el alto de fila */
  border-bottom:1px solid rgba(17,23,31,.08); /* línea suave pero visible -- antes el borde heredado se perdía casi del todo contra el fondo */
  vertical-align:middle;
  line-height:1.25;
}
table.ecx-data-compact.ecx-data td.ecx-num,
table.ecx-data-compact.ecx-data th.ecx-num{
  /* .ecx-num usa fuente monoespaciada (var(--mono)) -- distintas
     fuentes mono tienen métricas de altura de línea MUY distintas
     entre sí (más notorio todavía si la fuente pedida por @import no
     llega a cargar y cae a un fallback genérico del sistema), así
     que se fija el line-height acá explícito en vez de dejarlo
     "flotar" con la fuente que sea -- así la fila no se infla según
     qué fuente termine renderizando.
  */
  line-height:1.25;
}
/* Centrado vertical real de cada pieza dentro de su celda -- antes
   dependía de que cada imagen/span "cayera bien" con el line-height
   de la fila, ahora se fuerza explícito elemento por elemento. */
table.ecx-data-compact.ecx-data tbody td,
table.ecx-data-compact.ecx-data .badge-nro,
table.ecx-data-compact.ecx-data .ecx-res-retrato,
table.ecx-data-compact.ecx-data .ecx-marca-logo,
table.ecx-data-compact.ecx-data .ecx-piloto span{
  vertical-align:middle;
}
table.ecx-data-compact.ecx-data .ecx-marca-wrap{
  display:inline-flex;
  align-items:center; /* logo + nombre de marca centrados entre sí -- en un span interno, no en el <td>, para no romper la sincronización de alto de fila que da display:table-cell */
  gap:6px;
}
table.ecx-data-compact.ecx-data .ecx-marca-logo-box{
  /* Caja de tamaño FIJO para el logo -- antes solo tenía
     max-width/max-height en la imagen, que deja que cada logo (con
     su propia relación de aspecto real) ocupe un ancho distinto y
     corra el texto de al lado según el logo de turno. Con una caja
     fija + flex centrado, TODOS los logos quedan alineados exacto
     en la misma posición, sea cual sea su forma real. */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:16px;
  flex-shrink:0;
}
table.ecx-data-compact.ecx-data .ecx-marca-logo{
  max-width:100%;max-height:100%;
  object-fit:contain;
}
table.ecx-data-compact.ecx-data .ecx-marca-wrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
/* Header con evento + sesión, arriba de la tabla */
.ecx-res-header{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:8px 10px;margin-bottom:2px;
  font-family:var(--sans,"Roboto Condensed",sans-serif);
}
.ecx-res-header .ecx-res-evento{ font-size:14.5px; font-weight:800; color:var(--text-0,#16181c); }
.ecx-res-header .ecx-res-sep{ color:var(--text-3,#69717d); }
.ecx-res-header .ecx-res-sesion{ font-size:12.5px; font-weight:600; color:var(--text-2,#4d5561); text-transform:uppercase; letter-spacing:.03em; }


/* =============================================================
   SECCION 8 -- Buscar.php (cabecera de resultados + tag de serie)
============================================================= */
        .ms360-buscar-head{margin:0 0 6px}
        .ms360-buscar-titulo{font-family:"Roboto Condensed",sans-serif;font-weight:800;font-size:26px;color:var(--ink);margin:0 0 4px}
        .ms360-buscar-titulo b{color:var(--blue)}
        .ms360-buscar-cant{font-size:13px;color:var(--muted)}

        .ms360-buscar-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 26px;border-bottom:1px solid var(--line);padding-bottom:14px}
        .ms360-buscar-tab{
            font-family:"Roboto Condensed",sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;
            letter-spacing:.3px;padding:8px 16px;border-radius:20px;text-decoration:none;
            background:var(--soft);color:var(--muted);
        }
        .ms360-buscar-tab.is-active{background:var(--blue);color:#fff}

        .ms360-buscar-seccion{margin-bottom:36px}
        .ms360-buscar-seccion-titulo{
            font-family:"Roboto Condensed",sans-serif;font-weight:800;font-size:17px;
            text-transform:uppercase;color:var(--ink);margin:0 0 14px;
            display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
        }
        .ms360-buscar-vermas{font-size:12px;font-weight:600;color:var(--blue);text-decoration:none}

        .ms360-buscar-subgrupo-titulo{
            font-family:"Roboto Condensed",sans-serif;font-weight:700;font-size:13px;
            color:var(--muted);margin:18px 0 4px;text-transform:uppercase;letter-spacing:.3px;
        }
        .ms360-buscar-subgrupo-titulo:first-child{margin-top:0}

        .ms360-buscar-vacio{padding:40px 0;text-align:center;color:var(--muted)}
        .ms360-buscar-vacio b{color:var(--ink)}

        .ms360-buscar-paginado{display:flex;gap:8px;justify-content:center;margin-top:24px}
        .ms360-buscar-paginado a, .ms360-buscar-paginado span{
            min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;
            border-radius:8px;border:1px solid var(--line);font-size:13px;font-weight:600;
            text-decoration:none;color:var(--ink);
        }
        .ms360-buscar-paginado .is-active{background:var(--blue);border-color:var(--blue);color:#fff}

        /* Etiqueta de serie/año en cada card de piloto -- no existe en
           VerPilotos.php (ahí toda la grilla es de una sola categoría),
           pero acá los resultados mezclan series distintas. Con logo
           destacado, como un badge -- mismos tonos oscuros que
           .vpl-team/.vpl-brand, esa zona de la card es clara, no un
           overlay sobre la foto. */
        .vpl-serie-tag{
            display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:3px 8px 3px 3px;
            border-radius:20px;background:rgba(0,0,0,.06);
            max-width:64%;box-sizing:border-box;
        }
        .vpl-serie-tag-logo{width:18px;height:18px;object-fit:contain;border-radius:50%;background:#fff;flex-shrink:0}
        .vpl-serie-tag span{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:#3a3f46;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* =============================================================
   SECCION 9 -- ListadoCategoria.php (cabecera + selector de vista +
   grilla de notas en 3 modos + paginación). Nota: este bloque
   tambien cubre las reglas .ms360-listado-grid / .ms360-list-*
   que Buscar.php reutilizaba duplicadas en su propio <style> --
   se dejó un solo lugar para ambas páginas.
============================================================= */
/* ---- ListadoCategoria: cabecera + selector de vista ---- */
.ms360-listado-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
}
.ms360-view-toggle{
    display:inline-flex;
    gap:4px;
    padding:4px;
    background:rgba(0,0,0,.06);
    border-radius:999px;
}
.ms360-view-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:0;
    background:transparent;
    color:inherit;
    opacity:.6;
    font-size:.85rem;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    transition:background .15s ease, opacity .15s ease, color .15s ease;
}
.ms360-view-btn svg{ fill:none; stroke:currentColor; stroke-width:1.6; }
.ms360-view-btn:hover{ opacity:1; }
.ms360-view-btn.is-active{
    opacity:1;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    font-weight:600;
}
.ms360-view-btn span{ display:none; }
@media (min-width:640px){
    .ms360-view-btn span{ display:inline; }
}

/* ---- Grilla de notas: 3 modos ---- */
.ms360-listado-grid{ margin-top:20px; }

/* Mosaico (masonry con columnas CSS, tarjetas de alto variable) */
.ms360-listado-grid[data-view="mosaico"]{
    column-count:1;
    column-gap:20px;
}
@media (min-width:640px){ .ms360-listado-grid[data-view="mosaico"]{ column-count:2; } }
@media (min-width:1024px){ .ms360-listado-grid[data-view="mosaico"]{ column-count:3; } }
.ms360-listado-grid[data-view="mosaico"] .post{
    display:inline-block;
    width:100%;
    break-inside:avoid;
    margin-bottom:20px;
}

/* Grid (todas las tarjetas del mismo alto) */
.ms360-listado-grid[data-view="grid"]{
    display:grid;
    grid-template-columns:repeat(1,1fr);
    gap:20px;
    align-items:stretch;
}
@media (min-width:640px){ .ms360-listado-grid[data-view="grid"]{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .ms360-listado-grid[data-view="grid"]{ grid-template-columns:repeat(3,1fr); } }
.ms360-listado-grid[data-view="grid"] .post{
    display:flex;
    flex-direction:column;
    height:100%;
}
.ms360-listado-grid[data-view="grid"] .post img{
    aspect-ratio:16/10;
    object-fit:cover;
}
.ms360-listado-grid[data-view="grid"] .post-content{ flex:1; display:flex; flex-direction:column; }

/* Lista (tarjeta propia, no reutiliza .post) */
.ms360-listado-grid[data-view="lista"]{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-width:760px;
    margin:0 auto;
}
/* .post (tarjeta con imagen de fondo + overlay del sitio) se oculta
   en modo lista; sólo se muestra .ms360-list-card. En mosaico/grid
   es al revés: .ms360-list-card queda oculta por defecto más abajo. */
.ms360-listado-grid[data-view="lista"] .post{
    display:none;
}
.ms360-list-card{
    display:none; /* oculta salvo en modo lista, ver regla de arriba */
}
.ms360-listado-grid[data-view="lista"] .ms360-list-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    padding:10px;
    text-decoration:none;
    color:#111;
    transition:box-shadow .15s ease, border-color .15s ease;
}
.ms360-listado-grid[data-view="lista"] .ms360-list-card:hover{
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    border-color:rgba(0,0,0,.14);
}
.ms360-list-thumb-link{
    flex:none;
    display:block;
    line-height:0;
}
.ms360-list-thumb{
    width:96px;
    height:96px;
    object-fit:cover;
    border-radius:10px;
    display:block;
}
.ms360-list-body{
    flex:1;
    min-width:0;
}
.ms360-list-badges{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:4px;
}
.ms360-list-badge{
    display:inline-block;
    font-size:.68rem;
    font-weight:600;
    line-height:1;
    padding:4px 8px;
    border-radius:999px;
    background:#eef1f5;
    color:#334;
    text-decoration:none;
}
.ms360-list-badge.is-primary{ background:#1c5cff; color:#fff; }
.ms360-list-badge.is-secondary{ background:#111; color:#fff; }
.ms360-list-title{
    margin:0 0 4px;
    font-size:.98rem;
    line-height:1.35;
}
.ms360-list-title a{
    color:#111;
    text-decoration:none;
}
.ms360-list-title a:hover{ text-decoration:underline; }
.ms360-list-excerpt{
    margin:0 0 6px;
    font-size:.82rem;
    color:rgba(0,0,0,.6);
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.ms360-list-meta{
    display:flex;
    gap:14px;
    font-size:.75rem;
    color:rgba(0,0,0,.45);
}
@media (max-width:480px){
    .ms360-list-thumb{ width:76px; height:76px; }
    .ms360-list-excerpt{ display:none; }
}

/* ---- Paginador ---- */
.ms360-paginacion{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    margin:36px 0 8px;
}
.ms360-pg-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 8px;
    border-radius:10px;
    text-decoration:none;
    color:inherit;
    font-size:.9rem;
    font-weight:500;
    background:rgba(0,0,0,.05);
    transition:background .15s ease, color .15s ease, transform .1s ease;
}
.ms360-pg-btn:hover{ background:rgba(0,0,0,.1); }
.ms360-pg-btn:active{ transform:scale(.96); }
.ms360-pg-btn.is-active{
    background:#111;
    color:#fff;
    cursor:default;
}
.ms360-pg-arrow.is-disabled{
    opacity:.3;
    pointer-events:none;
}
.ms360-pg-ellipsis{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:24px;
    height:38px;
    opacity:.5;
}


/* =============================================================
   SECCION 10 -- historial_cambios.php (widget temporal, incluido
   desde VerPiloto.php)
============================================================= */
/* Todo prefijado con .hc- a propósito -- el sitio ya tiene clases
   genéricas como .grid/.label/.date/.block/.change/.equipo/.auto
   definidas en head.php para OTRAS cosas (ej. .equipo ya es una
   clase real de VerEquipo.php); sin el prefijo, este bloque pisaría
   o heredaría estilos que no le corresponden. */
.hc-wrap{max-width:1500px;margin:20px auto 0}
.hc-timeline{
  width:100%;
  overflow-x:auto;
  border:1px solid #cfd5da;
  background:#fff;
  border-radius:10px;
}
.hc-grid{
  display:grid;
  /* grid-template-columns se define inline por PHP, según la
     cantidad REAL de fechas (puede ser menos o más de 12) --
     ver hc-grid más abajo. Si quedara fijo en 12 acá y hay menos
     fechas reales, el grid queda corto y el browser "rellena" las
     celdas sobrantes de cada fila con el contenido de la fila
     siguiente (bug visto en producción: labels como EQUIPO/AUTO
     corriéndose hacia arriba y pisando la fila anterior). */
}
.hc-cell{
  min-height:26px;
  padding:2px 4px;
  border-right:1px solid rgba(0,0,0,.10);
  border-bottom:1px solid rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  /* Mismo criterio que .vp-perf-table (tabla de "Desempeño por
     carrera" más abajo en esta misma página): JetBrains Mono como
     base para datos, Roboto Condensed para labels/headers y nombres
     propios (ver .hc-label y .hc-block más abajo). */
  font-family:'JetBrains Mono','Consolas',monospace;
  font-size:11.5px;
  color:#18232d;
}
.hc-label{
  justify-content:flex-start;
  padding-left:6px;
  font-family:"Roboto Condensed",sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.hc-date{
  min-height:26px;
  display:block;
  padding:2px 3px;
  background:#27333d;
  color:#fff;
  border-color:#46515a;
}
.hc-date b{display:block;font-size:10px}
.hc-date span{display:block;margin-top:1px;font-size:8px;color:#c6cdd2}

.hc-equipo{background:#eaf4fb}
.hc-auto{background:#e9f8f8}
.hc-motorista{background:#fff3e8}
.hc-chasista{background:#f2edfb}

.hc-label.hc-equipo{background:#dceef9;color:#12668f}
.hc-label.hc-auto{background:#d9f0f1;color:#167478}
.hc-label.hc-motorista{background:#ffead5;color:#9a581c}
.hc-label.hc-chasista{background:#e9e0f7;color:#68459a}

.hc-empty{background:#f7f8f9}

.hc-block{
  justify-content:flex-start;
  text-align:left;
  font-family:"Roboto Condensed",sans-serif;
  font-weight:700;
  padding-left:6px;
  white-space:nowrap;
}
.hc-block span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hc-block.hc-change{border-left:4px solid rgba(0,0,0,.42)}
.hc-block.hc-equipo.hc-change{background:#c8e7f8}
.hc-block.hc-auto.hc-change{background:#c4ebec}
.hc-block.hc-motorista.hc-change{background:#ffe0bd}
.hc-block.hc-chasista.hc-change{background:#ded0ef}

.hc-block:not(.hc-change){border-left:4px solid transparent}

.hc-titulo{
  font-family:"Roboto Condensed",sans-serif;
  font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--vp-text,#12151c);
  margin:0 0 8px;
  display:flex;align-items:center;gap:9px;
}
.hc-titulo i{color:var(--vp-accent,#1264d8)}
.hc-nota{font-size:10.5px;color:var(--vp-dim,#69717d);margin:8px 2px 0}


/* =============================================================
   SECCION 11 -- Pag-Api.php (pagina de la API)
   V4: inspirada en mockup de referencia -- hero con panel de
   codigo + tarjetas flotantes de datos reales, barra de stats en
   degrade, grid de cobertura, cards con acento inferior, seccion
   de integracion con checklist + terminal curl, CTA final en
   degrade. Todo con datos reales via PHP, sin imagenes stock.
============================================================= */
.api-wrap{
    --api-accent: var(--blue);
}

/* -------- Hero -------- */
.api-hero{
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 32px 4px 26px;
    overflow: visible;
}
.api-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: 1.6px;
    color: var(--blue);
    margin: 0 0 14px;
}
.api-eyebrow-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.api-hero-inner{ position: relative; z-index: 1; flex: 1 1 440px; min-width: 0; }
.api-hero h1{
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.02;
    margin: 0 0 16px;
    color: var(--ink);
    letter-spacing: -1px;
}
.api-hero h1 span{
    display: block;
    color: var(--blue);
}
.api-hero p{
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 14px;
    max-width: 460px;
}
.api-hero-actions{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 22px; }
.api-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--blue);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    padding: 13px 26px;
    border-radius: var(--radius);
    text-decoration: none;
    box-shadow: 0 10px 24px -8px rgba(18,100,216,.55);
    transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.api-btn:hover{ background: #0d52b8; transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(18,100,216,.6); }
.api-btn.ghost{
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: none;
}
.api-btn.ghost:hover{ background: var(--soft); transform: translateY(-2px); }

.api-trust{
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.api-trust-item{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
}
.api-trust-item i{ color: var(--blue); font-size: 13px; }

/* -------- Media del hero: panel de codigo + tarjetas flotantes -------- */
.api-hero-media{
    position: relative;
    z-index: 1;
    flex: 1 1 440px;
    min-width: 300px;
    max-width: 480px;
    padding: 30px 22px 46px 0;
}
.api-hero-media::before{
    content: '';
    position: absolute;
    inset: -10% -10% 0 10%;
    background: radial-gradient(circle at 60% 35%, color-mix(in srgb, var(--blue) 14%, transparent) 0%, transparent 62%);
    pointer-events: none;
    z-index: -1;
}
.api-code-window{
    background: var(--ink);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 28px 60px -24px rgba(17,19,23,.55);
}
.api-code-topbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.api-code-route{
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 10.5px;
    color: #a8b3c4;
}
.api-code-status{
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #22c55e;
    background: rgba(34,197,94,.14);
    padding: 3px 8px;
    border-radius: 20px;
}
.api-code-body{
    padding: 18px 18px 20px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.85;
}
.api-code-line{ color: #c9d1d9; white-space: pre; }
.api-code-line .k{ color: #7dd3fc; }
.api-code-line .s{ color: #a5d6ff; }
.api-code-line .n{ color: #ffa657; }
.api-code-line .p{ color: #6a7688; }

.api-float-card{
    position: absolute;
    background: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 18px 40px -18px rgba(17,19,23,.4);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 128px;
}
.api-float-card i{
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--soft);
    color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.api-float-num{ font-family: "Oxanium", sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1; }
.api-float-lbl{ font-size: 9.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .2px; margin-top: 2px; }
.api-float-1{ top: -14px; right: -6px; }
.api-float-2{ bottom: 10px; left: -18px; }

@media (max-width: 900px){
    .api-hero{ flex-direction: column; align-items: stretch; }
    .api-hero-media{ order: -1; max-width: 100%; padding: 20px 10px 40px; margin-bottom: 6px; }
}
@media (max-width: 560px){
    .api-float-card{ display: none; }
}

/* -------- Stats -- barra en degrade -------- */
.api-stats{
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--radius-card);
    background: linear-gradient(120deg, var(--ink) 0%, #1c2340 45%, var(--purple) 100%);
    margin-top: 42px;
    overflow: hidden;
    box-shadow: 0 26px 50px -30px rgba(17,19,23,.5);
}
.api-stat{
    flex: 1 1 150px;
    padding: 26px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-right: 1px solid rgba(255,255,255,.12);
}
.api-stat:last-child{ border-right: none; }
.api-stat i{ font-size: 22px; color: #fff; opacity: .85; }
.api-stat-num{
    font-family: "Oxanium", sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.api-stat-label{
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(255,255,255,.65);
}
@media (max-width: 760px){
    .api-stat{ flex: 1 1 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); }
}

/* -------- Secciones con tag diagonal -------- */
.api-section{ margin-top: 56px; }
.api-tag{ display: inline-flex; gap: 3px; margin-right: 10px; vertical-align: middle; }
.api-tag span{
    display: block; width: 4px; height: 19px;
    transform: skewX(-14deg);
    background: var(--api-tag-color, var(--blue));
}
.api-tag span:nth-child(2){ opacity: .55; }
.api-tag span:nth-child(3){ opacity: .28; }
.api-eyebrow-sm{
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0 0 8px;
}
.api-section h2{
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 20px;
    letter-spacing: -.5px;
    line-height: 1.15;
    max-width: 620px;
}
.api-section h2 .api-tag{ margin-bottom: 2px; }

/* -------- Cobertura: grid de series reales -------- */
.api-coverage-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.api-coverage-item{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 16px 10px;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.api-coverage-item:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(17,19,23,.4); border-color: var(--blue); }
.api-coverage-item img{ width: 40px; height: 40px; object-fit: contain; display: block; margin: 0 auto 8px; }
.api-coverage-item span{
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
    color: var(--muted);
    display: block;
}
.api-coverage-empty{ color: var(--muted); font-size: 13px; }

/* -------- Cards "Que incluye" -------- */
.api-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}
.api-card{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 24px 22px 20px;
    box-shadow: 0 14px 32px -26px rgba(17,19,23,.5);
    transition: transform .18s ease, box-shadow .18s ease;
}
.api-card:hover{ transform: translateY(-4px); box-shadow: 0 22px 42px -24px rgba(17,19,23,.55); }
.api-card-icon{
    width: 42px; height: 42px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--api-accent, var(--blue));
    color: #fff;
    font-size: 18px;
    margin-bottom: 16px;
}
.api-card h3{ font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.api-card p{ font-size: 12.5px; line-height: 1.6; color: var(--text); margin: 0 0 14px; }
.api-card-bar{ width: 26px; height: 3px; border-radius: 2px; background: var(--api-accent, var(--blue)); }

/* -------- Integracion: checklist + terminal -------- */
.api-integ{
    display: flex;
    gap: 40px;
    align-items: center;
}
.api-integ-copy{ flex: 1 1 320px; min-width: 0; }
.api-integ-copy > p{ font-size: 14px; line-height: 1.7; color: var(--text); max-width: 420px; margin: 0 0 20px; }
.api-checklist{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.api-checklist li{ display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.api-checklist i{ color: #159447; font-size: 15px; }

.api-integ-media{ flex: 1 1 400px; min-width: 280px; max-width: 480px; position: relative; }
.api-terminal{
    background: var(--ink);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 28px 60px -22px rgba(17,19,23,.55);
}
.api-terminal-topbar{
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.api-tdot{ width: 9px; height: 9px; border-radius: 50%; display: block; }
.api-tdot.r{ background: #ff5f56; } .api-tdot.y{ background: #ffbd2e; } .api-tdot.g{ background: #27c93f; }
.api-terminal-body{
    padding: 18px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 11.5px;
    line-height: 1.85;
}
.api-terminal-line{ color: #c9d1d9; white-space: pre-wrap; word-break: break-word; }
.api-terminal-line .k{ color: #7dd3fc; }
.api-terminal-line .s{ color: #a5d6ff; }
.api-terminal-line .n{ color: #ffa657; }
.api-terminal-line .cmd{ color: #79c0ff; font-weight: 700; }
.api-terminal-line .flag{ color: #ffa657; }
.api-badge-chip{
    position: absolute;
    background: var(--ink);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: 0 14px 30px -14px rgba(17,19,23,.55);
}
.api-badge-1{ top: -14px; left: -14px; transform: rotate(-6deg); }
.api-badge-2{ bottom: -12px; right: -10px; transform: rotate(5deg); background: var(--blue); }
@media (max-width: 900px){
    .api-integ{ flex-direction: column; align-items: stretch; }
    .api-integ-media{ max-width: 100%; margin-top: 18px; }
}
@media (max-width: 560px){
    .api-badge-chip{ display: none; }
}

/* -------- Precios + calculadora -------- */
.api-pricing-grid{
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 16px;
}
.api-pricing-info, .api-calc{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 24px 26px;
    box-shadow: 0 16px 40px -28px rgba(17,19,23,.4);
}
.api-price-item{ padding: 14px 0; border-bottom: 1px solid var(--line); }
.api-price-item:last-child{ border-bottom: none; }
.api-price-title{ font-size: 13.5px; font-weight: 800; color: var(--ink); }
.api-price-sub{ font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.api-price-value{ margin-top: 7px; font-size: 15px; font-weight: 800; color: var(--blue); }

.api-calc h3{ font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.api-calc > p{ font-size: 13px; color: var(--text); line-height: 1.65; margin: 0 0 20px; }
.api-slider{ margin-bottom: 20px; }
.api-slider label{ font-size: 12px; color: var(--ink); font-weight: 600; display: block; margin-bottom: 7px; }
.api-slider-row{ display: flex; align-items: center; gap: 10px; }
.api-slider-row input[type="range"]{ flex: 1; accent-color: var(--blue); }
.api-slider-val{ font-size: 12.5px; font-weight: 800; color: var(--blue); min-width: 78px; text-align: right; }
.api-result{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.api-result-label{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); margin-bottom: 10px; }
.api-factura{ font-size: 12.5px; line-height: 1.85; color: var(--ink); }
.api-total-wrap{ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.api-total-label{ font-size: 11px; color: var(--muted); }
.api-total{ font-size: 30px; font-weight: 800; color: var(--green); }

@media (max-width: 900px){
    .api-pricing-grid{ grid-template-columns: 1fr; }
}

/* -------- CTA final -------- */
.api-cta{
    margin-top: 56px;
    padding: 44px 40px;
    background: linear-gradient(120deg, var(--blue) 0%, var(--purple) 100%);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: 0 26px 55px -26px rgba(18,100,216,.5);
}
.api-cta-copy h2{ font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 8px; letter-spacing: -.3px; }
.api-cta-copy p{ font-size: 13.5px; color: rgba(255,255,255,.85); margin: 0; max-width: 420px; }
.api-cta .api-btn{ background: #fff; color: var(--blue); box-shadow: none; flex-shrink: 0; }
.api-cta .api-btn:hover{ background: #eef4ff; transform: translateY(-2px); }


/* =============================================================
   SECCION 12 -- api.php (boton "volver arriba")
============================================================= */
#top-btn{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(12px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
#top-btn.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}