/* ============================================================================
   Marca Finerative sobre el Arena.
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de styles.css y no lo reescribe: redefine sus tokens. Toda
   la interfaz (3.400 líneas) los consume, así que retintar la aplicación entera
   es esto y no un rediseño hoja por hoja — y si mañana cambia la marca, cambia
   aquí.

   Los tokens salen del sistema real de finerative.com: mismos hex, mismas
   familias tipográficas, mismo degradado de cuatro paradas.

   Lo único que NO se retinta son los colores de cada IA (Claude, GPT, Grok,
   Kimi): ahí el color es dato, no marca — identifica de quién es cada línea del
   gráfico y cada cartera.
   ========================================================================= */

/* ── Tipografía, autoalojada ────────────────────────────────────────────── */
/* Las mismas dos familias que finerative.com (Hind Madurai + Space Mono), pero
   servidas desde el propio dominio en vez de desde el CDN de Google: 108 KB en
   total, una petición menos a un tercero, y sin el salto tipográfico del primer
   pintado. `swap` para que el texto se lea antes de que llegue la fuente. */

@font-face {
  font-family: "Hind Madurai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fuentes/hind-madurai-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Hind Madurai";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fuentes/hind-madurai-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Hind Madurai";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fuentes/hind-madurai-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Hind Madurai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fuentes/hind-madurai-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fuentes/space-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fuentes/space-mono-latin-700-normal.woff2") format("woff2");
}

:root {
  /* ── Tinta y superficies ─────────────────────────────────────────────── */
  --ink: #1e1733;          /* tinta Finerative: negro violáceo, nunca #000 */
  --muted: #5e5870;
  --soft: #6b6480;         /* 5,9:1 sobre blanco */
  --hairline: #928ca3;     /* bordes e iconos, no texto */
  --line: rgba(30, 22, 52, 0.12);
  --line-2: rgba(30, 22, 52, 0.07);
  --page: #f4f3f8;
  --card: #ffffff;
  --navy: #16213b;         /* el azul del logotipo */

  /* ── Acento ──────────────────────────────────────────────────────────── */
  /* styles.css llama «purple» al acento. Pasa a ser el violeta de Finerative. */
  --purple: #9952e0;
  --purple-soft: #f3ecfc;

  /* Las cuatro paradas de la marca. El degradado es un recurso de identidad
     —el filete de la cabecera, el logotipo— y no un relleno de texto. */
  --g1: #fa8938;
  --g2: #f76e9c;
  --g3: #9952e0;
  --g4: #36e2e2;
  --grad: linear-gradient(135deg, #fa8938 0%, #f76e9c 35%, #9952e0 65%, #36e2e2 100%);

  /* ── Señal de mercado ────────────────────────────────────────────────── */
  /* Verde y rojo siguen siendo verde y rojo —son datos financieros y se leen
     antes que la marca—, pero entintados hacia la paleta. */
  --pos: #0e7a5f;
  --neg: #c2405f;

  /* ── Forma y profundidad ─────────────────────────────────────────────── */
  --radius: 16px;
  /* Sombra con desplazamiento y desenfoque, teñida de la tinta: un halo gris
     centrado no es profundidad, es decoración. */
  --shadow:
    0 1px 2px rgb(30 22 52 / 5%),
    0 26px 42px -30px rgb(30 22 52 / 34%);

  /* Ease-out exponencial. Entrar y salir jamás con ease-in: arranca lento
     justo en el instante que el ojo está mirando. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ── Tipografía ─────────────────────────────────────────────────────────── */

body,
button,
input,
select,
textarea {
  font-family: "Hind Madurai", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

h1,
h2,
h3 {
  font-family: "Hind Madurai", sans-serif;
  letter-spacing: -0.025em;
  /* Sin palabras huérfanas en la última línea de un titular. */
  text-wrap: balance;
}

/* Cifras tabulares en todo lo que sea dato: en una clasificación que se relee
   a diario, los dígitos tienen que caer siempre en la misma columna. No se pone
   en el body entero para no tocar la prosa de los informes de cada IA. */
.stats,
.ranking-list,
.legend,
.chart-tip,
.card table,
.quotes-panel,
svg text,
.mono {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -0.01em;
}

/* ── Superficies del navegador ──────────────────────────────────────────── */
/* Lo que no dibujas también lleva la marca: selección, foco, barra de
   desplazamiento. Vienen de fábrica sin dueño; aquí se les da uno. */

::selection {
  background: rgb(153 82 224 / 20%);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: 4px;
}

html {
  scrollbar-color: var(--hairline) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--hairline);
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  background-clip: content-box;
}

/* ── La marca en la cabecera ────────────────────────────────────────────── */

.brand-logo {
  /* El logotipo es apaisado. Va solo en la cabecera, así que gana un
     poco de presencia. */
  height: 32px;
}

.brand-cup {
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* El filete de marca: las cuatro paradas, 2px, bajo la barra. Es el único
   sitio donde el degradado aparece a pelo, y por eso funciona. */
.topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--grad);
  opacity: 0.9;
}

.topbar {
  position: sticky;
  background: rgb(255 255 255 / 88%);
}

/* ── Pulsables ──────────────────────────────────────────────────────────── */
/* Todo lo que se pulsa acusa el golpe. 140 ms: por debajo del umbral en el que
   se percibe como espera, por encima del que se percibe como salto. */

button,
.btn,
a.torneo {
  transition: transform 140ms var(--ease-out);
}

button:active,
.btn:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}