/* Filings Radar — sistema visual (CLAUDE.md §3: FastAPI + Jinja2 + HTMX, sin
   frameworks de frontend/build step; esto es CSS + una animación puntual con
   GSAP vía CDN, decisión de Franklin del 2026-09-23 — ver PLAN.md). Tema
   oscuro tipo dashboard financiero: la prioridad es que los datos se lean
   rápido y claro, la estética nunca debe competir con la cifra. */

:root {
  --bg: #0a0c12;
  --bg-soft: #0d1017;
  --bg-elevada: #12151f;
  --bg-elevada-hover: #171b28;
  --borde: #232838;
  --borde-hover: #343b52;
  --texto: #e7e9f2;
  --texto-secundario: #98a0b8;
  --texto-apagado: #5c6480;
  --acento: #8b6bf2;
  --acento-claro: #a78bfa;
  --acento-suave: rgba(139, 107, 242, 0.14);
  --verde: #34d399;
  --azul: #38bdf8;
  --ambar: #fbbf24;
  --rojo: #f87171;
  --radio: 14px;
  --radio-chico: 9px;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 28px -14px rgba(0, 0, 0, 0.65);

  /* Fase 8.14 — rediseño "arcade de pelea 2D" (ver PROGRESS.md). Tokens
     nuevos, en base a los mismos colores ya establecidos: verde=mejora,
     rojo=deterioro, ámbar=alerta, gris apagado=sin dato (misma semántica
     que ya usan los gauges y el resumen — no se inventa una paleta nueva).

     --fuente-hud: Franklin dijo 3 veces con capturas reales que "las
     letras se ven feas" — la primera fuente que se probó acá
     ("Press Start 2P", un bitmap de 8 bits crudo) además tenía un bug real
     (sin glyph para vocales acentuadas en mayúscula, el navegador caía a
     otra fuente a mitad de palabra). "Orbitron" es una fuente geométrica
     tipo HUD de ciencia ficción — mantiene la identidad "pantalla de
     videojuego/radar" sin la crudeza de un bitmap y con soporte completo
     de acentos en español. Sigue siendo SOLO para títulos/etiquetas
     cortas — cifras y texto explicativo siguen en Inter (--fuente-texto). */
  --fuente-hud: "Orbitron", "Segoe UI", sans-serif;
  --fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --borde-hud: 3px;
  --sombra-hud: 4px 4px 0 rgba(0, 0, 0, 0.9);
  --sombra-hud-chica: 2px 2px 0 rgba(0, 0, 0, 0.9);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  font-family: var(--fuente-texto);
  background: var(--bg);
  color: var(--texto);
  margin: 0;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Resplandor fijo, muy sutil, detrás del contenido — le da profundidad al
   fondo sin competir con los datos (opacidad baja a propósito). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(600px 400px at 15% -10%, rgba(139, 107, 242, 0.16), transparent 60%),
    radial-gradient(500px 350px at 100% 0%, rgba(56, 189, 248, 0.10), transparent 55%);
  pointer-events: none;
}

/* Fondo animado estilo videojuego clásico (radar + starfield, ver
   web/static/fondo-radar.js): fijo, el más atrás de los 3 fondos
   superpuestos (canvas → scanlines → resplandor → contenido). Ancho/alto
   reales los pone el JS (canvas.width/height); acá solo se fija la
   posición. */
#fondoAnimado {
  position: fixed;
  inset: 0;
  z-index: -3;
  display: block;
  pointer-events: none;
}

/* ScanlineOverlay (componente "Fase 1" del rediseño arcade, ver
   PROGRESS.md): antes vivía dibujado adentro del canvas; se separó a CSS
   puro porque es un patrón ESTÁTICO (no necesita animarse cuadro a cuadro)
   y así queda reusable y fácil de desactivar — para apagarlo, sacar esta
   clase del `<div>` en base.html, no hace falta tocar el canvas. */
.scanline-overlay {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.12) 3px
  );
}

main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

a {
  color: var(--acento-claro);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  margin: 0 0 0.2rem;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

h1 small {
  color: var(--texto-apagado);
  font-weight: 500;
  font-size: 1.1rem;
}

h2 {
  margin: 2.25rem 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--borde);
}

.subtitulo {
  color: var(--texto-secundario);
  margin-top: 0.25rem;
}

/* ---------- Encabezado ---------- */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  background: rgba(10, 12, 18, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--texto);
  letter-spacing: -0.01em;
}

.marca:hover {
  text-decoration: none;
}

.marca .punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acento-claro), var(--verde));
  box-shadow: 0 0 12px 1px var(--acento);
}

.marca .radar {
  background: linear-gradient(135deg, var(--acento-claro), var(--azul));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav {
  display: flex;
  gap: 1.5rem;
}

.nav a {
  color: var(--texto-secundario);
  font-size: 0.92rem;
  font-weight: 500;
  position: relative;
  padding-bottom: 3px;
}

.nav a:hover {
  color: var(--texto);
  text-decoration: none;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--acento-claro), var(--azul));
  transition: right 0.25s ease;
}

.nav a:hover::after {
  right: 0;
}

/* El botón "Salir" (Fase 9) tiene que verse como los demás links del
   nav, aunque técnicamente sea un <button> dentro de un <form> (logout
   con POST, no un GET que cualquier crawler podría disparar). */
.nav__logout {
  margin: 0;
  display: contents;
}

.nav__logout-boton {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--texto-secundario);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0 0 3px;
}

.nav__logout-boton:hover {
  color: var(--texto);
}

/* ---------- Buscador ---------- */

.buscador {
  margin: 1.5rem 0;
  position: relative;
  max-width: 460px;
}

.buscador input[type="search"] {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--texto);
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.buscador input[type="search"]::placeholder {
  color: var(--texto-apagado);
}

.buscador input[type="search"]:focus {
  border-color: var(--acento);
  background: var(--bg-elevada-hover);
  box-shadow: 0 0 0 4px var(--acento-suave);
}

.htmx-indicator {
  display: none;
  color: var(--texto-apagado);
  font-size: 0.85rem;
  margin-left: 0.25rem;
}

.htmx-request .htmx-indicator {
  display: inline;
}

/* ---------- Tarjetas de métrica ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0.9rem;
  margin: 1rem 0 2rem;
  perspective: 900px;
}

.metrica {
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.9rem 1.1rem;
  box-shadow: var(--sombra);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  will-change: transform;
}

.metrica:hover {
  border-color: var(--borde-hover);
  background: var(--bg-elevada-hover);
}

.metrica .label {
  font-size: 0.82rem;
  color: var(--texto-secundario);
  cursor: help;
  border-bottom: 1px dotted var(--texto-apagado);
  display: inline-block;
}

.metrica .valor {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.metrica .valor small {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--texto-apagado);
}

.metrica .valor.sin-dato {
  color: var(--texto-apagado);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
}

/* ---------- Score hero: gauges radiales + jerarquía visual ----------
   El score global es LA cifra insignia de todo el sitio (aparece en cada
   ficha) — se destaca con un gauge grande aparte, no metida en la misma
   grilla pareja que el resto de las métricas. Los otros dos scores
   (sectorial, valoración) son secundarios: gauges más chicos al lado.

   NOTA (Fase 2 del rediseño arcade, ver PROGRESS.md): la ficha de empresa
   ya no usa este bloque — el score pasó a PowerBar/VsBars más abajo. Se
   deja el CSS y el macro `gauge` sin borrar por si el rediseño arcade no
   convence y hay que volver a los gauges (más rápido que reescribirlos). */

.score-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: stretch;
  margin: 1.1rem 0 2rem;
}

.gauge-secundarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.gauge-card {
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.15rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  will-change: transform;
}

.gauge-card:hover {
  border-color: var(--borde-hover);
  background: var(--bg-elevada-hover);
}

.gauge-anillo {
  position: relative;
  display: inline-flex;
}

.gauge-grande .gauge-anillo svg {
  width: 168px;
  height: 168px;
}

.gauge-chico .gauge-anillo svg {
  width: 104px;
  height: 104px;
}

.gauge-pista {
  fill: none;
  stroke: var(--borde);
  stroke-width: 9;
}

.gauge-valor {
  fill: none;
  stroke: var(--acento-claro);
  stroke-width: 9;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke 0.3s ease;
}

.gauge-valor.nivel-alta {
  stroke: var(--verde);
}

.gauge-valor.nivel-media {
  stroke: var(--ambar);
}

.gauge-valor.nivel-baja {
  stroke: var(--rojo);
}

.gauge-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 0.9rem;
  text-align: center;
}

.gauge-grande .gauge-centro .num {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.gauge-chico .gauge-centro .num {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gauge-centro small {
  display: block;
  color: var(--texto-apagado);
  font-size: 0.7rem;
  margin-top: 0.2rem;
}

.gauge-centro .sin-dato-texto {
  font-size: 0.7rem;
  color: var(--texto-apagado);
  font-style: italic;
  line-height: 1.3;
}

.gauge-etiqueta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.gauge-etiqueta small {
  color: var(--texto-apagado);
  font-size: 0.76rem;
}

@media (max-width: 640px) {
  .score-hero {
    grid-template-columns: 1fr;
  }
}

/* ---------- Tablas ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--borde);
}

th {
  color: var(--texto-secundario);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  background: var(--bg-soft);
}

tbody tr {
  transition: background 0.15s ease;
}

tbody tr:hover {
  background: var(--bg-elevada-hover);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- Estado vacío temático (Fase 4 del rediseño arcade) ---------- */

.estado-vacio-arcade {
  border: 2px dashed var(--borde-hover);
  padding: 1.25rem;
  text-align: center;
}

.estado-vacio-arcade__titulo {
  display: block;
  font-family: var(--fuente-texto);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--texto-apagado);
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

/* ---------- HighScoreTable (Fase 4): tabla de reportes anuales con look
   de tabla de puntajes altos — rango numerado, fila más reciente
   destacada. Reusa la <table> base (borde/hover ya definidos arriba). */

.high-score-table__rango {
  font-family: var(--fuente-hud);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ambar);
  width: 2.5rem;
}

.high-score-table__top {
  background: var(--acento-suave);
}

.high-score-table__top .high-score-table__rango {
  color: var(--verde);
}

.high-score-table__nombre {
  display: block;
  color: var(--texto-secundario);
  font-size: 0.82rem;
  margin-top: 0.15rem;
}

/* ---------- Roster (Fase 4): la watchlist reusa la tabla HIGH SCORE +
   un encabezado clickeable para ordenar por score (animaciones.js
   ::activarRosterOrdenable). */

.roster-table__orden {
  cursor: pointer;
  user-select: none;
}

.roster-table__orden:hover,
.roster-table__orden:focus-visible {
  color: var(--acento-claro);
  outline: none;
}

/* ---------- Buscar: cards de resultado (Fase 8.17, mejora post-MVP) ----------
   Franklin trajo una card de referencia de otra app (alertas de trading, ver
   PLAN.md Registro de decisiones) y pidió el mismo LENGUAJE VISUAL — header
   con ícono + divisor + fila de metadatos + grilla de datos + link al pie —
   aclarando explícitamente que el CONTENIDO no se copia (acá no hay
   "Tipo/Entrada/SL" de trading, son atributos reales de la empresa: fuente,
   país, sector, tipo de reporte). Sigue siendo un solo <a> clickeable (mejor
   affordance que un botón aparte) — el "link" del pie es solo el remate
   visual de la card, funcionalmente ya toda la card navega. */

.char-select {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
}

.char-select__item {
  padding: 0;
}

.char-select__card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem 1.1rem 0.9rem;
  height: 100%;
  color: var(--texto);
  background: linear-gradient(160deg, var(--bg-elevada), var(--bg-soft));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.char-select__card:hover,
.char-select__card:focus-visible {
  border-color: var(--verde);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.3), var(--sombra);
  transform: translateY(-2px);
  text-decoration: none;
  outline: none;
}

.char-select__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.char-select__identidad {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0; /* para que el ticker largo (LEI de ESEF) pueda envolver */
}

.char-select__nombre {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.25;
}

.char-select__ticker {
  font-family: var(--fuente-hud);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--acento-claro);
  background: var(--bg-soft);
  border: 1px solid var(--borde-hover);
  border-radius: var(--radio-chico);
  padding: 0.2rem 0.45rem;
  align-self: flex-start;
  /* Bug real reportado con captura de pantalla: algunas empresas de ESEF
     usan su LEI (20 caracteres) como "ticker" al no tener uno de bolsa —
     sin esto, ese texto se salía del cuadro y se montaba sobre la
     siguiente tarjeta. Se envuelve en vez de recortarlo (recortarlo lo
     haría inútil como identificador). */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: normal;
  line-height: 1.35;
}

/* "Radar ping": ícono puramente decorativo (nunca representa un dato real,
   ver Registro de decisiones) que refuerza la marca — un pulso de radar por
   cada empresa "escaneada" en el resultado, mismo verde fosforescente que
   `fondo-radar.js`. */
.char-select__radar-ping {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.char-select__radar-ping span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 8px 1px rgba(52, 211, 153, 0.6);
}

.char-select__radar-ping::before,
.char-select__radar-ping::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--verde);
  opacity: 0;
  animation: radar-ping 2.4s ease-out infinite;
}

.char-select__radar-ping::after {
  animation-delay: 1.2s;
}

@keyframes radar-ping {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .char-select__radar-ping::before,
  .char-select__radar-ping::after {
    animation: none;
    opacity: 0;
  }
}

.char-select__divisor {
  height: 1px;
  background: var(--borde);
}

.char-select__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.char-select__fuente {
  font-family: var(--fuente-texto);
  font-weight: 800;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radio-chico);
  border: 1px solid currentColor;
}

.char-select__fuente--sec {
  color: var(--azul);
  background: rgba(56, 189, 248, 0.12);
}

.char-select__fuente--esef {
  color: var(--verde);
  background: rgba(52, 211, 153, 0.12);
}

.char-select__pais {
  font-size: 0.76rem;
  color: var(--texto-secundario);
}

.char-select__grilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.char-select__dato {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.char-select__etiqueta {
  font-family: var(--fuente-texto);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--texto-apagado);
}

.char-select__valor {
  font-size: 0.78rem;
  color: var(--texto);
  line-height: 1.3;
}

.char-select__footer {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--borde);
  color: var(--acento-claro);
  font-size: 0.78rem;
  font-weight: 600;
}

/* ---------- Botón watchlist ---------- */

.boton-watchlist {
  margin: 0.5rem 0 1.25rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--acento);
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--acento-claro);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.boton-watchlist:hover {
  background: var(--acento-suave);
  transform: translateY(-1px);
}

.boton-watchlist.activo {
  background: linear-gradient(135deg, var(--acento), var(--azul));
  color: #0a0c12;
  border-color: transparent;
}

.boton-watchlist.activo:hover {
  filter: brightness(1.08);
}

.boton-quitar {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--bg-soft);
  color: var(--texto-secundario);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.boton-quitar:hover {
  border-color: #f87171;
  color: #f87171;
}

/* ---------- ArcadeButton (Fase 1 del rediseño arcade, ver PROGRESS.md) ----------
   Se combina con .boton-watchlist/.boton-quitar (que siguen dando el color
   según el estado) — esto aporta el "chrome" común de HUD: fuente pixel,
   borde duro sin redondear, sombra dura sin blur, y el efecto clásico de
   "hundirse" al presionar. El orden de las reglas importa: tiene que venir
   DESPUÉS de .boton-watchlist/.boton-quitar para ganarles el border-radius
   y el transform en :hover/:active (misma especificidad, gana el último). */
.boton-arcade {
  font-family: var(--fuente-hud);
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: normal;
  border-radius: 0;
  border-width: var(--borde-hud);
  box-shadow: var(--sombra-hud-chica);
}

.boton-arcade:hover {
  transform: translateY(-1px);
}

.boton-arcade:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.9);
}

/* ---------- Avisos / señal descriptiva ---------- */

.aviso-sector {
  display: inline-block;
  background: rgba(251, 191, 36, 0.14);
  color: var(--ambar);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radio-chico);
  padding: 0.15rem 0.55rem;
  font-size: 0.82rem;
  margin-left: 0.5rem;
}

.senal-descriptiva {
  position: relative;
  background: var(--bg-elevada);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  padding: 0.85rem 1.1rem;
  margin: -0.5rem 0 2rem;
  cursor: help;
  box-shadow: var(--sombra);
}

/* ---------- Resumen ("en síntesis") ----------
   Highlights cortos calculados de datos que la ficha ya trae (score vs.
   foto anterior, ingresos/utilidad vs. año anterior, conteo de actividad
   reciente) — nunca texto libre generado por IA, siempre un número con
   fuente. Franklin pidió un resumen para no leer cada cifra suelta. */

.resumen {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 1rem 0 1.75rem;
}

.resumen-item {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  font-size: 0.85rem;
  color: var(--texto-secundario);
}

.resumen-item--positivo {
  border-color: rgba(52, 211, 153, 0.35);
  color: var(--verde);
}

.resumen-item--negativo {
  border-color: rgba(248, 113, 113, 0.35);
  color: var(--rojo);
}

.resumen-item--info {
  border-color: rgba(56, 189, 248, 0.35);
  color: var(--azul);
}

/* ---------- Timeline de actividad reciente ----------
   8-K relevantes (azul) y compras de directivos (verde, es la señal más
   fuerte para value investing — plata propia, no ruido de compensación). */

.timeline {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2.25rem;
}

.timeline-item {
  position: relative;
  padding: 0 0 1.15rem 1.35rem;
  border-left: 2px solid var(--borde);
}

.timeline-item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.timeline-punto {
  position: absolute;
  left: -6px;
  top: 0.3rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acento-claro);
  box-shadow: 0 0 0 3px var(--bg-soft);
}

.timeline-item--insider .timeline-punto {
  background: var(--verde);
}

.timeline-item--8k .timeline-punto {
  background: var(--azul);
}

.timeline-fecha {
  display: block;
  font-size: 0.76rem;
  color: var(--texto-apagado);
  margin-bottom: 0.2rem;
}

.timeline-contenido a,
.timeline-contenido span {
  color: var(--texto);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}

.timeline-contenido a {
  text-decoration: none;
}

.timeline-contenido a:hover {
  color: var(--acento-claro);
  text-decoration: underline;
}

/* ---------- FighterHeader (Fase 2 del rediseño arcade) ----------
   Reemplaza el <h1> + subtítulo simple de antes: el nombre de la empresa
   se mantiene en Inter (puede ser muy largo — "PHOENIX SPREE DEUTSCHLAND
   LIMITED" — la fuente pixel a ese tamaño sería ilegible/rompería el
   layout), el "chrome" alrededor (eyebrow, ticker, atributos) sí usa la
   fuente pixel, que a textos cortos en MAYÚSCULA es donde mejor luce. */

.fighter-header {
  border: var(--borde-hud) solid var(--texto);
  background: var(--bg-elevada);
  box-shadow: var(--sombra-hud);
  padding: 1.5rem 1.75rem;
  margin: 0.75rem 0 1.5rem;
}

.fighter-header__linea1 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.fighter-header__nombre {
  margin: 0;
  font-size: 2rem;
}

.fighter-header__ticker {
  font-family: var(--fuente-hud);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--bg);
  background: var(--acento-claro);
  padding: 0.4rem 0.65rem;
  box-shadow: var(--sombra-hud-chica);
}

.fighter-header__atributos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.atributo {
  font-family: var(--fuente-texto);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--texto-secundario);
  border: 1px solid var(--borde-hover);
  padding: 0.4rem 0.65rem;
  line-height: 1.4;
}

.atributo--alerta {
  color: var(--ambar);
  border-color: var(--ambar);
}

/* ---------- DeltaIndicator (Fase 2): el resumen "en síntesis" con look de
   golpe recibido/dado — la flecha aparte del texto para poder destacarla
   más que en un badge plano. */

.delta-flecha {
  display: inline-block;
  font-weight: 800;
  font-size: 1rem;
  margin-right: 0.3rem;
}

.resumen-item--positivo .delta-flecha {
  color: var(--verde);
}

.resumen-item--negativo .delta-flecha {
  color: var(--rojo);
}

.resumen-item--info .delta-flecha {
  color: var(--azul);
}

/* ---------- PowerBar (Fase 2): el score como barra de vida/poder ---------- */

.power-bar {
  margin: 1.25rem 0 1.75rem;
}

.power-bar__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.power-bar__etiqueta {
  font-family: var(--fuente-texto);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--texto-secundario);
  letter-spacing: 0.04em;
}

.power-bar--grande .power-bar__etiqueta {
  font-size: 0.95rem;
}

.power-bar--chico .power-bar__etiqueta {
  font-size: 0.8rem;
}

.power-bar__valor {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.power-bar--grande .power-bar__valor {
  font-size: 1.5rem;
}

.power-bar--chico .power-bar__valor {
  font-size: 1.1rem;
}

.power-bar__pista {
  background: var(--bg-soft);
  border: var(--borde-hud) solid var(--texto);
  box-shadow: var(--sombra-hud-chica);
  padding: 3px;
}

.power-bar--grande .power-bar__pista {
  height: 28px;
}

.power-bar--chico .power-bar__pista {
  height: 18px;
}

.power-bar__relleno {
  height: 100%;
  width: 0%;
  background: var(--acento-claro);
  transition: background 0.3s ease;
}

.power-bar__relleno.nivel-alta {
  background: var(--verde);
}

.power-bar__relleno.nivel-media {
  background: var(--ambar);
}

.power-bar__relleno.nivel-baja {
  background: var(--rojo);
}

.power-bar__nota {
  display: block;
  margin-top: 0.35rem;
  color: var(--texto-apagado);
  font-size: 0.78rem;
}

/* ---------- LockedStat (Fase 2, adelantado desde Fase 3): "sin dato" nunca
   se disfraza de barra vacía — un bloque "???" explícito con el motivo. */

.locked-stat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 2px dashed var(--borde-hover);
  padding: 0.5rem 0.75rem;
  cursor: help;
}

.locked-stat__signo {
  font-family: var(--fuente-hud);
  font-weight: 700;
  font-size: 1rem;
  color: var(--texto-apagado);
}

.locked-stat__motivo {
  color: var(--texto-apagado);
  font-style: italic;
  font-size: 0.82rem;
}

/* ---------- VsBars (Fase 2): pantalla "VS" — las barras crecen desde los
   bordes externos hacia el centro. Azul = esta empresa, verde = su sector
   (colores de "lado", no la escala alta/media/baja del PowerBar). */

.vs-titulo {
  margin-top: 1.5rem;
}

.vs-pantalla {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

.vs-versus {
  font-family: var(--fuente-hud);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--rojo);
  text-shadow: var(--sombra-hud-chica);
}

.vs-lado {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.vs-lado--rival {
  align-items: flex-end;
  text-align: right;
}

.vs-lado__etiqueta {
  font-family: var(--fuente-hud);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--texto-secundario);
  letter-spacing: 0.02em;
}

.vs-lado__pista {
  width: 100%;
  height: 16px;
  background: var(--bg-soft);
  border: 2px solid var(--texto);
  display: flex;
  overflow: hidden;
}

.vs-lado--jugador .vs-lado__pista {
  justify-content: flex-end;
}

.vs-lado--rival .vs-lado__pista {
  justify-content: flex-start;
}

.vs-lado__relleno {
  height: 100%;
  width: 0%;
}

.vs-lado--jugador .vs-lado__relleno {
  background: var(--azul);
}

.vs-lado--rival .vs-lado__relleno {
  background: var(--verde);
}

.vs-lado__valor {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ---------- PLAYER SELECTED (Fase 2): feedback breve al agregar a la
   watchlist — GSAP lo anima y lo saca del DOM solo, ver animaciones.js. */

.boton-watchlist {
  position: relative;
}

.player-selected {
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  font-family: var(--fuente-hud);
  font-weight: 700;
  font-size: 0.62rem;
  color: var(--verde);
  text-shadow: var(--sombra-hud-chica);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

/* ---------- StatBar + panel-eyebrow (Fase 3 del rediseño arcade) ----------
   Reemplaza la grilla de tarjetas (.metrica) de calidad/solidez/valoración
   por una lista vertical de "stats" con borde HUD — más cerca de un panel
   de estadísticas de personaje de pelea que una grilla de tarjetas pareja.
   El color de relleno identifica la SECCIÓN (ataque/defensa/valoración),
   no si el número es bueno o malo — no hay percentil disponible acá sin
   tocar el backend (ver nota en api/pages.py::METRICAS_BARRA_PROPORCIONAL). */

.panel-eyebrow {
  font-family: var(--fuente-texto);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--texto-apagado);
  border: 1px solid var(--borde-hover);
  padding: 0.2rem 0.5rem;
  margin-right: 0.6rem;
  vertical-align: middle;
  letter-spacing: 0.04em;
}

.stat-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borde);
  background: var(--bg-elevada);
  box-shadow: var(--sombra);
  margin: 1rem 0 2.25rem;
}

.stat-bar {
  display: grid;
  grid-template-columns: auto minmax(200px, 1fr) minmax(160px, 2fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--borde);
  transition: background 0.15s ease;
}

.stat-panel .stat-bar:last-child {
  border-bottom: none;
}

/* Filas en cebra + resalte al pasar el mouse (feedback real de Franklin:
   las listas se veían "muy planas" — esto le da ritmo visual sin tocar
   ningún dato). */
.stat-panel .stat-bar:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.stat-bar:hover {
  background: var(--bg-elevada-hover);
}

.stat-bar__icono {
  font-size: 1.15rem;
  line-height: 1;
}

.stat-bar__etiqueta-col {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.stat-bar__etiqueta {
  font-size: 0.85rem;
  color: var(--texto-secundario);
  cursor: help;
  border-bottom: 1px dotted var(--texto-apagado);
  display: inline-block;
  width: fit-content;
}

/* Nota de conversión de moneda (mejora post-MVP, sesión 32): nunca se
   oculta que una métrica de valoración convirtió el precio con una tasa
   de cambio real — ver metrics/valuation.py::_precio_en_moneda_financiera. */
.stat-bar__nota {
  font-size: 0.68rem;
  color: var(--texto-apagado);
  cursor: help;
}

/* Trazabilidad como producto (mejora post-MVP, sesión 33): link real al
   filing exacto (form + año) que respalda el número — antes solo existía
   la trazabilidad genérica de la tabla de "Últimos reportes anuales" al
   pie de la ficha, sin conectarla a QUÉ métrica específica salió de cuál
   reporte. Mismo tono apagado que .stat-bar__nota, pero interactivo. */
.stat-bar__fuente {
  font-size: 0.68rem;
  color: var(--azul);
  text-decoration: none;
  width: fit-content;
}

.stat-bar__fuente:hover {
  text-decoration: underline;
}

.stat-bar__pista {
  height: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--borde-hover);
}

.stat-bar__relleno {
  height: 100%;
  width: 0%;
}

.stat-bar--ataque .stat-bar__relleno {
  background: var(--azul);
}

.stat-bar--defensa .stat-bar__relleno {
  background: var(--acento-claro);
}

.stat-bar--valoracion .stat-bar__relleno {
  background: var(--ambar);
}

/* El valor es lo más importante de la fila — se destaca bien por encima
   de la etiqueta (más grande, más pesado, coloreado por sección) en vez
   de quedar del mismo peso visual que el resto del texto. */
.stat-bar__valor {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.stat-bar--ataque .stat-bar__valor {
  color: var(--azul);
}

.stat-bar--defensa .stat-bar__valor {
  color: var(--acento-claro);
}

.stat-bar--valoracion .stat-bar__valor {
  color: var(--ambar);
}

.stat-bar .locked-stat {
  padding: 0.5rem 0.9rem;
  border-width: 1px;
  width: 100%;
}

.stat-bar .locked-stat__signo {
  font-size: 0.85rem;
}

/* ---------- ComboLog (Fase 3): íconos por tipo de evento 8-K/compra de
   directivo, ver ICONOS_ITEMS_8K en api/pages.py. */

.combo-log__item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.combo-log__item .timeline-contenido {
  flex: 1;
}

.combo-log__icono {
  font-size: 0.95rem;
  line-height: 1.4;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  main {
    padding: 1.25rem 1rem 3rem;
  }
  .encabezado {
    padding: 0.75rem 1rem;
  }
  h1 {
    font-size: 1.5rem;
  }
  .vs-pantalla {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .vs-lado--rival {
    align-items: flex-start;
    text-align: left;
  }
  .stat-bar {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .stat-bar__valor {
    text-align: left;
  }
}

/* ---------- Academia (Fase 8.20, mejora post-MVP): educación financiera.
   Botón propio (no reusa .boton-watchlist/.boton-arcade, pensados para
   otro contexto), quiz de opción múltiple con corrección SIEMPRE del lado
   del servidor, y feedback correcto/incorrecto con el mismo lenguaje de
   color verde/rojo que ya usa el resto del sitio. */

.academia-boton {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--acento);
  border-radius: var(--radio-chico);
  background: var(--acento-suave);
  color: var(--acento-claro);
  cursor: pointer;
  font-family: var(--fuente-texto);
  font-weight: 700;
  font-size: 0.85rem;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.academia-boton:hover {
  background: var(--acento);
  color: var(--texto);
  text-decoration: none;
  transform: translateY(-1px);
}

.academia-quiz {
  margin: 1rem 0 2rem;
}

.academia-quiz__pregunta {
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.academia-quiz__opciones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
}

.academia-quiz__opcion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--bg-elevada);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.academia-quiz__opcion:hover {
  border-color: var(--acento);
  background: var(--bg-elevada-hover);
}

.academia-quiz__opcion input {
  accent-color: var(--acento);
}

.academia-feedback {
  padding: 1rem 1.25rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  background: var(--bg-elevada);
  box-shadow: var(--sombra);
  margin: 1rem 0;
}

.academia-feedback--ok {
  border-left-color: var(--verde);
}

.academia-feedback--mal {
  border-left-color: var(--rojo);
}

.academia-feedback__titulo {
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.academia-lista__resultado {
  color: var(--texto-secundario);
  font-size: 0.85rem;
}

.academia-lista__bloqueada {
  color: var(--texto-apagado);
  cursor: not-allowed;
}

/* ---------- Filtros / screener (Fase 8.22, mejora post-MVP): mismos

   inputs que ya usa `.buscador`, en una grilla de varias columnas — cada
   filtro es opcional, se manda como querystring (GET), así el resultado
   queda en una URL que se puede guardar/compartir. */

.filtros-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.25rem;
}

.filtros-campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--texto-secundario);
}

.filtros-campo input,
.filtros-campo select {
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--texto);
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.filtros-campo input:focus,
.filtros-campo select:focus {
  border-color: var(--acento);
  background: var(--bg-elevada-hover);
}

/* ---------- Login/registro (Fase 9, tarea 9.1): formulario angosto,

   reusa .filtros-campo para los inputs (mismo look que el resto del
   sitio) en vez de armar un set de estilos de formulario aparte. */

.formulario-auth {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 22rem;
  margin-top: 1rem;
}

.mensaje-error {
  color: var(--rojo);
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid var(--rojo);
  border-radius: var(--radio-chico);
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
}

/* ---------- Líneas de soporte/resistencia (tarea 8.31): reusa el botón de
   Academia (mismo estilo genérico) para "Trazar línea", y una lista chica
   con botón de borrar por línea. */

.lineas-controles {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.lineas-controles.modo-trazado #btnTrazarLinea {
  background: var(--acento);
  color: var(--texto);
}

.lineas-lista {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.lineas-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  font-size: 0.85rem;
}

.boton-borrar-linea {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--texto);
  opacity: 0.7;
}

.boton-borrar-linea:hover {
  opacity: 1;
}

/* ---------- Seguimiento de compra en la watchlist (tarea 8.32): precio real

   que Franklin cargó + ganancia/pérdida contra el precio de mercado más
   reciente. Reusa --verde/--rojo, el mismo lenguaje de color que ya usa
   el resumen de la ficha de empresa. */

.form-compra {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.form-compra input {
  width: 5.5rem;
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
  font-family: inherit;
  color: var(--texto);
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
}

.form-compra input[type="date"] {
  width: 8rem;
}

.boton-guardar-compra {
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
}

.sin-compra {
  opacity: 0.5;
}

.ganancia-positiva {
  color: var(--verde);
  font-weight: 700;
}

.ganancia-negativa {
  color: var(--rojo);
  font-weight: 700;
}

/* ---------- Paginador + tabla responsive (tarea 8.34): Franklin pidió

   paginación de verdad (no solo "mostrando 100 de 7410") y que las tablas
   largas se vean mejor tanto en computador como en celular. */

.paginador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.paginador__estado {
  color: var(--texto-secundario);
  font-size: 0.85rem;
}

.paginador__boton--deshabilitado {
  opacity: 0.35;
  pointer-events: none;
}

/* En pantallas chicas, una tabla de varias columnas se vuelve angosta e
   ilegible — se convierte en una tarjeta por fila (etiqueta: valor),
   tomando la etiqueta del atributo `data-label` de cada <td>. En pantallas
   grandes se ve como una tabla normal, sin ningún cambio. */
.tabla-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .tabla-responsive table,
  .tabla-responsive thead,
  .tabla-responsive tbody,
  .tabla-responsive tr,
  .tabla-responsive td {
    display: block;
    width: 100%;
  }

  .tabla-responsive thead {
    position: absolute;
    left: -9999px;
  }

  .tabla-responsive tbody tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: 0.25rem 0.85rem;
  }

  .tabla-responsive tbody tr:last-child {
    margin-bottom: 0;
  }

  .tabla-responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--borde);
    text-align: right;
  }

  .tabla-responsive td:last-child {
    border-bottom: none;
  }

  .tabla-responsive td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
  }
}

/* ---------- Precios (tarea 9.3): 2 tarjetas lado a lado en computador,

   apiladas en celular. La del plan pago se destaca con el borde de acento
   — mismo lenguaje visual que el resto del sitio (nada de colores nuevos). */

.planes-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
  max-width: 40rem;
}

.plan-card {
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
}

.plan-card--pago {
  border-color: var(--acento);
}

.plan-card__precio {
  font-family: var(--fuente-hud);
  font-size: 2rem;
  font-weight: 800;
  margin: 0.5rem 0;
}

.plan-card__precio span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto-secundario);
}

.plan-card__lista {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
}