/* ══════════════════════════════════════════════════════════════════════
   ROC · CAPA DE REFINAMIENTO COMPARTIDA · v1 · 06/08/2026
   ══════════════════════════════════════════════════════════════════════

   QUÉ ES ESTO
   -----------
   Es la misma capa que ya lleva la portada, pero en un archivo aparte
   para no tener que copiarla dentro de cada página. Se enlaza así, y
   SIEMPRE justo después de roc-tokens.css, al final del <head>:

       <link rel="stylesheet" href="/roc-tokens.css">
       <link rel="stylesheet" href="/roc-refinamiento.css">

   CÓMO SE DESHACE
   ---------------
   Borrando esa línea de la página. Nada más. Este archivo no toca
   ninguna regla de las que ya tenías: se limita a llegar después.

   POR QUÉ FUNCIONA
   ----------------
   El CSS que llega el último gana cuando la precisión es la misma. Por
   eso el enlace va al final del <head>, después de los <style> propios
   de cada página. Lo que este archivo NO puede ganar son los estilos
   escritos dentro de las etiquetas (style="..."), que van aparte.

   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   1 · FICHAS Y VARIABLES
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --roc-red:      #e11d48;
  --roc-red-soft: #e84a6d;

  /* Tres radios en vez de los quince que había repartidos por la web */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Tipografía de ancho fijo para cifras */
  --font-num: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Línea de telemetría: rayas cortas en vez de borde macizo */
  --tel: repeating-linear-gradient(90deg, var(--border) 0 22px, transparent 22px 30px);
}

/* ── El acento del tema claro ──────────────────────────────────────────
   Había páginas donde el tema claro ponía el acento en AZUL (#3b82f6),
   en una web que es roja. Se cubren las dos formas de escribirlo que
   usa el proyecto. */
:root[data-theme="light"]{ --accent: #be123c; }
html.light{ --accent: #be123c; }


/* ══════════════════════════════════════════════════════════════════════
   2 · NÚMEROS QUE NO BAILAN
   --------------------------------------------------------------------
   Dígitos de ancho fijo. Al actualizarse un tiempo o una posición, la
   columna no se mueve ni un píxel. Se nota en el live timing, en los
   rankings y en las tablas de resultados.
   ══════════════════════════════════════════════════════════════════════ */
body{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Y tipografía monoespaciada en los sitios donde el número ES el dato */
.ev-countdown, .ev-val, .ev-time, .lap-time, .best-lap, .gap,
.driver-num, .pos, .rank-pos{
  font-family: var(--font-num);
  letter-spacing: -.02em;
}


/* ══════════════════════════════════════════════════════════════════════
   3 · CABECERA
   --------------------------------------------------------------------
   Sin fondo y sin desenfoque: así estaba en origen y así debe quedarse.
   Su línea inferior pasa a ser de telemetría.
   Clase presente en: index, garage, h2h, hotlaps, ranking.
   ══════════════════════════════════════════════════════════════════════ */
.dash-header{
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  position: relative;
}
.dash-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--tel);
}


/* ══════════════════════════════════════════════════════════════════════
   3bis · CABECERA FIJA (.header)
   --------------------------------------------------------------------
   Ojo: esta cabecera SÍ lleva fondo a propósito, y debe seguir
   llevándolo. Es `position: sticky`, o sea que se queda pegada arriba
   mientras haces scroll y el contenido pasa por detrás. Sin fondo
   opaco, el texto de la página se vería a través de ella.

   Lo que sí sobra es el desenfoque: `--panel` es #0d1117, un color
   100% opaco. Desenfocar lo que hay detrás de una superficie que no
   deja ver nada es coste puro sin ningún efecto visible. Fuera.

   Y el borde macizo de abajo pasa a línea de telemetría, para que
   case con el resto de la web.

   Presente en: championships, reglamento, guia-nuevos, pilotos.
   ══════════════════════════════════════════════════════════════════════ */
.header{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  position: sticky;
}
.header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--tel);
}


/* ══════════════════════════════════════════════════════════════════════
   3ter · BLOQUE DE MARCA EN LA CABECERA
   --------------------------------------------------------------------
   El mismo par "Racing Online Club / título" que lleva la portada,
   con la barrita roja a la izquierda. Sirve para cualquier página:
   basta con envolver el h1 en .roc-brand-block y poner encima un
   enlace con clase .roc-brand.
   ══════════════════════════════════════════════════════════════════════ */
.roc-brand-block{
  border-left: 3px solid var(--roc-red);
  padding-left: 12px;
}
.roc-brand{
  display: block;
  font-family: var(--font-display, 'Rajdhani', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--roc-red-soft);
  text-decoration: none;
  margin-bottom: 2px;
  transition: color .2s;
}
.roc-brand:hover{ color: var(--text); }
:root[data-theme="light"] .roc-brand,
html.light .roc-brand{ color: #be123c; }
:root[data-theme="light"] .roc-brand-block,
html.light .roc-brand-block{ border-left-color: #be123c; }


/* ══════════════════════════════════════════════════════════════════════
   3quater · BARRA LATERAL ANTIGUA FUERA
   --------------------------------------------------------------------
   Había dos menús a la vez: la barra de la izquierda, distinta en cada
   página, y el botón "Menú" de roc-nav.js, igual en todas. Dos menús
   que no coinciden confunden más que uno solo.

   Se queda el botón "Menú", que es el único que se mantiene solo: las
   secciones se editan en roc-nav.js y aparecen en todas las páginas a
   la vez. La barra antigua había que tocarla archivo por archivo, y
   por eso nunca cuadraban entre sí.

   POR QUÉ ESTO ES SEGURO: estas páginas YA saben funcionar sin barra.
   Su propio CSS la esconde en móvil y pasa la rejilla a una columna.
   Aquí se hace lo mismo, pero en todos los tamaños de pantalla.
   ══════════════════════════════════════════════════════════════════════ */
.sidebar{ display: none !important; }

/* Las páginas de rejilla (championships, hotlaps, garage, pilotos)
   reservaban 260px para la barra. Esa columna ya no hace falta. */
body{ grid-template-columns: 1fr !important; }

/* El pie de la barra no necesita regla propia: va DENTRO del <div class="sidebar">,
   así que desaparece con ella. Comprobado en championships y hotlaps. */


/* ══════════════════════════════════════════════════════════════════════
   4 · RENDIMIENTO
   --------------------------------------------------------------------
   El tirón al abrir el menú venía de animar el ancho de una columna de
   la rejilla: obliga al navegador a recalcular la página entera en cada
   fotograma. Y los desenfoques de fondo se recalculan con ella.
   ══════════════════════════════════════════════════════════════════════ */
body{ transition: none; }
.video-background{ background-attachment: scroll; }
.video-overlay{ backdrop-filter: none; -webkit-backdrop-filter: none; }
.sidebar{ backdrop-filter: none; -webkit-backdrop-filter: none; }
.card, .panel, .dash-card{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }


/* ══════════════════════════════════════════════════════════════════════
   5 · TARJETAS · el brillo del volante
   --------------------------------------------------------------------
   Al pasar el cursor se enciende una línea roja en el borde superior y
   la tarjeta se levanta dos píxeles.

   NOTA TÉCNICA: aquí NO se usa overflow:hidden ni el barrido lateral
   que lleva la portada. La razón es que .card aparece en veinte páginas
   distintas y recortar el contenido rompería cualquier desplegable o
   aviso que asome fuera de su tarjeta. Este efecto es equivalente a la
   vista y no recorta nada.
   ══════════════════════════════════════════════════════════════════════ */
.card, .panel, .dash-card{
  position: relative;
  border-radius: var(--r-lg);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card::before, .panel::before, .dash-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--roc-red), #ff8fa8, var(--roc-red), transparent);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.card:hover::before, .panel:hover::before, .dash-card:hover::before{ opacity: 1; }
.card:hover, .panel:hover, .dash-card:hover{
  border-color: rgba(225,29,72,.42);
  transform: translateY(-2px);
}


/* ══════════════════════════════════════════════════════════════════════
   6 · RADIOS UNIFICADOS
   ══════════════════════════════════════════════════════════════════════ */
.btn-back, .btn-auth-action, .btn-auth-alt, .btn-details,
.tab, .sess-pill, .switch-opt, .sim-btn, .srv-pill{
  border-radius: var(--r-md);
}
.nav-item, .mn-item{ border-radius: var(--r-sm); }
.user-pill, .status-dot{ border-radius: 999px; }


/* ══════════════════════════════════════════════════════════════════════
   7 · LLAMADAS A LA ACCIÓN
   ══════════════════════════════════════════════════════════════════════ */
.btn-details, .btn-auth-action{
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s;
}
.btn-details:hover, .btn-auth-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(225,29,72,.32);
}
.btn-details:active, .btn-auth-action:active{ transform: translateY(0); }


/* ══════════════════════════════════════════════════════════════════════
   8 · LEGIBILIDAD
   --------------------------------------------------------------------
   Suelo de tamaño para los textos secundarios más pequeños. No toca los
   tamaños escritos dentro de las etiquetas, que van aparte.
   ══════════════════════════════════════════════════════════════════════ */
.nav-group{ font-size: 12px; opacity: .85; }
.fixed-bottom{ font-size: 12px; }


/* ══════════════════════════════════════════════════════════════════════
   9 · FOCO VISIBLE
   --------------------------------------------------------------------
   Para quien navega con el teclado.
   ══════════════════════════════════════════════════════════════════════ */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.nav-item:focus-visible, .tab:focus-visible{
  outline: 2px solid var(--roc-red-soft);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}


/* ══════════════════════════════════════════════════════════════════════
   10 · RESPETAR A QUIEN PIDE MENOS MOVIMIENTO
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   FIN DE LA CAPA DE REFINAMIENTO COMPARTIDA
   ══════════════════════════════════════════════════════════════════════ */
