/* ====================================================================
   GAMEROL — tema comun (17/10/2026)
   --------------------------------------------------------------------
   Lleva las paginas del servidor al mismo sitio que la portada: negro
   puro, un solo rojo, tipografia Anton, nada redondeado, nada de
   degradados ni de sombras de colores.

   COMO FUNCIONA: cada pagina trae su CSS dentro del propio HTML y casi
   todo sale de variables. Esta hoja se carga la ULTIMA del <head>, asi
   que sus :root ganan por orden de cascada y repintan la pagina entera
   sin tocar ni una linea del diseno original. Si algun dia hay que
   volver atras, basta con quitar el <link> de la pagina.

   NO cambia textos, ni estructura, ni nada de lo que hace la pagina.

   Cubre los tres juegos de variables que existen en la web:
     1. paginas de seccion (normas, coches, ranking, guia...)
     2. css/styles.css  (panel del jugador y dashboard)
     3. css/login.css   (entrar al panel)
   ==================================================================== */

@font-face{
  font-family:'Anton';
  src:url('/fonts/Anton-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}

:root{
  /* --- la paleta de la portada --- */
  --g-negro:#000;
  --g-humo:#0b0b0b;
  --g-rojo:#ff2a1f;
  --g-rojo-claro:#ff5a51;
  --g-blanco:#fff;
  --g-gris:#7a7a7a;
  --g-gris-claro:#b5b5b5;
  --g-linea:#1f1f1f;
  --g-display:'Anton', 'Haettenschweiler', 'Arial Narrow Bold', Impact, sans-serif;
  --g-cuerpo:'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --g-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- 1. paginas de seccion ---
     --verde y --rosa eran los dos colores de marca (lima y rosa) y en
     estas paginas pintan sobre todo TITULOS. Por eso aqui van en blanco,
     como en la portada: el rojo se reserva para los datos y lo pulsable,
     que se listan mas abajo uno a uno. */
  --negro:#000;
  --negro-panel:#0b0b0b;
  --verde:#fff;
  --rosa:#fff;
  --texto:#fff;
  --texto-tenue:#7a7a7a;
  --borde:#1f1f1f;
  --fuente-marca:'Anton', 'Haettenschweiler', 'Arial Narrow Bold', Impact, sans-serif;

  /* --- 2. css/styles.css (panel y dashboard) --- */
  --dorado:#ff2a1f;
  --dorado-suave:#ff5a51;
  --dorado-tinta:#140302;
  --rojo:#ff2a1f;
  --azul:#b5b5b5;
  --info:#b5b5b5;
  --sunset:#ff2a1f;
  --sunset-suave:#ff5a51;
  --sunset-tinta:#140302;
  --contrabando:#b5b5b5;
  --contrabando-tinta:#0b0b0b;
  --android-verde:#ff2a1f;
  --android-verde-tinta:#140302;
  --fondo:#000;
  --fondo-panel:#0b0b0b;
  --fondo-tarjeta:#0b0b0b;
  --fondo-tarjeta-hover:#141414;
  --borde-dorado:#ff2a1f;
  --texto-apagado:#7a7a7a;
  --radio:0px;
  --radio-chico:0px;
  --sombra:none;
  --sombra-tarjeta:none;
  --sombra-elevada:none;
  --sombra-dorada:none;
  --luz-superior:none;
  --fuente-drip:'Anton', 'Haettenschweiler', 'Arial Narrow Bold', Impact, sans-serif;
  --sup-tarjeta:#0b0b0b;
  --sup-tarjeta-alta:#141414;
  --sup-hundida:#070707;

  /* --- 3. Gamerol TV (/opt/casatv) y Juegos Online (/opt/juegosonline)
     Dos paginas estaticas que sirve nginx fuera de public/, cada una con
     sus propios nombres de variable. */
  --panel:#0b0b0b;
  --rojo-oscuro:#ff2a1f;
  --crema:#fff;
  --scrollbar:#1f1f1f;
  --suave:#7a7a7a;
  --acento:#ff2a1f;

  /* --- 4. css/login.css (entrar al panel) --- */
  --sv-fondo:#000;
  --sv-card:#0b0b0b;
  --sv-input:#0b0b0b;
  --sv-linea:#1f1f1f;
  --sv-lima:#ff2a1f;
  --sv-lima-hover:#ff5a51;
  --sv-rosa:#ff2a1f;
  --sv-texto:#fff;
  --sv-mute:#7a7a7a;
  --sv-placeholder:#5a5a5a;
  --sv-error:#ff2a1f;
  --sv-error-fondo:#140302;
  --sv-cta-disabled-fondo:#1f1f1f;
  --sv-cta-disabled-texto:#7a7a7a;
  --sv-fuente-marca:'Anton', 'Haettenschweiler', 'Arial Narrow Bold', Impact, sans-serif;
}

/* --- Entrar al panel (css/login.css) ---------------------------------
   Alli los tokens --sv-* no estan en :root sino dentro de .lg-samp, que
   gana a un :root. Se repiten aqui con el mismo selector: como esta hoja
   se carga despues, manda la de aqui. */
.lg-samp{
  --sv-fondo:#000;
  --sv-card:#0b0b0b;
  --sv-input:#0b0b0b;
  --sv-linea:#1f1f1f;
  --sv-lima:#ff2a1f;
  --sv-lima-hover:#ff5a51;
  --sv-rosa:#ff2a1f;
  --sv-texto:#fff;
  --sv-mute:#7a7a7a;
  --sv-placeholder:#5a5a5a;
  --sv-error:#ff2a1f;
  --sv-error-fondo:#140302;
  --sv-cta-disabled-fondo:#1f1f1f;
  --sv-cta-disabled-texto:#7a7a7a;
  --sv-fuente-marca:'Anton', 'Haettenschweiler', 'Arial Narrow Bold', Impact, sans-serif;
  --tag-fondo:#ff2a1f;
  --tag-tinta:#000;
}
/* La marca del login va en blanco liso: el degradado recortado sobre el
   texto se come la legibilidad y no pega con el resto. */
.lg-gamerol{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--g-blanco) !important;
  letter-spacing:-.01em;
}
.lg-subtitulo, .lg-titulo{ color:var(--g-rojo) !important; }
.lg-tagline{
  font-family:var(--g-mono) !important;
  font-size:10.5px !important;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--g-gris) !important;
}
.lg-entrar{
  background:var(--g-rojo) !important;
  color:#000 !important;
  font-family:var(--g-display);
  letter-spacing:.5px;
}
.lg-entrar-titulo{ color:var(--g-blanco) !important; }
.lg-tag{ background:var(--g-rojo) !important; color:#000 !important; }
.lg-campo input:focus{ border-color:var(--g-rojo) !important; }

/* --- Fondo negro de verdad, pase lo que pase ------------------------- */
html, body{ background:var(--g-negro); }

/* --- Titulos en Anton: mas anchos, mas altos, sin tanto espaciado ----
   Bungee es cuadrada y ancha; Anton es estrecha y alta. Donde habia un
   letter-spacing pensado para Bungee, aqui sobra. */
h1, h2, h3,
.titulo, .seccion-titulo, .tarjeta-titulo, .panel-titulo{
  font-family:var(--g-display);
  font-weight:400;
  letter-spacing:-.005em;
}

/* --- Nada redondeado, nada de sombras de color ------------------------
   Se listan los sospechosos habituales en vez de usar el selector
   universal, para no romper avatares ni iconos circulares. */
.tarjeta, .panel, .caja, .bloque, .boton, .btn, button,
input, select, textarea,
.sv-card, .sv-input, .sv-cta,
.card, .chip, .pill, .badge{
  border-radius:0 !important;
  box-shadow:none !important;
}

/* --- Enlaces y acentos ----------------------------------------------- */
a{ -webkit-tap-highlight-color:transparent; }
::selection{ background:var(--g-rojo); color:#000; }
:focus-visible{ outline:3px solid var(--g-rojo); outline-offset:2px; }

/* --- Cabecera comun de las paginas de seccion -------------------------
   Casi todas abren con la marca (GAMEROL / Tu segunda vida), un titulo
   grande y un indice de anclas. */
.volver, .atras, .enlace-volver{
  font-family:var(--g-mono);
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--g-gris) !important;
}
.volver:hover, .atras:hover, .enlace-volver:hover{ color:var(--g-rojo) !important; }

.marca-gamerol{ color:var(--g-blanco) !important; letter-spacing:-.01em; }
.marca-sub{
  font-family:var(--g-mono) !important;
  font-size:10.5px !important;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--g-gris) !important;
}
h1.titulo{ color:var(--g-blanco) !important; letter-spacing:-.01em; }

/* El indice de anclas: etiquetas pequenas, rojas al pasar por encima. */
.indice a{
  font-family:var(--g-mono) !important;
  font-size:11px !important;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--g-gris) !important;
  border-bottom:1px solid var(--g-linea);
}
.indice a:hover, .indice a:active{ color:var(--g-rojo) !important; border-color:var(--g-rojo); }

/* --- El rojo, solo para los datos y lo que se pulsa -------------------
   Comandos, siglas, precios, totales, avisos y primeros puestos. */
.cmd, code, .sigla-abrev, .payday, .alerta,
.tarjeta-precio, .tarjeta-franquicia, .total-coches,
.cr-fila.cr-top .cr-fila-nombre, .cr-fila.cr-top .cr-fila-valor,
.tarjeta-estado .libre, .canales-lista dt, .aviso-franquicia b{
  color:var(--g-rojo) !important;
}
.tarjeta-estado .propietario{ color:var(--g-gris-claro) !important; }

/* --- Botones de idioma ------------------------------------------------
   js/idioma-paginas.js mete su propio <style> con !important y un verde
   lima fijo. Se gana con mas especificidad y el mismo !important. */
button.idioma-btn[aria-pressed="true"]{
  background:var(--g-rojo) !important;
  border-color:var(--g-rojo) !important;
  color:#000 !important;
}
button.idioma-btn{ border-color:var(--g-linea) !important; }
button.idioma-btn:focus-visible{ outline:3px solid var(--g-rojo) !important; }

/* --- Barra de la parte de arriba de la pagina ------------------------- */
.g-barra{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--g-linea);
  margin-bottom:22px;
}
.g-volver{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 2px;
  font-family:var(--g-mono);
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--g-gris);
  text-decoration:none;
}
.g-volver:hover, .g-volver:active{ color:var(--g-rojo); }
.g-volver svg{ width:14px; height:14px; }

/* --- Tablas: sin rayas de colores, solo lineas ------------------------ */
table{ border-collapse:collapse; }
th{
  font-family:var(--g-mono);
  font-size:10.5px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--g-gris);
  font-weight:400;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}