/*
 * Supervisión Trading — sistema de diseño.
 * Sobrio, profundo, "cara" — inspirado en el lenguaje visual de Apple para apps de datos
 * (Stocks, System Settings, Numbers): tipografía del sistema, superficies con profundidad
 * sutil, verde/rojo reservados EXCLUSIVAMENTE para P&L, dark por defecto con light disponible.
 *
 * Reglas duras del proyecto (no relajar):
 *   — Cero frameworks/CDNs: todo el CSS vive aquí, autocontenido.
 *   — Cero estilos inline: toda coloración dinámica se aplica por clases desde app.js/login.js,
 *     nunca por atributo style="", para ser compatible con la CSP style-src 'self' del servidor.
 *   — Contraste AA real, foco visible siempre, respeto a prefers-reduced-motion.
 */

/* ============================================================
   1. RESET
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

img, svg { display: block; max-width: 100%; }
/* El atributo hidden SIEMPRE gana — evita que .btn (display:inline-flex) o clases
   similares de layout lo pisen dejando huecos fantasma con forma de botón vacío. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; }
ul { list-style: none; padding: 0; }
a { color: inherit; }

/* ============================================================
   2. TOKENS — paleta, tipografía, espaciado, radios, sombras
   ============================================================ */

:root {
  /* --- Tipografía: pila del sistema, la marca la exige explícitamente --- */
  --fuente:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-mono: "SF Mono", ui-monospace, "Menlo", "Consolas", monospace;

  /* Escala tipográfica (1.125–1.2 aprox, capada para densidad de datos) */
  --text-2xs: 0.6875rem;   /* 11px — micro-etiquetas */
  --text-xs:  0.75rem;     /* 12px */
  --text-sm:  0.8125rem;   /* 13px */
  --text-base: 0.9375rem;  /* 15px — cuerpo por defecto */
  --text-md:  1.0625rem;   /* 17px */
  --text-lg:  1.25rem;     /* 20px */
  --text-xl:  1.625rem;    /* 26px */
  --text-2xl: 2.125rem;    /* 34px */

  --peso-regular: 400;
  --peso-medio: 510;
  --peso-semi: 590;
  --peso-fuerte: 680;

  --tracking-ajustado: -0.021em;
  --tracking-normal: -0.006em;

  /* --- Espaciado (base 4px) --- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-7: 1.75rem;   /* 28 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */

  /* --- Radios (squircle-ish, consistentes) --- */
  --radio-xs: 8px;
  --radio-sm: 12px;
  --radio-md: 16px;
  --radio-lg: 20px;
  --radio-xl: 26px;
  --radio-full: 999px;

  /* --- Movimiento --- */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-rapida: 120ms;
  --dur-base: 220ms;
  --dur-lenta: 420ms;

  /* --- Semántico: SOLO P&L usa verde/rojo. Estados de EA usan su propia rampa. --- */
  --verde: #30d158;
  --verde-fuerte: #4fe378;
  --verde-tenue: rgba(48, 209, 88, 0.14);
  --rojo: #ff453a;
  --rojo-fuerte: #ff6b60;
  --rojo-tenue: rgba(255, 69, 58, 0.14);
  --ambar: #ff9f0a;
  --ambar-tenue: rgba(255, 159, 10, 0.14);
  --gris-estado: #8e97a3;
  --accento: #0a84ff;
  --accento-fuerte: #409cff;
  --accento-tenue: rgba(10, 132, 255, 0.14);

  --sombra-glow-accento: rgba(10, 132, 255, 0.16);
}

/* --- Tema oscuro (por defecto) --- */
:root,
:root[data-theme="dark"] {
  --bg: #08090b;
  --bg-glow-1: rgba(10, 132, 255, 0.09);
  --bg-glow-2: rgba(64, 156, 255, 0.05);
  --superficie-1: #121419;
  --superficie-2: #181b21;
  --superficie-3: #1f232b;
  --superficie-shell: rgba(255, 255, 255, 0.035);
  --cristal: rgba(18, 20, 25, 0.72);
  --raya: rgba(255, 255, 255, 0.08);
  --raya-fuerte: rgba(255, 255, 255, 0.14);
  --realce-interior: rgba(255, 255, 255, 0.05);

  --texto: #f3f5f8;
  --texto-dim: rgba(243, 245, 248, 0.62);
  --texto-tenue2: rgba(243, 245, 248, 0.38);

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sombra-md: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
  --sombra-lg: 0 28px 60px -18px rgba(0, 0, 0, 0.65);
  --sombra-foco: 0 0 0 4px var(--accento-tenue);
}

/* --- Tema claro ---
   Deliberadamente SIN @media (prefers-color-scheme): esta es una app de dinero y el
   requisito es dark por defecto SIEMPRE, sea cual sea el tema del sistema operativo.
   El claro solo se activa si la persona lo elige a mano (botón de tema → data-theme). */
:root[data-theme="light"] {
  --bg: #f4f4f7;
  --bg-glow-1: rgba(10, 132, 255, 0.06);
  --bg-glow-2: rgba(10, 132, 255, 0.03);
  --superficie-1: #ffffff;
  --superficie-2: #ffffff;
  --superficie-3: #eceef2;
  --superficie-shell: rgba(0, 0, 0, 0.03);
  --cristal: rgba(255, 255, 255, 0.78);
  --raya: rgba(0, 0, 0, 0.08);
  --raya-fuerte: rgba(0, 0, 0, 0.13);
  --realce-interior: rgba(255, 255, 255, 0.6);

  --texto: #15171a;
  --texto-dim: rgba(21, 23, 26, 0.62);
  --texto-tenue2: rgba(21, 23, 26, 0.4);

  --verde: #248a3d;
  --rojo: #d70015;
  --ambar: #c86400;
  --accento: #0066cc;
  --accento-fuerte: #0a84ff;

  --sombra-sm: 0 1px 2px rgba(20, 20, 30, 0.05);
  --sombra-md: 0 12px 28px -14px rgba(20, 20, 30, 0.16);
  --sombra-lg: 0 28px 56px -20px rgba(20, 20, 30, 0.22);
  --sombra-foco: 0 0 0 4px rgba(10, 132, 255, 0.18);
}

/* ============================================================
   3. BASE
   ============================================================ */

html, body { height: 100%; }

body {
  background:
    radial-gradient(760px 420px at 14% -8%, var(--bg-glow-1), transparent 60%),
    radial-gradient(640px 460px at 100% 12%, var(--bg-glow-2), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-base) var(--ease-salida), color var(--dur-base) var(--ease-salida);
}

h1, h2, h3 {
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-ajustado);
  color: var(--texto);
}
h1 { font-size: var(--text-xl); margin-bottom: var(--space-1); }
h2 { font-size: var(--text-md); margin-bottom: var(--space-3); }
h3 { font-size: var(--text-sm); color: var(--texto-dim); font-weight: var(--peso-medio); }

p { margin-bottom: var(--space-2); }
p:last-child { margin-bottom: 0; }

.dim { color: var(--texto-dim); font-size: 0.86em; }

code {
  background: var(--superficie-3);
  padding: 0.15em 0.45em;
  border-radius: var(--radio-xs);
  font-family: var(--fuente-mono);
  font-size: 0.88em;
}

::selection { background: var(--accento-tenue); }

/* Scrollbars discretas (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--raya-fuerte); border-radius: var(--radio-full); }

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

/* ============================================================
   4. BOTONES
   ============================================================ */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: 1px solid var(--raya);
  background: var(--superficie-2);
  color: var(--texto);
  padding: 0.62em 1.1em;
  border-radius: var(--radio-sm);
  font-size: var(--text-sm);
  font-weight: var(--peso-medio);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-base) var(--ease-salida),
    border-color var(--dur-base) var(--ease-salida),
    transform var(--dur-rapida) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-salida);
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn:hover { background: var(--superficie-3); border-color: var(--raya-fuerte); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

.btn-primario {
  background: var(--accento);
  border-color: var(--accento);
  color: #fff;
  font-weight: var(--peso-semi);
  box-shadow: 0 6px 16px -6px var(--sombra-glow-accento);
}
.btn-primario:hover { background: var(--accento-fuerte); border-color: var(--accento-fuerte); }

.btn-peligro {
  background: var(--rojo-tenue);
  border-color: rgba(255, 69, 58, 0.35);
  color: var(--rojo);
  font-weight: var(--peso-semi);
}
.btn-peligro:hover {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(255, 69, 58, 0.55);
}

.btn-rearmar {
  background: var(--ambar-tenue);
  border-color: rgba(255, 159, 10, 0.35);
  color: var(--ambar);
  font-weight: var(--peso-semi);
}
.btn-rearmar:hover { background: var(--ambar); border-color: var(--ambar); color: #1a1200; }

.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--superficie-2); border-color: var(--raya); }

.btn-quitar-fila { color: var(--texto-dim); }
.btn-quitar-fila:hover { color: var(--rojo); background: var(--rojo-tenue); }

.btn-icono {
  padding: 0.5em;
  border-radius: var(--radio-full);
  width: 2.25rem;
  height: 2.25rem;
}

.btn-ancho { width: 100%; }

/* ============================================================
   5. TOPBAR / NAVEGACIÓN
   ============================================================ */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: var(--cristal);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--raya);
  position: sticky;
  top: 0;
  z-index: 20;
}

.marca { display: flex; flex-direction: column; margin-right: auto; gap: 0.1rem; }
.marca-titulo {
  font-weight: var(--peso-fuerte);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-ajustado);
}
.marca-sub { font-size: var(--text-xs); color: var(--texto-dim); letter-spacing: 0.02em; }

.tabs {
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 0;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 0.95em;
  border-radius: var(--radio-full);
  text-decoration: none;
  color: var(--texto-dim);
  font-size: var(--text-sm);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  position: relative;
  transition: background-color var(--dur-base) var(--ease-salida), color var(--dur-base) var(--ease-salida);
}
/* [FIX QA visual] hover con var(--superficie-2) quedaba casi indistinguible del
   pill sólido de la pestaña activa (--superficie-3) en oscuro, e invisible en claro
   (--superficie-2 es blanco puro sobre el topbar ya blanco/cristal) — un usuario podía
   confundir "estoy pasando el ratón" con "esta es la pestaña activa". Se usa una veladura
   translúcida neutra (ya definida y usada en el resto de la app para hovers, p.ej.
   .btn:hover) en vez de un color sólido de la escala de superficies: se ve en ambos temas
   y nunca compite visualmente con el relleno sólido + negrita de .activo. */
.tabs a:hover { background: var(--raya-fuerte); color: var(--texto); }
.tabs a.activo { background: var(--superficie-3); color: var(--texto); font-weight: var(--peso-semi); }
.tabs a:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

.topbar-acciones { display: flex; align-items: center; gap: var(--space-2); }

/* ============================================================
   6. LAYOUT DE VISTAS
   ============================================================ */

.vista {
  padding: var(--space-6) var(--space-5) var(--space-12);
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  animation: vista-entrada var(--dur-lenta) var(--ease-salida);
}
.vista[hidden] { display: none; }

@keyframes vista-entrada {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.bloque {
  background: var(--superficie-1);
  border: 1px solid var(--raya);
  border-radius: var(--radio-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--sombra-sm);
}

/* ============================================================
   7. CUENTA (DASHBOARD) — bloque hero con doble-bisel
   ============================================================ */

.cuenta-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
}

.cuenta-metrica {
  background: var(--superficie-shell);
  border: 1px solid var(--raya);
  border-radius: var(--radio-md);
  padding: 3px;
}
.cuenta-metrica-inner {
  background: var(--superficie-2);
  border-radius: calc(var(--radio-md) - 3px);
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: inset 0 1px 0 var(--realce-interior);
  height: 100%;
}

.label {
  font-size: var(--text-2xs);
  color: var(--texto-dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: var(--peso-medio);
}
.valor {
  font-size: var(--text-lg);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-normal);
  font-variant-numeric: tabular-nums;
}
.fuente { margin-top: var(--space-2); }

/* ============================================================
   8. TARJETAS DE EA — doble-bisel: carcasa + núcleo
   ============================================================ */

.eas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.ea-card {
  background: var(--superficie-shell);
  border: 1px solid var(--raya);
  border-radius: var(--radio-xl);
  padding: 4px;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-salida), border-color var(--dur-base) var(--ease-salida);
}
.ea-card:hover {
  border-color: var(--raya-fuerte);
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
}

.ea-card-inner {
  background: var(--superficie-2);
  border-radius: calc(var(--radio-xl) - 4px);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: inset 0 1px 0 var(--realce-interior);
  height: 100%;
}

.ea-card-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.ea-nombre { margin: 0; font-size: var(--text-md); }
.ea-simbolo {
  color: var(--texto-dim);
  font-size: var(--text-xs);
  font-family: var(--fuente-mono);
  background: var(--superficie-3);
  padding: 0.15em 0.55em;
  border-radius: var(--radio-full);
  flex-shrink: 0;
}

.ea-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.7em;
  border-radius: var(--radio-full);
  font-size: var(--text-xs);
  font-weight: var(--peso-medio);
  background: var(--superficie-3);
  color: var(--texto-dim);
  border: 1px solid var(--raya);
}
.badge-modo.modo-real { color: var(--ambar); border-color: rgba(255, 159, 10, 0.35); background: var(--ambar-tenue); }
.badge-modo.modo-demo { color: var(--texto-dim); }
.badge-modo.modo-tester { color: var(--texto-tenue2); }

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gris-estado);
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px transparent;
  transition: box-shadow var(--dur-base) var(--ease-salida);
}
.estado-activo .dot, .dot-activo { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-tenue); animation: pulso-vivo 2.4s ease-in-out infinite; }
.estado-pausado .dot, .dot-pausado { background: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-tenue); }
.estado-alerta .dot, .dot-alerta { background: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-tenue); }
.estado-desconocido .dot, .dot-desconocido { background: var(--gris-estado); }

@keyframes pulso-vivo {
  0%, 100% { box-shadow: 0 0 0 3px var(--verde-tenue); }
  50% { box-shadow: 0 0 0 5px transparent; }
}

.estado-activo .badge-estado-texto, .badge-estado.estado-activo { color: var(--verde); }
.estado-pausado .badge-estado-texto, .badge-estado.estado-pausado { color: var(--ambar); }
.estado-alerta .badge-estado-texto, .badge-estado.estado-alerta { color: var(--rojo); }
.estado-desconocido .badge-estado-texto, .badge-estado.estado-desconocido { color: var(--gris-estado); }

.conector { display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--text-xs); color: var(--texto-dim); margin-left: auto; }
.conector.conectado .dot-conexion { background: var(--verde); }
.conector.desconectado .dot-conexion { background: var(--rojo); }

.ea-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--raya);
  border-bottom: 1px solid var(--raya);
}
.ea-stats > div { display: flex; flex-direction: column; gap: 0.2rem; }
.ea-stats .valor { font-size: var(--text-md); }

.ea-heartbeat { margin: 0; font-size: var(--text-xs); }

.ea-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 0.1rem; }
.ea-acciones .btn { flex: 1 1 auto; }

/* Valores de P&L — ÚNICO uso permitido de verde/rojo semántico */
.valor-positivo { color: var(--verde); }
.valor-negativo { color: var(--rojo); }

/* ============================================================
   9. TABLAS
   ============================================================ */

.tabla-scroll { overflow-x: auto; border-radius: var(--radio-md); }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
/* Solo las tablas de datos densos (muchas columnas numéricas) necesitan un ancho mínimo con
   scroll horizontal propio. Las demás (parámetros, calendario, comparativa) tienen pocas
   columnas y deben caber siempre en el viewport — si no, en móvil "esconden" su última
   columna (p.ej. el botón Quitar) sin ninguna pista de que hay que hacer scroll. */
.tabla-expandible, .tabla-ancha { min-width: 640px; }
.tabla th, .tabla td {
  text-align: left;
  padding: 0.75em 0.85em;
  border-bottom: 1px solid var(--raya);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tabla th {
  color: var(--texto-dim);
  font-weight: var(--peso-medio);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: sticky;
  top: 0;
  background: var(--superficie-1);
}
.tabla tbody tr.fila-trade { cursor: pointer; transition: background-color var(--dur-rapida) var(--ease-salida); }
.tabla tbody tr.fila-trade:hover { background: var(--superficie-2); }
.tabla td.celda-ancha, .tabla th.celda-ancha { white-space: normal; }

.fila-vacia td { text-align: center; color: var(--texto-tenue2); white-space: normal; padding: var(--space-6) var(--space-4); font-size: var(--text-sm); }
.fila-vacia .estado-vacio { padding: var(--space-4); }

.fila-no-entrada { color: var(--texto-tenue2); background: var(--superficie-shell); font-style: italic; }
.fila-no-entrada td { white-space: normal; }

/* --- Celda de despliegue (chevron) --- */
.celda-toggle { width: 2rem; text-align: center !important; color: var(--texto-tenue2); }
.chevron {
  display: inline-block;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-base) var(--ease-spring);
}
.fila-trade.trade-abierto .chevron { transform: rotate(45deg); }

/* --- La "ficha" de operación: el porqué, legible --- */
.fila-detalle { display: none; }
.fila-detalle.abierta {
  display: table-row;
  animation: detalle-entrada var(--dur-base) var(--ease-salida);
}
@keyframes detalle-entrada {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fila-detalle td { white-space: normal; padding: 0; border-bottom: 1px solid var(--raya); }

/* La ficha de la operación es prosa + chips, no datos tabulares: en móvil no debe quedar
   presa del min-width:640px de la tabla — se ancla (sticky) al viewport visible del
   contenedor con scroll para poder leerse entera sin desplazamiento horizontal. El sticky
   va en el CONTENIDO (no en el <td>): un <td> en layout de tabla automático ignora un
   width explícito si el contenido interno es más ancho. */
@media (max-width: 720px) {
  .ficha-operacion {
    position: sticky;
    left: var(--space-2);
    width: calc(100vw - 4rem);
  }
}

.ficha-operacion {
  background: var(--superficie-shell);
  margin: var(--space-2);
  border-radius: var(--radio-md);
  border: 1px solid var(--raya);
  overflow: hidden;
}

.detalle-condicion {
  font-size: var(--text-sm);
  color: var(--texto);
  padding: var(--space-4) var(--space-4) var(--space-3);
  margin: 0;
  border-left: 3px solid var(--accento);
  background: var(--superficie-2);
  line-height: 1.55;
}

.detalle-r {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 var(--space-4) var(--space-3);
  background: var(--superficie-2);
}
.detalle-r .label { font-size: var(--text-2xs); }

/* Flexbox, no grid: con un número variable de indicadores por operación, un grid de
   columnas fijas deja "huecos" vacíos y sólidos en la última fila — flex-wrap nunca. */
.detalle-indicadores {
  display: flex;
  flex-wrap: wrap;
}
.detalle-indicadores div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--superficie-1);
  padding: var(--space-3);
  flex: 1 1 118px;
  box-shadow: inset -1px -1px 0 var(--raya);
}
.detalle-indicadores div > span:last-child {
  font-family: var(--fuente-mono);
  font-size: var(--text-sm);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
}
.detalle-indicadores .label { font-size: 0.62rem; }

/* Tabla comparativa demo/real: solo 3 columnas cortas — el min-width:640px genérico de
   .tabla la empujaría fuera de pantalla en móvil sin ninguna pista de que hay scroll,
   pareciendo una vista rota/vacía. Con 3 columnas reales nunca necesita scroll horizontal. */
.tabla-comparativa { min-width: 0; }
.tabla-comparativa th, .tabla-comparativa td { white-space: normal; }

/* ============================================================
   10. FILTROS
   ============================================================ */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
}
.filtros label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--text-xs);
  color: var(--texto-dim);
  font-weight: var(--peso-medio);
}
.campo-check {
  flex-direction: row !important;
  align-items: center;
  gap: 0.5rem !important;
}
.campo-check input { width: 17px; height: 17px; accent-color: var(--accento); }

.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

/* ============================================================
   11. FORMULARIOS
   ============================================================ */

input[type="text"], input[type="password"], input[type="number"],
input[type="date"], select, textarea {
  background: var(--superficie-2);
  border: 1px solid var(--raya);
  color: var(--texto);
  padding: 0.62em 0.8em;
  border-radius: var(--radio-sm);
  font-family: inherit;
  font-size: var(--text-sm);
  transition: border-color var(--dur-base) var(--ease-salida), box-shadow var(--dur-base) var(--ease-salida);
}
input::placeholder, textarea::placeholder { color: var(--texto-tenue2); }
input:hover, select:hover, textarea:hover { border-color: var(--raya-fuerte); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accento);
  box-shadow: var(--sombra-foco);
}
select { appearance: none; background-image: none; padding-right: 1.6em; }

.tabla input[type="text"], .tabla input[type="date"] { width: 100%; min-width: 0; }

.campo { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-4); }
.campo span { font-size: var(--text-xs); color: var(--texto-dim); font-weight: var(--peso-medio); }

#form-manual {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  align-items: end;
}
#form-manual label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--text-xs);
  color: var(--texto-dim);
  font-weight: var(--peso-medio);
}
#form-manual .campo-ancho { grid-column: 1 / -1; }
#form-manual button { grid-column: 1 / -1; justify-self: start; }

.fila-botones { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

.resultado {
  margin-top: var(--space-3);
  padding: 0.65em 0.9em;
  border-radius: var(--radio-sm);
  font-size: var(--text-sm);
  animation: vista-entrada var(--dur-base) var(--ease-salida);
}
.resultado.exito { background: var(--verde-tenue); color: var(--verde); border: 1px solid rgba(48, 209, 88, 0.3); }
.resultado.error { background: var(--rojo-tenue); color: var(--rojo); border: 1px solid rgba(255, 69, 58, 0.3); }

/* ============================================================
   12. AVISOS
   ============================================================ */

.aviso-fijo {
  background: var(--superficie-2);
  border: 1px solid var(--raya);
  border-left: 3px solid var(--accento);
  border-radius: var(--radio-sm);
  padding: 0.85em 1.1em;
  font-size: var(--text-sm);
  color: var(--texto-dim);
}

.aviso-destacado {
  background: var(--ambar-tenue);
  border: 1px solid rgba(255, 159, 10, 0.3);
  border-radius: var(--radio-sm);
  padding: 0.85em 1.1em;
  font-size: var(--text-sm);
  color: var(--texto);
  margin: var(--space-3) 0 var(--space-4) 0;
}

.aviso-alerta {
  background: var(--rojo-tenue);
  border: 1px solid rgba(255, 69, 58, 0.3);
  border-radius: var(--radio-sm);
  padding: 0.75em 1em;
  font-size: var(--text-sm);
  color: var(--texto);
  margin-bottom: var(--space-3);
}

/* ============================================================
   13. MODAL — acción destructiva bien diferenciada
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 5, 7, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-4);
  animation: fundido-entrada var(--dur-base) var(--ease-salida);
}
.modal-overlay[hidden] { display: none; }

@keyframes fundido-entrada { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--superficie-1);
  border: 1px solid var(--raya-fuerte);
  border-radius: var(--radio-lg);
  padding: var(--space-6);
  max-width: 420px;
  width: 100%;
  box-shadow: var(--sombra-lg);
  animation: modal-entrada var(--dur-base) var(--ease-spring);
}
@keyframes modal-entrada {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal h3 { color: var(--texto); font-size: var(--text-md); }
.modal-acciones { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); }

.modal.modal-peligro {
  border-color: rgba(255, 69, 58, 0.4);
  box-shadow: var(--sombra-lg), 0 0 0 1px rgba(255, 69, 58, 0.12);
}
.modal.modal-peligro h3 {
  color: var(--rojo);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.modal.modal-peligro h3::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rojo);
  box-shadow: 0 0 0 4px var(--rojo-tenue);
  flex-shrink: 0;
}

/* [FIX QA visual] #modal-confirmar traía SIEMPRE .btn-peligro (rojo) hardcodeado en el HTML,
   sin importar la acción: Pausar/Reanudar/Rearmar (reversibles, rutinarias) se confirmaban con
   el MISMO botón rojo de alarma que Cerrar todo (irreversible, el auténtico botón de pánico) —
   diluía justo la diferenciación que pedía Joni. El botón de confirmar es ahora neutro
   (.btn-primario, azul de acción estándar) por defecto y solo se pinta de rojo cuando el propio
   JS ya marca el modal como peligroso (`modal.classList.toggle('modal-peligro', ...)`, sin tocar
   ese JS): así Cerrar todo sigue siendo inconfundible y el resto deja de parecer una alarma.
   */
.modal.modal-peligro #modal-confirmar {
  background: var(--rojo-tenue);
  border-color: rgba(255, 69, 58, 0.35);
  color: var(--rojo);
  box-shadow: none;
}
.modal.modal-peligro #modal-confirmar:hover {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(255, 69, 58, 0.55);
}

/* ============================================================
   14. TOASTS
   ============================================================ */

.toasts {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  left: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  z-index: 200;
  pointer-events: none;
}
.toast {
  background: var(--cristal);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--raya-fuerte);
  border-radius: var(--radio-sm);
  padding: 0.75em 1.1em;
  font-size: var(--text-sm);
  font-weight: var(--peso-medio);
  box-shadow: var(--sombra-lg);
  max-width: 360px;
  animation: toast-entrada var(--dur-base) var(--ease-spring);
}
@keyframes toast-entrada {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast.toast-exito { border-color: rgba(48, 209, 88, 0.4); color: var(--verde); }
.toast.toast-error { border-color: rgba(255, 69, 58, 0.4); color: var(--rojo); }

/* ============================================================
   15. LISTA DE RACHAS
   ============================================================ */

.lista-rachas { display: flex; flex-direction: column; gap: var(--space-2); }
.lista-rachas li {
  background: var(--superficie-2);
  border: 1px solid var(--raya);
  border-radius: var(--radio-sm);
  padding: 0.7em 1em;
  font-size: var(--text-sm);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ============================================================
   16. ESTADOS VACÍOS / SKELETON
   ============================================================ */

.estado-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-4);
  color: var(--texto-tenue2);
  text-align: center;
  grid-column: 1 / -1;
}
.estado-vacio svg { width: 32px; height: 32px; opacity: 0.5; }
.estado-vacio p { font-size: var(--text-sm); margin: 0; }

.skeleton {
  border-radius: var(--radio-xs);
  background: linear-gradient(100deg, var(--superficie-2) 30%, var(--superficie-3) 50%, var(--superficie-2) 70%);
  background-size: 200% 100%;
  animation: skeleton-brillo 1.6s ease-in-out infinite;
}
@keyframes skeleton-brillo {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--superficie-2); }
}

.ea-card-skeleton .ea-card-inner { gap: var(--space-3); }
.linea-skeleton { height: 0.9em; }
.linea-skeleton.corta { width: 40%; }
.linea-skeleton.media { width: 65%; }
.linea-skeleton.ancha { width: 100%; }
.bloque-skeleton { height: 2.4rem; border-radius: var(--radio-sm); }

/* ============================================================
   17. LOGIN
   ============================================================ */

.pagina-login {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.tarjeta-login-shell {
  background: var(--superficie-shell);
  border: 1px solid var(--raya);
  border-radius: var(--radio-xl);
  padding: 4px;
  max-width: 400px;
  width: 100%;
  box-shadow: var(--sombra-lg);
  animation: modal-entrada var(--dur-lenta) var(--ease-spring);
}

.tarjeta-login {
  background: var(--superficie-1);
  border-radius: calc(var(--radio-xl) - 4px);
  padding: var(--space-8) var(--space-7);
  box-shadow: inset 0 1px 0 var(--realce-interior);
}

.login-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radio-md);
  background: linear-gradient(155deg, var(--accento), var(--accento-fuerte));
  color: #fff;
  margin: 0 auto var(--space-5);
  box-shadow: 0 10px 24px -8px var(--sombra-glow-accento);
}
.login-marca svg { width: 24px; height: 24px; }

.login-cabecera { text-align: center; margin-bottom: var(--space-6); }
.login-cabecera h1 { font-size: var(--text-lg); margin-bottom: 0.3rem; }

.mensaje-error {
  background: var(--rojo-tenue);
  border: 1px solid rgba(255, 69, 58, 0.3);
  color: var(--rojo);
  padding: 0.7em 0.9em;
  border-radius: var(--radio-sm);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  animation: vista-entrada var(--dur-base) var(--ease-salida);
}
.login-pie { margin-top: var(--space-6); font-size: var(--text-2xs); text-align: center; line-height: 1.6; }

/* ============================================================
   18. TOGGLE DE TEMA
   ============================================================ */

.btn-tema {
  position: relative;
  overflow: hidden;
}
.btn-tema-flotante {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 30;
  background: var(--cristal);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--raya);
}
.btn-tema svg { position: absolute; transition: transform var(--dur-lenta) var(--ease-spring), opacity var(--dur-base) var(--ease-salida); }
.icono-sol { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.icono-luna { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="light"] .icono-sol { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="light"] .icono-luna { opacity: 0; transform: rotate(90deg) scale(0.5); }

/* ============================================================
   19b. CABECERA DE BLOQUE CON CONTROLES (curva/heatmap/comparativa)
   Fila h2 + selects + estadísticas cortas, reutilizada por varias de las
   8 funcionalidades nuevas para no repetir flex a mano en cada una.
   ============================================================ */

.bloque-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.bloque-cabecera h2 { margin-bottom: 0; }
.bloque-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.bloque-controles label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  color: var(--texto-dim);
  font-weight: var(--peso-medio);
}
.bloque-controles select { padding: 0.4em 0.6em; font-size: var(--text-xs); }
.bloque-controles .input-corto { width: 5.5em; padding: 0.4em 0.6em; font-size: var(--text-xs); }
.bloque-stats { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--texto-dim); }
.bloque-stats strong { color: var(--texto); font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; }

/* Nota honesta: motivo por el que una cifra no se muestra (mínimo de datos no alcanzado).
   Nunca se disfraza de error — es información, con el mismo tratamiento visual que .dim
   pero con un poco más de aire y un borde discreto para separarla de la cifra vecina. */
.nota-honesta {
  font-size: var(--text-xs);
  color: var(--texto-dim);
  font-style: italic;
  line-height: 1.5;
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  border-top: 1px dashed var(--raya);
}
.nota-honesta:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* ============================================================
   20. CURVA DE EQUITY (SVG dibujado a mano) + DRAWDOWN SOMBREADO
   ============================================================ */

.grafico-equity-wrap {
  position: relative;
  width: 100%;
}
.grafico-equity-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.grafico-equity-eje-texto {
  font-family: var(--fuente);
  font-size: 9.5px;
  fill: var(--texto-dim);
  font-variant-numeric: tabular-nums;
}
.grafico-equity-rejilla { stroke: var(--raya); stroke-width: 1; }
.grafico-equity-area { fill: url(#grad-equity); }
/* Paradas del gradiente del área bajo la curva — deben ir por clase (nunca stop-color="" inline,
   la CSP de la app es style-src 'self' sin inline) para poder usar el color del tema (--accento). */
.grafico-equity-stop-inicio { stop-color: var(--accento); stop-opacity: 0.3; }
.grafico-equity-stop-fin { stop-color: var(--accento); stop-opacity: 0; }
.grafico-equity-linea { fill: none; stroke: var(--accento); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.grafico-equity-dd-area { fill: var(--rojo); opacity: 0.16; }
.grafico-equity-hwm { fill: none; stroke: var(--texto-tenue2); stroke-width: 1; stroke-dasharray: 2.5 3; }
.grafico-equity-punto {
  fill: var(--superficie-1);
  stroke: var(--accento);
  stroke-width: 1.5;
  cursor: default;
  transition: r var(--dur-rapida) var(--ease-spring);
}
.grafico-equity-punto:hover { r: 4.5; }
.grafico-equity-punto-hit { fill: transparent; cursor: default; }

.grafico-vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  color: var(--texto-tenue2);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-4);
}

/* ============================================================
   21. BARRAS DE CONSUMO DE LÍMITES (patrón prop-firm)
   ============================================================ */

.barras-riesgo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.barra-riesgo {
  background: var(--superficie-2);
  border: 1px solid var(--raya);
  border-radius: var(--radio-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.barra-riesgo-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-xs);
}
.barra-riesgo-nombre { color: var(--texto-dim); font-weight: var(--peso-medio); }
.barra-riesgo-valor { font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; color: var(--texto); }
/* <progress> nativo en vez de un div con ancho puesto por JS: el ancho del relleno lo controla
   el propio navegador a partir de los atributos IDL value/max (no es una propiedad CSS), así que
   queda fuera del alcance de la CSP style-src 'self' sin recurrir a una clase por cada posible
   porcentaje. Solo el COLOR se controla por clase, vía los pseudo-elementos estándar. */
.barra-riesgo-progreso {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 9px;
  border: none;
  border-radius: var(--radio-full);
  background: var(--superficie-3);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.barra-riesgo-progreso::-webkit-progress-bar { background: var(--superficie-3); border-radius: var(--radio-full); }
.barra-riesgo-progreso::-webkit-progress-value {
  background: var(--gris-estado);
  border-radius: var(--radio-full);
  transition: width var(--dur-lenta) var(--ease-salida), background-color var(--dur-base) var(--ease-salida);
}
.barra-riesgo-progreso::-moz-progress-bar {
  background: var(--gris-estado);
  border-radius: var(--radio-full);
  transition: width var(--dur-lenta) var(--ease-salida), background-color var(--dur-base) var(--ease-salida);
}
/* [FIX QA visual] Un selector desconocido en una lista separada por comas invalida la regla
   COMPLETA en ese motor — Chromium no reconoce `::-moz-progress-bar`, así que las 3 reglas de
   abajo, tal y como estaban combinadas con `,`, nunca llegaban a aplicarse en Chrome/Edge: las
   3 barras de riesgo se veían siempre del mismo gris de `--gris-estado` (la regla base, esa sí
   de un único selector) sin importar su estado real ok/aviso/peligro. Cada prefijo va ahora en
   su propia regla independiente para que un pseudo-elemento no soportado en un motor no tumbe
   la versión del otro motor. */
.barra-riesgo-progreso.riesgo-ok::-webkit-progress-value { background: var(--verde); }
.barra-riesgo-progreso.riesgo-ok::-moz-progress-bar { background: var(--verde); }
.barra-riesgo-progreso.riesgo-aviso::-webkit-progress-value { background: var(--ambar); }
.barra-riesgo-progreso.riesgo-aviso::-moz-progress-bar { background: var(--ambar); }
.barra-riesgo-progreso.riesgo-peligro::-webkit-progress-value { background: var(--rojo); }
.barra-riesgo-progreso.riesgo-peligro::-moz-progress-bar { background: var(--rojo); }
.barra-riesgo-pie { font-size: var(--text-2xs); color: var(--texto-tenue2); }
.barra-riesgo-pie.riesgo-aviso-texto { color: var(--ambar); }
.barra-riesgo-pie.riesgo-peligro-texto { color: var(--rojo); font-weight: var(--peso-medio); }
.skeleton-barra-riesgo { height: 9px; border-radius: var(--radio-full); margin-top: 0.45rem; }

/* ============================================================
   22. CHIP R-MÚLTIPLO
   ============================================================ */

.chip-r {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.65em;
  border-radius: var(--radio-full);
  font-size: var(--text-xs);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip-r.chip-r-positiva { color: var(--verde); background: var(--verde-tenue); border-color: rgba(48, 209, 88, 0.3); }
.chip-r.chip-r-negativa { color: var(--rojo); background: var(--rojo-tenue); border-color: rgba(255, 69, 58, 0.3); }
.chip-r.chip-r-neutro { color: var(--texto-tenue2); background: var(--superficie-3); }

/* ============================================================
   23. HEATMAP HORA × DÍA
   ============================================================ */

:root {
  --heat-verde-rgb: 52, 199, 89;
  --heat-rojo-rgb: 255, 69, 58;
}

.heatmap-grid {
  display: grid;
  grid-template-columns: 56px repeat(24, minmax(24px, 1fr));
  gap: 2px;
  min-width: 680px;
}
.heatmap-celda-hora {
  font-size: 0.58rem;
  color: var(--texto-tenue2);
  text-align: center;
  padding-bottom: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.heatmap-celda-dia {
  font-size: var(--text-2xs);
  color: var(--texto-dim);
  display: flex;
  align-items: center;
  padding-right: 0.4rem;
  font-weight: var(--peso-medio);
}
.heatmap-celda {
  aspect-ratio: 1;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.56rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto-dim);
  background: var(--superficie-2);
  border: 1px solid var(--raya);
}
.heatmap-celda.heat-pos-1 { background: rgba(var(--heat-verde-rgb), 0.16); border-color: transparent; }
.heatmap-celda.heat-pos-2 { background: rgba(var(--heat-verde-rgb), 0.34); border-color: transparent; color: var(--texto); }
.heatmap-celda.heat-pos-3 { background: rgba(var(--heat-verde-rgb), 0.55); border-color: transparent; color: #072b0f; }
.heatmap-celda.heat-pos-4 { background: rgba(var(--heat-verde-rgb), 0.8); border-color: transparent; color: #052008; font-weight: var(--peso-semi); }
.heatmap-celda.heat-neg-1 { background: rgba(var(--heat-rojo-rgb), 0.16); border-color: transparent; }
.heatmap-celda.heat-neg-2 { background: rgba(var(--heat-rojo-rgb), 0.34); border-color: transparent; color: var(--texto); }
.heatmap-celda.heat-neg-3 { background: rgba(var(--heat-rojo-rgb), 0.55); border-color: transparent; color: #2b0705; }
.heatmap-celda.heat-neg-4 { background: rgba(var(--heat-rojo-rgb), 0.8); border-color: transparent; color: #200402; font-weight: var(--peso-semi); }
.heatmap-celda.heat-vacio { color: var(--texto-tenue2); }

.heatmap-leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-2xs);
  color: var(--texto-dim);
}
.heatmap-leyenda-muestra {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1px solid var(--raya);
  flex-shrink: 0;
}

/* ============================================================
   24. AJUSTES — SECCIÓN BACKTESTS
   ============================================================ */

.form-backtest {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
}
.form-backtest label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--text-xs);
  color: var(--texto-dim);
  font-weight: var(--peso-medio);
}

input[type="file"] {
  background: var(--superficie-2);
  border: 1px solid var(--raya);
  color: var(--texto-dim);
  border-radius: var(--radio-sm);
  font-size: var(--text-xs);
  padding: 0.4em 0.6em 0.4em 0.4em;
  max-width: 280px;
}
input[type="file"]::file-selector-button {
  appearance: none;
  border: none;
  background: var(--superficie-3);
  color: var(--texto);
  padding: 0.5em 0.9em;
  border-radius: var(--radio-xs);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--peso-medio);
  margin-right: 0.6em;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-salida);
}
input[type="file"]::file-selector-button:hover { background: var(--raya-fuerte); }

.tabla-tandas { min-width: 0; }
.tabla-tandas th, .tabla-tandas td { white-space: normal; }

/* ============================================================
   19. RESPONSIVE
   ============================================================ */

@media (max-width: 720px) {
  .topbar { padding: var(--space-3) var(--space-4); gap: var(--space-1) var(--space-2); }
  .marca-titulo { font-size: var(--text-base); }
  .marca-sub { display: none; }
  /* Fila 1: marca + acciones; fila 2: pestañas a todo lo ancho, con scroll horizontal —
     en vez de dejar que el wrap por defecto deje "Salir" huérfano en su propia fila. */
  .marca { order: 1; margin-right: 0; }
  .topbar-acciones { order: 2; margin-left: auto; }
  .tabs { order: 3; flex: 1 1 100%; justify-content: flex-start; margin-top: var(--space-1); }
  .vista { padding: var(--space-4) var(--space-4) var(--space-10); gap: var(--space-4); }
  .bloque { padding: var(--space-4); border-radius: var(--radio-md); }
  .ea-acciones { flex-direction: column; }
  .ea-acciones .btn { width: 100%; }
  .filtros { flex-direction: column; align-items: stretch; }
  .filtros .btn { align-self: stretch; }
  h1 { font-size: var(--text-lg); }
  .cuenta-metricas { grid-template-columns: repeat(2, 1fr); }
  .eas-grid { grid-template-columns: 1fr; }
  .tarjeta-login { padding: var(--space-6) var(--space-5); }

  /* [FIX QA visual] Las tablas densas (.tabla-expandible/.tabla-ancha, min-width:640px) se
     salen del viewport en móvil y SÍ tienen scroll horizontal (.tabla-scroll ya trae
     overflow-x:auto), pero el corte recto en el borde derecho no se distingue de una columna
     rota/desbordada — nada avisa de que se puede deslizar para ver el resto. Igual que el
     resto de la app usa veladuras/translucencias al estilo Apple, se añade un fundido en el
     borde derecho (máscara CSS, sin JS ni marcado nuevo) que insinúa "hay más contenido" —
     inocuo en tablas que ya caben enteras (.tabla-comparativa), porque ahí no hay nada que
     recortar. */
  .tabla-scroll {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }

  /* [FIX QA visual] En las tablas anchas (min-width:640px) el "estado vacío" (icono + mensaje)
     se centraba respecto a las 640px+ de la fila entera, no respecto al viewport visible: en
     móvil aparecía a mitad de camino, medio cortado por el borde de pantalla (y ahora también
     por el fundido de arriba) — un mensaje "sin resultados" que se ve roto es justo el tipo de
     estado vacío feo a evitar. Al fijar su ancho al de su propio contenido y anclarlo al borde
     izquierdo del scroll, se ve completo nada más entrar. No toca el mismo componente cuando se
     usa fuera de una tabla (grid de EAs), donde nunca hay scroll horizontal que corregir. */
  .fila-vacia .estado-vacio {
    position: sticky;
    left: 0;
    width: max-content;
    max-width: 85vw;
  }

  /* Curva de equity / heatmap / barras de riesgo / backtests — cabeceras con selects se apilan
     igual que .filtros, y el heatmap (min-width:680px) reutiliza el mismo fundido de scroll de
     .tabla-scroll ya definido arriba envolviéndolo con esa misma clase desde el HTML. */
  .bloque-cabecera { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .bloque-controles { flex-direction: column; align-items: stretch; }
  .bloque-controles select { width: 100%; }
  .bloque-stats { flex-wrap: wrap; gap: var(--space-3); }
  .barras-riesgo-grid { grid-template-columns: 1fr; }
  .form-backtest { flex-direction: column; align-items: stretch; }
  .form-backtest input[type="file"] { max-width: none; }
  .form-backtest .btn { align-self: stretch; }

  /* [FIX QA visual — lote 2] .desglose-fila (Métricas → "Desglose por motivo de cierre") reserva
     132px fijos para .desglose-motivo + 148px fijos para .desglose-cifra — en un viewport móvil
     de ~390px eso deja la barra <.desglose-progreso>, que es flex:1 con min-width:0, con 0px
     reales de ancho: la barra de color desaparece del todo y solo quedan las 2 etiquetas de
     texto, aunque el dato siga siendo correcto. Se apila en 2 líneas (motivo+cifra arriba,
     barra a todo lo ancho debajo) en vez de encoger las etiquetas — así el texto (motivo y la
     cifra en €) sigue siendo legible sin abreviar, y la barra recupera un ancho útil real. */
  .desglose-fila { flex-wrap: wrap; row-gap: var(--space-1); }
  .desglose-motivo, .desglose-cifra { width: auto; }
  .desglose-cifra { margin-left: auto; }
  .desglose-progreso { flex: 1 1 100%; order: 1; }
}

@media (max-width: 420px) {
  .cuenta-metricas { grid-template-columns: 1fr; }
}

/* ============================================================
   25. ESTADO DE INSTANCIA (semáforo elevado) + TARJETA CONJUNTA
   Lote 2 — investigación R2 #7/FUNCIONALIDADES-BACKLOG.md #16 (instancia) y #10/#11
   (correlación + exposición simultánea entre los 2 EAs).
   ============================================================ */

/* El `.conector` ya existía (binario conectado/desconectado) — se eleva a 3 estados
   reutilizando exactamente la misma rampa verde/ámbar/rojo que EA-estado/barras de riesgo,
   nunca un color nuevo. La clase base `.dot` ya trae la transición de box-shadow. */
.conector.instancia-vivo .dot-conexion {
  background: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-tenue);
  animation: pulso-vivo 2.4s ease-in-out infinite;
}
.conector.instancia-tardio .dot-conexion { background: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-tenue); }
.conector.instancia-perdido .dot-conexion { background: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-tenue); }
.conector-texto-hace { color: var(--texto-tenue2); }

.bloque-conjunto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
}
.metrica-conjunta {
  background: var(--superficie-2);
  border: 1px solid var(--raya);
  border-radius: var(--radio-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.metrica-conjunta .valor-grande {
  font-size: var(--text-2xl);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-normal);
}
.metrica-conjunta .subtexto { font-size: var(--text-xs); color: var(--texto-dim); line-height: 1.5; }
.exposicion-desglose {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-2xs);
  color: var(--texto-dim);
  flex-wrap: wrap;
  margin-top: 0.15rem;
}
.exposicion-desglose strong { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ============================================================
   26. RISK OF RUIN / PSR / DESGLOSE POR MOTIVO / DIVERGENCIA
   ============================================================ */

.ror-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ror-tile {
  background: var(--superficie-2);
  border: 1px solid var(--raya);
  border-radius: var(--radio-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ror-tile .valor { font-size: var(--text-lg); }
.ror-explicacion {
  font-size: var(--text-sm);
  color: var(--texto);
  line-height: 1.55;
  background: var(--superficie-shell);
  border-left: 3px solid var(--accento);
  border-radius: var(--radio-sm);
  padding: var(--space-3) var(--space-4);
}

.desglose-grupo {
  border: 1px solid var(--raya);
  border-radius: var(--radio-md);
  padding: var(--space-3) var(--space-4);
  background: var(--superficie-2);
  margin-bottom: var(--space-3);
}
.desglose-grupo:last-child { margin-bottom: 0; }
.desglose-grupo-titulo {
  font-size: var(--text-sm);
  font-weight: var(--peso-semi);
  margin-bottom: var(--space-2);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}
.desglose-fila { display: flex; align-items: center; gap: var(--space-3); padding: 0.3rem 0; }
.desglose-motivo { width: 132px; flex-shrink: 0; font-size: var(--text-xs); color: var(--texto-dim); }
.desglose-progreso {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  flex: 1;
  min-width: 0;
  height: 8px;
  border: none;
  border-radius: var(--radio-full);
  background: var(--superficie-3);
  overflow: hidden;
}
.desglose-progreso::-webkit-progress-bar { background: var(--superficie-3); border-radius: var(--radio-full); }
.desglose-progreso.positiva::-webkit-progress-value { background: var(--verde); border-radius: var(--radio-full); }
.desglose-progreso.positiva::-moz-progress-bar { background: var(--verde); border-radius: var(--radio-full); }
.desglose-progreso.negativa::-webkit-progress-value { background: var(--rojo); border-radius: var(--radio-full); }
.desglose-progreso.negativa::-moz-progress-bar { background: var(--rojo); border-radius: var(--radio-full); }
.desglose-cifra {
  width: 148px;
  flex-shrink: 0;
  text-align: right;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--texto-dim);
}

.divergencia-semaforo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  border-radius: var(--radio-full);
  font-size: var(--text-sm);
  font-weight: var(--peso-semi);
  border: 1px solid var(--raya);
  background: var(--superficie-3);
  color: var(--texto-dim);
}
.divergencia-semaforo .dot { width: 9px; height: 9px; box-shadow: none; }
.divergencia-semaforo.senal-verde { color: var(--verde); background: var(--verde-tenue); border-color: rgba(48, 209, 88, 0.3); }
.divergencia-semaforo.senal-verde .dot { background: var(--verde); }
.divergencia-semaforo.senal-ambar { color: var(--ambar); background: var(--ambar-tenue); border-color: rgba(255, 159, 10, 0.3); }
.divergencia-semaforo.senal-ambar .dot { background: var(--ambar); }
.divergencia-semaforo.senal-roja { color: var(--rojo); background: var(--rojo-tenue); border-color: rgba(255, 69, 58, 0.3); }
.divergencia-semaforo.senal-roja .dot { background: var(--rojo); }
.divergencia-semaforo.senal-insuficiente .dot { background: var(--gris-estado); }
.divergencia-texto {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--texto-dim);
  line-height: 1.6;
}

/* ============================================================
   27. VISOR DE REPLAY — modal casi pantalla completa, SVG a mano
   ============================================================ */

.replay-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 5, 7, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
  padding: var(--space-3);
  animation: fundido-entrada var(--dur-base) var(--ease-salida);
}
.replay-overlay[hidden] { display: none; }

.replay-modal {
  background: var(--superficie-1);
  border: 1px solid var(--raya-fuerte);
  border-radius: var(--radio-lg);
  width: min(1180px, 100%);
  height: min(900px, 96vh);
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-lg);
  overflow: hidden;
  animation: modal-entrada var(--dur-base) var(--ease-spring);
}

.replay-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--raya);
  flex-shrink: 0;
}
.replay-titulo { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.replay-titulo h3 { color: var(--texto); font-size: var(--text-md); }

.replay-cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.replay-chart-wrap { position: relative; width: 100%; }
.replay-chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }

.replay-subpaneles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
.replay-subpanel {
  background: var(--superficie-2);
  border: 1px solid var(--raya);
  border-radius: var(--radio-md);
  padding: var(--space-3);
}
.replay-subpanel h4 {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-dim);
  margin-bottom: 0.4rem;
  font-weight: var(--peso-medio);
}
.replay-subpanel svg { width: 100%; height: auto; display: block; overflow: visible; }

.replay-controles {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--raya);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.replay-btn-play {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accento);
  color: #fff;
  flex-shrink: 0;
  border-color: var(--accento);
}
.replay-btn-play:hover { background: var(--accento-fuerte); border-color: var(--accento-fuerte); }
.replay-btn-play svg { width: 15px; height: 15px; }
.replay-progreso { flex: 1 1 240px; accent-color: var(--accento); min-width: 0; }
.replay-contador { font-size: var(--text-xs); color: var(--texto-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

.replay-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-2xs);
  color: var(--texto-dim);
}
.replay-leyenda span { display: inline-flex; align-items: center; gap: 0.35em; }
.replay-leyenda .muestra { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.replay-leyenda .muestra-alcista { background: var(--verde); }
.replay-leyenda .muestra-bajista { background: var(--rojo); }
.replay-leyenda .muestra-ema { background: var(--accento-fuerte); }
.replay-leyenda .muestra-entrada { border: 2px dashed var(--accento); background: transparent; }
.replay-leyenda .muestra-sl { border: 2px dashed var(--rojo-fuerte); background: transparent; }
.replay-leyenda .muestra-tp { border: 2px dashed var(--verde-fuerte); background: transparent; }

/* --- Primitivas SVG del gráfico de velas --- */
.replay-rejilla { stroke: var(--raya); stroke-width: 1; }
.replay-eje-texto { font-family: var(--fuente); font-size: 9px; fill: var(--texto-dim); font-variant-numeric: tabular-nums; }
.replay-vela-mecha { stroke-width: 1; }
.replay-vela-cuerpo { stroke-width: 1; }
.replay-vela-alcista { fill: var(--verde); stroke: var(--verde); }
.replay-vela-bajista { fill: var(--rojo); stroke: var(--rojo); }
.replay-vela-futura { opacity: 0.15; }
.replay-linea-ema { fill: none; stroke: var(--accento-fuerte); stroke-width: 1.5; stroke-linejoin: round; }
.replay-linea-indicador { fill: none; stroke: var(--accento); stroke-width: 1.5; stroke-linejoin: round; }
.replay-playhead { stroke: var(--texto); stroke-width: 1.25; stroke-dasharray: 3 3; opacity: 0.6; }
.replay-marcador-linea { stroke-width: 1.25; stroke-dasharray: 4 3; fill: none; }
.replay-marcador-entrada { stroke: var(--accento); }
.replay-marcador-salida-ganancia { stroke: var(--verde); }
.replay-marcador-salida-perdida { stroke: var(--rojo); }
.replay-marcador-sl { stroke: var(--rojo-fuerte); }
.replay-marcador-tp { stroke: var(--verde-fuerte); }
.replay-marcador-texto { font-family: var(--fuente); font-size: 9px; fill: var(--texto-dim); }

.btn-ver-replay { padding: 0.4em 0.8em; font-size: var(--text-2xs); }

@media (max-width: 720px) {
  .replay-overlay { padding: 0; }
  .replay-modal { width: 100vw; height: 100dvh; border-radius: 0; }
  .replay-controles { flex-direction: column; align-items: stretch; }
  .replay-progreso { width: 100%; }
  .replay-cabecera { padding: var(--space-3) var(--space-4); }
  .replay-cuerpo { padding: var(--space-3) var(--space-4); }
}