/* REKTMAP · Copyright 2026 Merleth · Todos los derechos reservados · ver LICENSE */
/* =====================================================================================
   REKTMAP · estilos · base
   Variables de la identidad, reset, tipografía y utilidades. Ámbar sobre negro azulado; verde
   y rojo se reservan para largos y cortos; la marca lleva REKT en rojo y MAP en ámbar.
   ===================================================================================== */
:root {
  /* superficies */
  --fondo: #070a12;
  --fondo-2: #0c1120;
  --panel: rgba(160, 180, 220, 0.04);
  /* los rellenos del rediseño 2.0 (tokens del sistema de diseño): un chip en reposo, con el ratón y elegido, y el
     fondo de las etiquetas de zona sobre el mapa */
  --relleno-suave: rgba(160, 180, 220, 0.06);
  --relleno-hover: rgba(160, 180, 220, 0.10);
  --relleno-activo: rgba(160, 180, 220, 0.12);
  --nivel-fondo: rgba(12, 17, 32, 0.86);
  --desplegable: #141b2d;   /* fondo OPACO de los <select> y sus opciones: ver la nota más abajo */
  --linea: rgba(160, 180, 220, 0.10);
  --linea-suave: rgba(160, 180, 220, 0.06);
  --linea-fuerte: rgba(160, 180, 220, 0.22);
  /* texto */
  --texto: #e9edf5;
  --texto-2: #a3adc2;
  /* Aclarado el 5-sep-2026: con #6b7690, diez de los treinta y nueve estilos de texto se
     quedaban entre 3,93 y 4,35 de contraste, por debajo del 4,5 que pide la WCAG AA. Son las
     etiquetas pequeñas —«APALANCAMIENTO», «velas de 5m», «63 % del OI»—, justo las que más
     cuesta leer. Este tono da 5,6 sobre el fondo y 5,3 sobre los paneles, y sigue por debajo de
     --texto-2, así que la jerarquía de la interfaz no cambia. */
  --texto-3: #7d88a6;
  --sobre-acento: #14100a;   /* el texto sobre el ámbar (10,7:1) */
  /* acento y marca */
  --acento: #f5b942;
  --acento-rgb: 245, 185, 66;
  --acento-fuerte: #ff9f1c;
  --acento-suave: rgba(245, 185, 66, 0.12);
  --rekt: #ff0000;
  /* lados y apoyos */
  --largo: #2fd6a0;
  --largo-rgb: 47, 214, 160;
  --corto: #ff5c7a;
  /* la posición abierta de un bot, en su tarjeta (1.11.18); su liquidación va en --rekt */
  --posicion: #ff9800;
  /* apalancamientos: los escribe src/nucleo/tema.js según la paleta elegida */
  --apal-5: #a78bfa;
  --apal-10: #4c8dff;
  --apal-25: #22d3ee;
  --apal-50: #f5b942;
  --apal-75: #ffa43a;
  --apal-100: #ff6b3d;
  --escala-calor: linear-gradient(90deg, rgba(8, 12, 36, 0.15), rgba(20, 52, 128, 0.6), rgba(48, 96, 184, 0.75), rgba(245, 185, 66, 0.93), rgba(255, 159, 28, 0.96), #ffffff);
  /* tipografía */
  --f-titulo: "Sora", system-ui, -apple-system, sans-serif;
  --f-texto: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* forma */
  --radio: 12px;
  --radio-s: 8px;
  --radio-chip: 7px;
  --sombra: 0 12px 34px rgba(0, 0, 0, 0.45);
  /* los estados de fallo (rediseño 3.0, tarea 14): el ámbar claro de SIN DATOS, SIN PROXY, ERROR y de los avisos, y la sombra
     de una tarjeta que flota sobre una vista; los dos, de tokens.css del paquete del rediseño */
  --aviso-texto: #ffd9a3;
  --sombra-larga: 0 16px 48px -8px rgba(0, 0, 0, 0.45);
  /* tiempo y curva (1.11.0). Antes todo iba a 140ms ease, cada cosa a su aire; ahora dos o tres
     variables, como en los referentes medidos (docs/ANIMACIONES.md): xAI repite 150 ms en 106
     elementos, Tesla 330 ms en 329. t-rapido es para las SALIDAS (siempre más cortas que la
     entrada), t-base para ESTADOS que solo repintan (color, fondo, borde), t-entrada para
     entradas que no son paneles flotantes (los de este paquete van a 150 ms con
     curva-salida-rapida: úsalo donde toque, p. ej. el pie). curva-estandar es la deceleración de
     xAI; curva-salida-rapida hace que un panel «se coloque» en vez de aparecer a golpe;
     curva-revelado es la salida exponencial de SpaceX, para lo que se ve UNA VEZ (aquí, el
     destello del titular al saltar desde el índice de una guía; --t-revelado, el tiempo a
     juego —480 ms—, no se declara todavía: lo añadirá quien integre los revelados de una sola vez
     de las tarjetas de BOTS y las casillas de cifras, que no son de este paquete; una variable
     sin ningún var(--t-revelado) en el proyecto hace fallar pruebas/coherencia.mjs, «código
     muerto», así que no se declara hasta que alguien la use). */
  --t-rapido: 100ms;
  --t-base: 150ms;
  --t-entrada: 200ms;
  --curva-estandar: cubic-bezier(.4, 0, .2, 1);
  --curva-salida-rapida: cubic-bezier(.22, 1, .36, 1);
  --curva-revelado: cubic-bezier(.19, 1, .22, 1);
  --transicion: var(--t-base) var(--curva-estandar);
  /* alias que usa el código al escribir estilos en línea (--bg y --muted, que solo usaba EL PLAN, salieron en la 1.90.7) */
  --dim: var(--texto-3);
  --green: var(--largo);
  --red: var(--corto);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Encabezados que solo existen para quien navega con lector de pantalla: le dan a la página un
   esqueleto por el que moverse, sin cambiar nada de lo que se ve. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* la página mide la ventana y no se desplaza (rediseño 2.0): cada franja del armazón mide lo suyo y el mapa, el resto */
html, body { height: 100%; }
[hidden] { display: none !important; }

html { color-scheme: dark; }
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; letter-spacing: -0.01em; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
button, input, select { font: inherit; color: inherit; }
/* Los desplegables nativos. Windows pinta la lista desplegada con el FONDO del <select>, y el de
   los paneles era `--panel`, un rgba al 4 %: sobre el blanco del sistema salía texto claro sobre
   claro y no se leía nada (9-sep-2026). Hace falta color opaco y explícito, y además en cada
   <option>, que es lo único que la lista nativa respeta. */
select { background-color: var(--desplegable); color: var(--texto); }
option, optgroup { background-color: var(--desplegable); color: var(--texto); }
button { cursor: pointer; background: none; border: 0; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, canvas:focus-visible, [role="dialog"]:focus-visible { outline: 2px solid rgba(var(--acento-rgb), 0.6); outline-offset: 2px; }
/* el lienzo y los paneles reciben el foco por teclado (tabindex); el contorno solo con :focus-visible,
   para que un clic de ratón no lo pinte */
canvas:focus, [role="dialog"]:focus { outline: none; }
canvas:focus-visible, [role="dialog"]:focus-visible { outline: 2px solid rgba(var(--acento-rgb), 0.6); outline-offset: -2px; }
a { color: var(--acento); text-decoration: none; }
/* :hover solo con ratón: en pantalla táctil un toque deja el estado «pegado» hasta el toque
   siguiente. :focus-visible no entra aquí a propósito: tiene que seguir activo siempre. */
@media (hover: hover) { a:hover { text-decoration: underline; } }
::selection { background: rgba(var(--acento-rgb), 0.3); }

/* barras de desplazamiento discretas */
* { scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* botones genéricos */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radio-s); font-weight: 600; font-size: 12.5px;
  border: 1px solid var(--linea); color: var(--texto-2); background: var(--panel);
  transition: color var(--transicion), border-color var(--transicion), background var(--transicion);
}
@media (hover: hover) { .btn:hover { color: var(--texto); border-color: var(--linea-fuerte); } }
.btn-primary { background: var(--acento); border-color: var(--acento); color: #14100a; }
@media (hover: hover) { .btn-primary:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); color: #14100a; } }
.btn-ghost { background: transparent; }

/* grupo segmentado: rango, fuente, lectura, temporalidades (rediseño 2.0: sin borde, sobre el relleno suave) */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--radio-s); background: var(--relleno-suave); }
.seg button {
  padding: 5px 8px; border-radius: var(--radio-chip); font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--texto-3); white-space: nowrap; transition: color var(--transicion), background var(--transicion);
}
@media (hover: hover) { .seg button:hover { color: var(--texto); } }
.seg button.on { color: var(--texto); background: var(--relleno-activo); }
/* zona táctil de 44 px sin agrandar el chip: un ::before invisible que crece hacia fuera con
   inset negativo, solo con puntero basto (con ratón el tamaño visible ya es el de agarre) */
@media (pointer: coarse) { .seg button { position: relative; } .seg button::before { content: ""; position: absolute; inset: calc((100% - max(100%, 44px)) / 2); } }

/* chips de estado */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radio-s); border: 1px solid var(--linea); background: var(--panel); font-size: 11px; color: var(--texto-2); }

/* lo que comparten la app y la web (2.4.0; antes, copiado en web.css): la pastilla EN VIVO, el spinner y el precio */
.live-dot { display: flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--largo); }
.live-dot i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* sin precio, en el ámbar de los avisos y con el círculo hueco, como la maqueta de la tarea 14 (decisión del titular,
   13-oct-2026; hasta la 1.90.15, en rojo, que es el color de los cortos) */
.live-dot.off { color: var(--aviso-texto); }
.live-dot.off i { box-sizing: border-box; background: none; border: 1.5px solid currentColor; }
.live-dot.degradado { color: var(--acento-fuerte); }
.spinner { box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linea-fuerte); border-top-color: var(--acento); animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
#statPrice { transition: color var(--t-base) var(--curva-estandar); }

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