/* ============================================================================
   SISTEMA VISUAL
   ============================================================================
   Reglas del sistema, para que esto no vuelva a degenerar en colores sueltos:

   1. ELEVACIÓN POR LUZ, NO POR SOMBRA. Sobre un fondo casi negro no queda rango
      por debajo para oscurecer, así que una sombra no se lee como profundidad.
      Lo que sube, se aclara. Un componente NO elige color de fondo: elige NIVEL
      (--s-0 fondo de app · --s-1 barras · --s-2 tarjetas y filas · --s-3
      elementos dentro de tarjeta · --s-4 lo que flota: menús, modales, tooltips).
   2. UN SOLO ACENTO, y significa "esto responde". Nada decorativo lo usa. Si el
      azul aparece en adornos, deja de indicar dónde se puede pulsar.
   3. EL SIGNO SE CODIFICA DOS VECES: color + símbolo (+/−, flecha). Un 8% de los
      hombres no distingue rojo de verde; y además el signo se lee en visión
      periférica, donde el matiz ya no se resuelve.
   5. LA CAPA FLOTANTE (--s-4) NO ADMITE --tx-3. Al ser el nivel mas claro, el
      gris de metadatos se queda en 3.7 de contraste ahi. Dentro de menus,
      modales y tooltips solo se usan --tx-1 y --tx-2. Es una REGLA, no un
      color: bajar --s-4 hasta que --tx-3 cumpliera lo dejaria indistinguible
      del nivel 2, y se perderia la elevacion, que es su unica razon de ser.
   4. VERDE Y ROJO IGUALADOS EN LUMINANCIA. El ojo es más sensible al verde: a
      igual saturación nominal las subidas "pesan" más que las bajadas y la tabla
      se lee como estado de ánimo en vez de como dato. El par de abajo está
      igualado a propósito, por eso el verde tira a azulado.
   ========================================================================== */
:root {
  /* --- rampa de grises: mismo tinte frío, solo cambia la luminancia --- */
  --s-0: #080b10;          /* fondo de la aplicación */
  --s-1: #0e131a;          /* barra lateral y superior */
  --s-2: #141a23;          /* tarjetas, filas de tabla */
  --s-3: #1b222d;          /* elementos dentro de una tarjeta */
  --s-4: #232b38;          /* lo que flota por encima: menús, modales, tooltips */

  --line: #262f3d;         /* borde estándar */
  --line-soft: #1c2430;    /* separador interno, apenas visible */
  --line-strong: #34405180; /* borde en hover */
  --line-lit: #ffffff14;   /* filo de luz cenital en el borde superior */
  --grid: #161d27;         /* rejilla de los gráficos */
  --axis: #242d3a;         /* ejes */

  /* --- texto: tres niveles, ninguno blanco puro (evita halación) --- */
  --tx-1: #e6ecf5;         /* el dato */
  --tx-2: #93a1b4;         /* etiquetas y cabeceras */
  --tx-3: #768396;         /* metadatos: el mas tenue que sigue cumpliendo AA */

  /* --- acento: solo interacción --- */
  --ac: #3d8bff;
  --ac-hi: #6aa6ff;
  --ac-soft: rgba(61, 139, 255, 0.14);

  /* --- semántica de mercado, igualada en luminancia percibida --- */
  /* Igualados en luminancia (0.2839 los dos, medido). El verde tira a
     turquesa a proposito: un verde "de libro" pesa un 34% mas que su rojo y
     hace que una tabla mixta parezca mas alcista de lo que realmente es. */
  --up: #26a294;
  --down: #f2606f;
  --up-soft: rgba(38, 162, 148, 0.16);
  --down-soft: rgba(242, 96, 111, 0.14);
  --warn: #f5a623;

  /* --- geometría --- */
  --nav-w: 232px;          /* ancho del menú lateral, usado también por el gráfico */
  --r: 10px;               /* radio estándar */
  --r-sm: 7px;
  --r-xs: 5px;
  --shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);

  /* --- movimiento: por debajo de 100ms se siente instantáneo --- */
  --t-1: 90ms;
  --t-2: 140ms;
  --t-3: 200ms;
  --e-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* --- PUENTE DE ALIAS ---------------------------------------------------
     Los nombres antiguos siguen vivos y apuntan a la rampa nueva. Gracias a
     esto las ~1000 reglas del fichero adoptan la paleta sin tocar ni una, y el
     rediseño se puede desplegar por fases sin un "big bang". Se irán retirando
     conforme cada bloque se migre a los nombres nuevos.                     */
  --bg: var(--s-0);
  --bg-elev: var(--s-1);
  --surface: var(--s-2);
  --surface-2: var(--s-3);
  --border: var(--line);
  --border-soft: var(--line-soft);
  --text: var(--tx-1);
  --text-dim: var(--tx-2);
  --text-mute: var(--tx-3);
  --accent: var(--ac);
  --accent-soft: var(--ac-soft);
  --radius: var(--r);
  --radius-sm: var(--r-sm);

  /* --- ambiente futurista (fondo): resplandores + rejilla --- */
  --fx-glow-1: rgba(61, 139, 255, 0.13);
  --fx-glow-2: rgba(124, 77, 255, 0.10);
  --fx-glow-3: rgba(0, 209, 209, 0.07);
  --fx-grid: rgba(255, 255, 255, 0.028);
  --fx-svg: 0.55;                 /* opacidad de la imagen decorativa */
}

/* ===================== TEMA CLARO ===================== */
:root[data-theme="light"] {
  --s-0: #e7ebf3;
  --s-1: #eef2f9;
  --s-2: #ffffff;
  --s-3: #f4f7fb;
  --s-4: #ffffff;
  --line: #d6dde8;
  --line-soft: #e6ebf3;
  --line-strong: #b7c2d1cc;
  --line-lit: #ffffff;
  --grid: #e9edf4;
  --axis: #cfd7e2;
  --tx-1: #121824;
  --tx-2: #46556b;
  --tx-3: #64728a;
  --ac: #2f6fe0;
  --ac-hi: #1f5fd0;
  --ac-soft: rgba(47, 111, 224, 0.12);
  --up: #12897b;
  --down: #e0455a;
  --up-soft: rgba(18, 137, 123, 0.14);
  --down-soft: rgba(224, 69, 90, 0.12);
  --warn: #d3820f;
  --shadow: 0 12px 30px -14px rgba(30, 45, 70, 0.28);
  --fx-glow-1: rgba(61, 139, 255, 0.16);
  --fx-glow-2: rgba(124, 77, 255, 0.11);
  --fx-glow-3: rgba(0, 175, 175, 0.09);
  --fx-grid: rgba(24, 45, 86, 0.05);
  --fx-svg: 0.5;
}

/* El foco por teclado tiene que verse SIEMPRE: sin esto, quien navega con
   tabulador no sabe dónde está. :focus-visible no molesta al ratón. */
:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Respeta a quien tiene activado "reducir movimiento" en su sistema: para
   algunas personas las animaciones producen mareo real. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  background:
    radial-gradient(900px 520px at 12% -8%, var(--fx-glow-1), transparent 60%),
    radial-gradient(820px 600px at 108% 4%, var(--fx-glow-2), transparent 55%),
    radial-gradient(760px 520px at 50% 120%, var(--fx-glow-3), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #232c38; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #2f3a49; }
::-webkit-scrollbar-track { background: transparent; }

.app { display: flex; height: 100vh; height: 100dvh; }

/* ============================ SIDEBAR ============================ */
.sidebar {
  width: var(--nav-w);
  flex-shrink: 0;
  background: var(--bg-elev);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 6px 26px; }
/* El logo trae sus propios colores, así que va desnudo: nada de cápsula con
   degradado detrás, que solo ensuciaba la silueta de la flecha. */
.brand-logo { width: 34px; height: 34px; display: block; flex: none; }
.brand-name { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
.brand-name span { color: #35b04a; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 10px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 14px; font-weight: 500;
  font-family: inherit; text-align: left; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }
.nav-item .ico { width: 19px; height: 19px; }

.ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 6px; }
.mkt-state { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); }
.mkt-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); }
.mkt-state.open .dot { background: var(--up); box-shadow: 0 0 0 3px var(--up-soft); }
.mkt-state.closed .dot { background: var(--down); box-shadow: 0 0 0 3px var(--down-soft); }
.refresh-line { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-mute); }
/* El destello del refresco va en opacidad + escala de un anillo, no en el
   box-shadow expandiéndose: la sombra creciente repinta la barra lateral en cada
   fotograma, y esto salta cada 12 s justo cuando puede haber scroll en marcha. */
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.4; position: relative; }
.pulse.live { animation: pulse 1.1s ease-out; }
.pulse.live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--accent-soft); animation: pulse-ring 1.1s ease-out;
}
@keyframes pulse { 0% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes pulse-ring {
  0% { opacity: 1; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1); }
}

/* ============================== MAIN ============================== */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar {
  display: flex; align-items: center; gap: 26px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--bg-elev), var(--bg));
  flex-shrink: 0;
}
.idx-title { font-size: 12px; color: var(--text-dim); font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.idx-ex { color: var(--text-mute); font-weight: 500; text-transform: none; margin-left: 6px; letter-spacing: 0; }
.idx-value { font-size: 27px; font-weight: 600; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; margin-top: 3px; }
.idx-change { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-variant-numeric: tabular-nums; }
#idx-change-abs { font-size: 15px; font-weight: 600; }
.idx-spark { flex: 1; height: 52px; min-width: 120px; }
#idx-spark { width: 100%; height: 100%; }
.topbar-actions { margin-left: auto; }
.btn-ghost {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; display: grid; place-items: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.btn-ghost:hover { color: var(--text); border-color: #33404f; }
.btn-ghost .ico { width: 18px; height: 18px; }
.btn-ghost.spin .ico { animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--text-dim);
}
.chip.up { background: var(--up-soft); color: var(--up); }
.chip.down { background: var(--down-soft); color: var(--down); }
.up-text { color: var(--up); }
.down-text { color: var(--down); }

/* ============================== VIEWS ============================== */
/* El contenedor de scroll de la app.
   `contain` es lo que hace que el desplazamiento sea fluido: aísla la vista del
   resto del documento, así el navegador sabe que nada de dentro puede afectar al
   layout de fuera y limita invalidaciones y repintado a este subárbol. Sin esto,
   cada refresco de datos (cada 12 s) obligaba a recalcular la página entera.
   `overscroll-behavior` corta el encadenado de scroll al documento (el "tirón"
   al llegar al final).
   NO se toca overflow-x: queda en su valor calculado (auto), porque la cabecera
   pegajosa de las tablas depende de que el scroll vertical lo haga ESTA caja. */
.view {
  display: none; flex: 1; overflow-y: auto; padding: 24px 28px 40px;
  contain: layout paint style;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.view.active { display: block; }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 26px 2px 13px;
}
.section-head:first-child { margin-top: 4px; }
.section-head h2 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.2px; }

.legend { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-mute); }
.legend-bar {
  width: 120px; height: 8px; border-radius: 5px;
  background: linear-gradient(90deg, var(--down), var(--s-2), var(--up));
}
.legend-note { margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--border); }

.filter-input, .inp {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 9px 13px; border-radius: 9px;
  font-family: inherit; font-size: 13.5px; outline: none; transition: border 0.15s ease;
}
.filter-input { width: 220px; }
.filter-input:focus, .inp:focus { border-color: var(--accent); }
.filter-input::placeholder, .inp::placeholder { color: var(--text-mute); }

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px;
}
.card-title {
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between;
}

/* ============================= HEATMAP ============================= */
.heatmap-card { padding: 10px; }
.heatmap { width: 100%; height: 440px; }
.heatmap-sm { height: 300px; }
.heatmap-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; }
.heatmap-bar-t { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.heat-placeholder { padding: 26px 12px; text-align: center; color: var(--text-mute); font-size: 13px; }

/* ============================== TABLE ============================== */
/* Densidad de las tablas. La preferencia es real: quien vigila el mercado a
   diario quiere ver el máximo de filas de un vistazo, y quien entra una vez a la
   semana agradece el aire. Se ajusta desde la barra superior y se recuerda. */
:root { --row-y: 12px; --row-fs: 13.5px; }
body[data-density="compacta"] { --row-y: 7px;  --row-fs: 13px; }
body[data-density="amplia"]   { --row-y: 17px; --row-fs: 14px; }

.table-card { padding: 4px 6px; }
.dtable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dtable th {
  text-align: right; font-size: 11px; font-weight: 600; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.4px;
  padding: 13px 14px; border-bottom: 1px solid var(--border-soft);
  cursor: pointer; user-select: none; white-space: nowrap;
  /* La cabecera se queda fija al bajar: en una tabla de 100 componentes, sin
     esto pierdes de vista qué columna estás mirando a las tres filas. */
  position: sticky; top: 0; z-index: 3; background: var(--s-2);
}
.dtable th.left { text-align: left; }
.dtable th:hover { color: var(--text-dim); }
.dtable th.sorted-asc::after { content: " ↑"; color: var(--accent); }
.dtable th.sorted-desc::after { content: " ↓"; color: var(--accent); }
.dtable td {
  text-align: right; padding: var(--row-y) 14px;
  border-bottom: 1px solid var(--border-soft); font-size: var(--row-fs); white-space: nowrap;
}
.dtable tbody tr { cursor: pointer; transition: background-color var(--t-1) var(--e-out); }
.dtable tbody tr:hover { background: var(--surface-2); }
.dtable tbody tr:last-child td { border-bottom: none; }
/* La columna del nombre se queda fija al desplazar en horizontal: sin ella, en
   una tabla ancha acabas mirando cifras sin saber de qué valor son. */
.dtable td.cell-name, .dtable th.left {
  text-align: left; position: sticky; left: 0; z-index: 2; background: var(--s-2);
}
.dtable th.left { z-index: 4; }
.dtable tbody tr:hover td.cell-name { background: var(--surface-2); }

/* Esqueletos de carga: mejor una silueta que se rellena que un guion inmóvil,
   que no distingue "cargando" de "no hay dato". */
@keyframes sk-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }
.sk {
  display: inline-block; height: 0.72em; min-width: 42px; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--s-3), var(--s-4), var(--s-3));
  animation: sk-pulse 1.4s ease-in-out infinite; vertical-align: middle;
}
.sk-wide { min-width: 90px; }

/* selector de densidad en la barra superior */
.dens-seg { flex: none; }
.dens-seg .seg-btn { padding: 6px 9px; font-size: 13px; line-height: 1; min-width: 30px; }
@media (max-width: 900px) { .dens-seg { display: none; } }
.cell-name .nm { font-weight: 600; }
.cell-name .sy { font-size: 11.5px; color: var(--text-mute); margin-top: 1px; }
.sector-tag {
  display: inline-block; font-size: 10.5px; color: var(--text-mute);
  background: var(--surface-2); padding: 1px 7px; border-radius: 5px; margin-left: 7px;
  vertical-align: middle;
}
.mini-bar { display: inline-block; height: 5px; border-radius: 3px; vertical-align: middle; margin-left: 8px; }

/* divisas y materias primas: icono en vez de logo, unidad y rango del día */
.rate-ico {
  width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 15px; border-radius: 7px; background: var(--surface-2); letter-spacing: -2px;
}
.unit { font-size: 11px; color: var(--text-mute); }
.rango { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
/* columnas de contexto (apertura/máx/mín): presentes pero sin robar atención */
.dtable td.soft { color: var(--text-dim); font-weight: 400; }

/* fila de familia (Energía, Metales, Principales…) */
.grp-row td {
  background: linear-gradient(90deg, var(--surface-2), transparent 70%);
  padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border-soft);
}
.grp-name {
  font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--text-dim);
}
.grp-n {
  font-size: 10.5px; color: var(--text-mute); background: var(--bg-elev);
  border-radius: 20px; padding: 1px 7px; margin-left: 8px;
}
.grp-avg { font-size: 11px; font-weight: 600; margin-left: 10px; }

/* mini-gráfico de 12 meses por fila */
.spark-cell { width: 86px; padding-top: 6px; padding-bottom: 6px; }
.spark-svg { display: block; margin-left: auto; opacity: 0.9; }
tr:hover .spark-svg { opacity: 1; }

/* ============================ RESUMEN DE MERCADO =========================
   Cabecera de la vista: el mercado activo en grande y el resto navegable al
   lado. La jerarquía la hace el TAMAÑO, no el color: la cifra manda, el resto
   se retira. Un panel de cabecera que grita en colores compite con los datos.
========================================================================= */
.ov-grid {
  display: grid; grid-template-columns: 1.9fr 1fr; gap: 14px; margin-bottom: 14px;
}
.ov-main { display: flex; flex-direction: column; }
.ov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ov-title { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.ov-sub { font-size: 11.5px; color: var(--tx-3); margin-top: 3px; }
.ov-figs { text-align: right; }
.ov-price {
  font-size: 27px; font-weight: 600; letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ov-change { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }
.ov-chart { height: 190px; margin: 10px -6px -4px; }

.ov-side { display: flex; flex-direction: column; min-width: 0; }
.ov-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.ov-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 9px 10px; border: none; border-radius: var(--r-sm);
  background: none; cursor: pointer; font-family: inherit; text-align: left;
  transition: background-color var(--t-1) var(--e-out);
}
.ov-row:hover { background: var(--s-3); }
/* el mercado que se está viendo, marcado con el acento: es "dónde estoy" */
.ov-row.on { background: var(--ac-soft); box-shadow: inset 2px 0 0 var(--ac); }
.ov-nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov-nm b { font-size: 12.5px; font-weight: 600; color: var(--tx-1); }
.ov-nm small { font-size: 10.5px; color: var(--tx-3); }
.ov-fig { display: flex; flex-direction: column; gap: 2px; text-align: right; flex: none; }
.ov-fig b { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-fig small { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .ov-grid { grid-template-columns: 1fr; }
  .ov-chart { height: 150px; }
}

/* ---- rendimiento del mercado: barras que salen de un eje central ----
   Comparar longitudes es mucho más rápido que leer una columna de cifras. La
   escala es común a subidas y bajadas: si cada lado se normalizara por separado,
   una caída del 2% se vería igual de larga que una subida del 20%. */
.perf-card { margin-bottom: 14px; }
.perf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.perf-seg .seg-btn { padding: 5px 11px; font-size: 12px; }
.perf-bars { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.perf-row {
  display: grid; grid-template-columns: minmax(120px, 1.1fr) 3fr 72px;
  align-items: center; gap: 12px; padding: 5px 6px; border-radius: var(--r-sm);
  cursor: pointer; transition: background-color var(--t-1) var(--e-out);
}
.perf-row:hover { background: var(--s-3); }
.perf-nm {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.perf-ico { font-size: 13px; letter-spacing: -2px; flex: none; }
.perf-track { position: relative; height: 16px; }
.perf-fill {
  position: absolute; top: 3px; height: 10px; border-radius: 3px;
  transition: width var(--t-3) var(--e-out);
}
.perf-fill.up { background: var(--up); border-radius: 0 3px 3px 0; }
.perf-fill.down { background: var(--down); border-radius: 3px 0 0 3px; }
.perf-axis {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--line); transform: translateX(-0.5px);
}
.perf-val { text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.perf-empty { color: var(--tx-3); font-size: 12.5px; padding: 10px 2px; }
@media (max-width: 720px) {
  .perf-row { grid-template-columns: minmax(88px, 1fr) 2fr 62px; gap: 8px; }
}

/* ---- panel de divisas: matriz de cruces + conversor ---- */
.mkt-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-panel { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; margin-bottom: 4px; }
.fx-card { min-width: 0; }
.fx-note { font-size: 11px; color: var(--text-mute); font-weight: 400; margin-left: 8px; }
.fx-matrix-wrap { overflow-x: auto; }
.fx-matrix { width: 100%; border-collapse: separate; border-spacing: 3px; font-variant-numeric: tabular-nums; }
.fx-matrix th {
  font-size: 11px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.5px;
  padding: 5px 6px; text-align: center;
}
.fx-matrix td {
  font-size: 12px; text-align: center; padding: 7px 6px; border-radius: 7px;
  background: var(--surface-2); color: var(--text); white-space: nowrap;
}
.fx-matrix td.fx-self { background: transparent; color: var(--text-mute); }
.fx-conv { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.fx-conv .inp { padding: 8px 10px; font-size: 13px; min-width: 0; }
.fx-conv #fx-amount { flex: 1.3; }
.fx-conv select { flex: 1; cursor: pointer; }
.fx-arrow { color: var(--text-mute); flex: none; }
.fx-result { font-size: 25px; font-weight: 600; letter-spacing: -0.5px; margin-top: 16px; font-variant-numeric: tabular-nums; }
.fx-cur { font-size: 15px; color: var(--text-dim); font-weight: 600; }
.fx-rate { font-size: 11.5px; color: var(--text-mute); margin-top: 5px; }

@media (max-width: 900px) {
  .fx-panel { grid-template-columns: 1fr; }
}
.btn-del {
  background: transparent; border: none; color: var(--text-mute); cursor: pointer;
  font-size: 16px; padding: 2px 6px; border-radius: 6px; line-height: 1;
}
.btn-del:hover { color: var(--down); background: var(--down-soft); }

/* selección múltiple de posiciones (limpiar una importación mala de una vez) */
.cell-act { white-space: nowrap; }
.th-act { width: 68px; }
.pf-chk {
  width: 15px; height: 15px; margin-right: 4px; vertical-align: middle;
  accent-color: var(--accent); cursor: pointer;
}
.pf-selbar {
  display: none; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-dim);
}
.pf-selbar.open { display: flex; }
.pf-sel-del { color: var(--down); border-color: var(--down); }
.pf-sel-del:hover { background: var(--down-soft); color: var(--down); }

/* ============================ PORTFOLIO ============================ */
/* barra de varias carteras */
.pf-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pf-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.pf-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--text-dim);
  cursor: pointer; font-size: 13px; font-weight: 600; transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease; white-space: nowrap;
}
.pf-tab:hover { color: var(--text); border-color: #33404f; }
.pf-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pf-tab-n {
  font-size: 11px; background: var(--bg-elev); color: var(--text-mute);
  padding: 1px 7px; border-radius: 20px; font-variant-numeric: tabular-nums;
}
.pf-tab.active .pf-tab-n { background: rgba(61,139,255,0.18); color: var(--accent); }
.pf-bar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-bar-actions .btn-primary { padding: 7px 14px; }
.pf-bar-actions .btn-ghost-sm:disabled { opacity: 0.4; cursor: not-allowed; }

/* menú de exportación (informe / Excel / CSV) */
.exp-wrap { position: relative; }
.exp-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 268px; padding: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
}
.exp-menu.open { display: block; }
.exp-menu button {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px;
  background: none; border: none; border-radius: 9px; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--text); transition: background 0.12s ease;
}
.exp-menu button:hover { background: var(--surface-2); }
.exp-ico { font-size: 17px; line-height: 1; }
.exp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exp-txt b { font-size: 13px; font-weight: 600; }
.exp-txt small { font-size: 11.5px; color: var(--text-mute); }

/* aviso de posiciones que quedan fuera del total por no tener cotización */
.pf-warn {
  background: rgba(245, 166, 35, 0.1); border: 1px solid rgba(245, 166, 35, 0.32);
  border-radius: 10px; padding: 10px 13px; margin: 14px 0 2px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
}
.pf-warn b { color: #f5a623; font-weight: 600; }

.pf-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px;
}
.stat {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 16px 18px;
}
.stat-lbl { font-size: 12px; color: var(--text-dim); font-weight: 500; }
.stat-val { font-size: 24px; font-weight: 600; letter-spacing: -0.5px; margin-top: 7px; font-variant-numeric: tabular-nums; }
.stat-sub { margin-top: 8px; }

.add-card { margin-top: 18px; }
.add-title { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 13px; }
.add-form { display: flex; gap: 10px; align-items: stretch; }
.search-wrap { position: relative; flex: 1; }
.search-wrap .inp { width: 100%; }
.inp-sm { width: 140px; flex-shrink: 0; }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; display: none;
}
.search-results.open { display: block; }
.sr-item { padding: 10px 14px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.sr-item:hover, .sr-item.active { background: var(--accent-soft); }
.sr-item .sr-sym { font-weight: 600; }
.sr-item .sr-name { color: var(--text-dim); font-size: 12.5px; }
.sr-item .sr-ex { color: var(--text-mute); font-size: 11px; }
.add-hint { font-size: 12px; color: var(--text-mute); margin-top: 10px; min-height: 15px; }
.add-hint.err { color: var(--down); }
.add-hint.ok { color: var(--up); }

.btn-primary {
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  padding: 0 22px; border-radius: 9px; font-family: inherit; font-size: 13.5px; font-weight: 600;
  transition: filter 0.15s ease;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.donut { width: 100%; height: 300px; }

.seg { display: inline-flex; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.seg-btn {
  background: transparent; border: none; color: var(--text-dim); cursor: pointer;
  padding: 5px 12px; border-radius: 6px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--surface-2); color: var(--text); }

.empty { padding: 40px; text-align: center; color: var(--text-mute); font-size: 13.5px; }

/* ============================== MODAL ============================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(4, 6, 10, 0.7);
  backdrop-filter: blur(4px); z-index: 100;
  display: none; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }

/* =========================== ESPACIO DE TRABAJO ===========================
   Al abrir un valor, el gráfico pasa a ocupar el CENTRO y la navegación se va
   a un carril a la derecha. El gráfico es lo que se mira; la lista es con lo
   que se salta de un valor a otro sin volver atrás.
   Por debajo de 1080px no caben tres columnas y se conserva el modal de antes.
   ========================================================================= */
.chart-rail { display: none; }

@media (min-width: 1080px) {
  :root { --rail-w: 300px; }

  body.chart-mode .chart-rail {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0; width: var(--rail-w);
    background: var(--s-1); border-left: 1px solid var(--line);
    z-index: 101; padding: 14px 12px;
  }
  .rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
  .rail-src { flex: 1; min-width: 0; padding: 6px 9px; font-size: 12px; cursor: pointer; }
  .rail-close { padding: 4px 9px; }
  .rail-filter { width: 100%; padding: 7px 10px; font-size: 12.5px; margin-bottom: 8px; }
  .rail-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }

  .rail-row {
    display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px;
    width: 100%; padding: 8px 9px; border: none; border-radius: var(--r-sm);
    background: none; cursor: pointer; font-family: inherit; text-align: left;
    transition: background-color var(--t-1) var(--e-out);
  }
  .rail-row:hover { background: var(--s-3); }
  .rail-row.on { background: var(--ac-soft); box-shadow: inset 2px 0 0 var(--ac); }
  .rail-ico { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: #fff; padding: 1px; }
  .rail-ico.emoji { background: var(--s-3); display: grid; place-items: center; font-size: 12px; letter-spacing: -2px; }
  .rail-nm { min-width: 0; }
  .rail-nm b { display: block; font-size: 12px; font-weight: 600; color: var(--tx-1);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-nm small { font-size: 10.5px; color: var(--tx-3); }
  .rail-fig { text-align: right; }
  .rail-fig b { display: block; font-size: 11.5px; font-variant-numeric: tabular-nums; }
  .rail-fig small { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }

  /* El gráfico ocupa el CENTRO REAL: empieza donde acaba el menú lateral y
     acaba donde empieza el carril. Antes arrancaba en 0 y tapaba el menú,
     dejando la app sin navegación mientras había un gráfico abierto. */
  body.chart-mode #chart-modal {
    background: none; backdrop-filter: none;
    inset: 0 var(--rail-w) 0 var(--nav-w); display: block; pointer-events: none;
  }
  body.chart-mode #chart-modal .modal {
    pointer-events: auto; margin: 0 auto;
    width: 100%; max-width: none; height: 100%; max-height: none;
    border-radius: 0; border: none; box-shadow: none;
    display: flex; flex-direction: column; background: var(--s-0);
    overflow: hidden;
  }
  /* ALTURA EXPLÍCITA, no flexible. ECharts y klinecharts miden su contenedor
     para dibujar: en una columna flexible con min-height:0 el div se colapsa a
     cero altura y el gráfico queda invisible aunque el elemento exista. Es
     exactamente lo que pasaba. Con calc() siempre hay una altura que medir. */
  body.chart-mode #chart-modal .modal-chart {
    height: calc(100vh - 210px); min-height: 300px; margin: 0 18px 16px; flex: none;
  }
  body.chart-mode #chart-modal .modal-head { padding: 18px 22px 12px; }
  .main { transition: padding-right var(--t-3) var(--e-out); }
  body.chart-mode .main { padding-right: var(--rail-w); }
}

/* La fila que se está mirando, marcada: con el gráfico abierto, sin esto no se
   sabe a qué valor corresponde lo que se ve. */
@media (min-width: 1080px) {
  .dtable tbody tr.is-open td { background: var(--ac-soft); }
  .dtable tbody tr.is-open td.cell-name {
    background: var(--ac-soft); box-shadow: inset 3px 0 0 var(--ac);
  }
}

.modal {
  width: min(920px, 92vw); background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden; position: relative;
  max-height: 94vh; overflow-y: auto;
}
.modal-head { display: flex; align-items: center; gap: 20px; padding: 20px 24px 14px; }
.modal-name { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; }
.modal-sub { font-size: 12.5px; color: var(--text-mute); margin-top: 2px; }
.modal-price { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.modal-last { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.modal-close {
  background: var(--surface-2); border: none; color: var(--text-dim);
  width: 32px; height: 32px; border-radius: 8px; font-size: 20px; cursor: pointer; line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal-controls { display: flex; justify-content: space-between; padding: 6px 24px 12px; gap: 12px; flex-wrap: wrap; }
.cm-controls-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cm-expand { white-space: nowrap; }

/* ---- barra de análisis técnico (solo en pantalla completa) ---- */
.ta-bar { display: none; flex-wrap: wrap; gap: 16px; padding: 0 24px 12px; align-items: center; }

/* ---- modo pantalla completa: gráfico grande + todas las herramientas ---- */
.modal.fullscreen {
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  border-radius: 0; display: flex; flex-direction: column; overflow: hidden;
}
.modal.fullscreen .ta-bar { display: flex; }
/* En el espacio de trabajo el gráfico ya ocupa el centro: las herramientas de
   análisis se muestran desde el principio y "ampliar" pierde el sentido. */
@media (min-width: 1080px) {
  body.chart-mode .ta-bar { display: flex; }
  body.chart-mode .cm-expand { display: none; }
}
.modal.fullscreen #cm-tab-grafico.active { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.modal.fullscreen .modal-chart { flex: 1 1 auto; height: auto; min-height: 0; }
.modal.fullscreen #cm-tab-resumen.active, .modal.fullscreen #cm-tab-noticias.active { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ---- pestañas de la ficha (Gráfico / Resumen / Noticias) ---- */
.cm-tabs { margin: 4px 20px 8px; display: inline-flex; }
.cm-tab { display: none; }
.cm-tab.active { display: block; }
#cm-tab-grafico { position: relative; }
.cm-loading-box { padding: 40px 24px; text-align: center; color: var(--text-mute); font-size: 13px; }
.modal-extra { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.prepost-lbl { color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; margin-right: 2px; }

/* frescura del dato */
.fresh-chip { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 20px; white-space: nowrap; }
.fresh-chip:empty { display: none; }
.fresh-live { background: rgba(22,199,132,0.14); color: #16c784; }
.fresh-delay { background: rgba(245,166,35,0.14); color: #f5a623; }
.fresh-closed, .fresh-post { background: var(--surface-2); color: var(--text-mute); }
.fresh-pre { background: rgba(61,139,255,0.14); color: #3d8bff; }

/* ficha: bloques y estadísticas */
.cm-block { margin: 0 20px 14px; padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; }
.cm-block:first-child { margin-top: 6px; }
.cm-block-t { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 12px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 18px; }
.stat-cell { display: flex; flex-direction: column; gap: 2px; }
.s-lbl { font-size: 11px; color: var(--text-mute); }
.s-val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* rango 52 semanas */
.rng52-h { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 10px; }
.rng52-bar { position: relative; height: 8px; border-radius: 6px; background: linear-gradient(90deg, #f0616d, #f5a623, #16c784); }
.rng52-mark { position: absolute; top: -4px; width: 4px; height: 16px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px #0a0d12; transform: translateX(-50%); }
.rng52-lbls { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.rng52-now { color: var(--text); font-weight: 600; }

/* analistas */
.an-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; margin-bottom: 10px; }
.an-seg { min-width: 3px; }
.an-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--text-mute); margin-bottom: 10px; }
.an-legend span { display: inline-flex; align-items: center; gap: 5px; }
.an-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.an-target { font-size: 13px; color: var(--text-dim); }
.an-reco { color: var(--accent); font-weight: 600; }

.cm-meta { font-size: 12.5px; color: var(--text-dim); margin-bottom: 8px; }
.cm-summary { font-size: 12.5px; line-height: 1.55; color: var(--text-mute); max-height: 160px; overflow-y: auto; }
.cm-link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--accent); text-decoration: none; }
.cm-link:hover { text-decoration: underline; }

/* noticias */
.news-item { display: flex; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.news-item:hover { background: var(--bg-elev); }
.news-thumb { width: 84px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
.news-noimg { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.news-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.news-title { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.news-meta { font-size: 11.5px; color: var(--text-mute); }

/* topbar: índice clicable + tabs con botón */
.idx-block { cursor: pointer; border-radius: 10px; padding: 4px 8px; margin: -4px -8px; transition: background 0.12s ease; }
.idx-block:hover { background: var(--bg-elev); }
.idx-change { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.idx-extra { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.idx-tabs-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* análisis de la cartera (atribución + concentración) */
.attr-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.attr-lbl { font-size: 12px; color: var(--text-dim); min-width: 140px; }
.attr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.attr-chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 8px; background: var(--bg-elev); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.risk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.risk-chip { font-size: 12px; padding: 5px 10px; border-radius: 8px; background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.3); color: #f5a623; }
.ta-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ta-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-mute); margin-right: 3px; }
.ta-btn {
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 7px; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-dim);
  font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease; line-height: 1;
}
.ta-btn:hover { color: var(--text); border-color: #33404f; }
.ta-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ta-btn.ta-fib.active, .ta-btn.ta-fib:hover { color: #f5b301; border-color: #f5b301; }
.ta-btn.ta-clear:hover { color: var(--down); border-color: var(--down); }

.modal-chart { height: 440px; margin: 0 16px 18px; }
.modal-loading {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center; color: var(--text-mute); font-size: 13px;
  pointer-events: none;
}
.modal-loading.show { display: flex; }

/* ============================ COMUNIDAD ============================ */
.full-w { width: 100%; }
.btn-ghost-sm {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
  padding: 6px 12px; border-radius: 8px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.btn-ghost-sm:hover { color: var(--text); border-color: #33404f; }

.hub-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; }
.hub-info { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-dim); }
.hub-info b { color: var(--text); font-weight: 600; }
.hub-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); }
.hub-dot.ok { background: var(--up); box-shadow: 0 0 0 3px var(--up-soft); }
.hub-dot.off { background: var(--down); box-shadow: 0 0 0 3px var(--down-soft); }

.auth-card { max-width: 440px; margin: 24px auto; }
.auth-tabs { width: 100%; margin-bottom: 16px; }
.auth-tabs .seg-btn { flex: 1; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }

.community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }

.me-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.me-id { min-width: 0; }
.avatar {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), #7b5cff);
  display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; text-transform: uppercase;
}
.avatar.big { width: 52px; height: 52px; font-size: 22px; border-radius: 14px; }
/* con foto: la imagen llena el hueco, así el tamaño lo siguen mandando las
   reglas por contexto (.user-row .avatar, .rank-card .avatar, .feed-head .avatar) */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* selector de foto dentro del formulario de perfil */
.prof-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.prof-photo-side { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.prof-photo-note { font-size: 11px; color: var(--text-mute); }
.me-name { font-size: 16px; font-weight: 600; }
.me-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.me-head .btn-ghost-sm { margin-left: auto; }

.publish-box { border-top: 1px solid var(--border-soft); padding-top: 16px; }
.publish-lbl { font-size: 13px; color: var(--text); font-weight: 600; margin-bottom: 10px; }
.publish-state {
  font-size: 12px; color: var(--text-mute); background: var(--bg-elev);
  border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 11px; margin-bottom: 12px;
}
.publish-state.on { color: var(--up); border-color: rgba(22,199,132,0.3); background: var(--up-soft); }
.publish-state b { color: var(--text); }
.publish-field { display: block; margin-bottom: 12px; }
.publish-field > span { display: block; font-size: 11.5px; color: var(--text-dim); font-weight: 600; margin-bottom: 6px; }
.vis-seg .seg-btn { flex: 1; }
.vis-seg { margin-bottom: 0; }
.publish-desc { font-size: 12px; color: var(--text-mute); line-height: 1.5; margin-bottom: 14px; min-height: 34px; }
.publish-desc b { color: var(--up); }
.publish-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.publish-actions .btn-primary { flex: 1; }
.pm-pfname { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; }

/* ---- comparar carteras ---- */
.compare-modal { width: min(1000px, 94vw); }
.cmp-picker { padding: 4px 24px 12px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cmp-mine { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.cmp-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--text-dim); font-size: 12.5px; font-weight: 600;
}
.cmp-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.cmp-chip input { accent-color: var(--accent); }
.cmp-userchip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; background: var(--surface-2); font-size: 12px; color: var(--text-dim); }
.cmp-userchip button { background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.cmp-userchip button:hover { color: var(--down); }
.cmp-adduser { display: flex; gap: 6px; }
.cmp-adduser .inp { width: 220px; }
.cmp-sug { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-basis: 100%; margin-top: 4px; }
.cmp-sug-lbl { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.3px; }
.cmp-sug-chip {
  padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600;
  background: var(--surface-2); border: 1px dashed var(--border); color: var(--text-dim);
}
.cmp-sug-chip:hover { color: var(--accent); border-color: var(--accent); }
.cmp-body { padding: 4px 24px 22px; }
.cmp-section-t { font-size: 12.5px; font-weight: 600; color: var(--text-dim); margin: 18px 0 10px; }
.cmp-note { font-weight: 400; color: var(--text-mute); font-size: 11px; }
.cmp-table-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp-table th, .cmp-table td { padding: 9px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
.cmp-table thead th { color: var(--text); font-weight: 600; text-align: right; }
.cmp-table tbody th { text-align: left; color: var(--text-dim); font-weight: 600; }
.cmp-table thead th:first-child, .cmp-table tbody th:first-child { text-align: left; }
.cmp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.cmp-chart { height: 300px; }
.cmp-common { font-size: 12.5px; color: var(--text-mute); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cmp-comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cmp-comp-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 13px; }
.cmp-comp-h { display: flex; align-items: center; font-size: 13.5px; margin-bottom: 10px; }
.cmp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cmp-excl { font-size: 11.5px; color: var(--text-mute); line-height: 1.5; }

/* ---- diversificación país/sector ---- */
.pf-divx-card { margin-top: 18px; }
.divx { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.divx-loading { color: var(--text-mute); font-size: 12.5px; padding: 8px 0; }
.divx-t { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 12px; }
.divx-row { display: grid; grid-template-columns: 96px 1fr 38px; align-items: center; gap: 10px; margin-bottom: 9px; }
.divx-lbl { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divx-bar { height: 9px; background: var(--bg-elev); border-radius: 6px; overflow: hidden; }
.divx-fill { height: 100%; border-radius: 6px; transition: width 0.3s ease; min-width: 2px; }
.divx-pct { font-size: 11.5px; color: var(--text-mute); text-align: right; font-variant-numeric: tabular-nums; }
.pm-diversif .divx { margin: 4px 0 14px; }
@media (max-width: 680px) { .divx { grid-template-columns: 1fr; gap: 16px; } }

/* Ajustes de la cuenta: una fila por acción, con línea entre ellas. Antes eran
   tres enlaces sueltos seguidos y no se distinguía dónde acababa cada uno. */
.acct-box { border-top: 1px solid var(--border-soft); margin-top: 16px; }
.acct-row + .acct-row { border-top: 1px solid var(--border-soft); }
.acct-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 13px 2px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text);
  text-align: left; transition: color 0.12s ease;
}
.acct-toggle:hover { color: var(--accent); }
.acct-caret { color: var(--text-mute); font-size: 17px; line-height: 1; transition: transform 0.15s ease; }
.acct-row.open > .acct-toggle { color: var(--accent); }
.acct-row.open .acct-caret { transform: rotate(90deg); color: var(--accent); }
.acct-toggle.danger { color: var(--text-dim); font-weight: 500; }
.acct-toggle.danger:hover { color: var(--down); }
.acct-row .prof-form, .acct-row .pwd-form { padding-bottom: 14px; }

.link-btn {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 0;
}
.link-btn:hover { text-decoration: underline; }
.pwd-form { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.pwd-form .btn-ghost-sm { align-self: flex-start; }

.disc-results { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.empty-sm { color: var(--text-mute); font-size: 12.5px; padding: 8px 2px; }
.user-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; cursor: pointer;
  transition: border 0.12s ease;
}
.user-row:hover { border-color: #33404f; }
.user-row .avatar { width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }
.user-row .u-main { flex: 1; min-width: 0; }
.user-row .u-name { font-weight: 600; font-size: 13.5px; }
.user-row .u-sub { font-size: 11.5px; color: var(--text-mute); }
.user-row .u-stat { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.u-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-mute);
  background: var(--bg-elev); padding: 2px 6px; border-radius: 5px; }

/* ---- comunidad destacada (rankings) ---- */
.board-tabs { margin: 4px 0 14px; }
.rank-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; margin-bottom: 8px; }
.rank-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
  cursor: pointer; transition: border 0.12s ease, transform 0.12s ease;
}
.rank-card:hover { border-color: #33404f; transform: translateY(-1px); }
.rank-card.podium { border-color: var(--border); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.rank-pos { width: 26px; text-align: center; font-size: 17px; font-weight: 700; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.rank-card .avatar { width: 38px; height: 38px; font-size: 15px; }
.rank-main { flex: 1; min-width: 0; }
.rank-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-sub { font-size: 11.5px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-you { font-size: 10px; color: var(--accent); background: var(--accent-soft); padding: 1px 6px; border-radius: 5px; margin-left: 4px; }
.rank-metric { text-align: right; min-width: 66px; }
.rank-metric .m-big { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-metric .m-lbl { font-size: 10.5px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.3px; }

.following-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 4px; }
.feed-card {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 16px; cursor: pointer; transition: border 0.12s ease;
}
.feed-card:hover { border-color: #33404f; }
.feed-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.feed-head .avatar { width: 38px; height: 38px; font-size: 15px; }
.feed-name { font-weight: 600; font-size: 14px; }
.feed-user { font-size: 11.5px; color: var(--text-mute); }
.feed-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.feed-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px;
  background: var(--surface-2); color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.feed-foot { font-size: 11px; color: var(--text-mute); margin-top: 10px; }

/* Modal de perfil */
.profile-modal { width: min(680px, 92vw); }
.pm-id { min-width: 0; }
.modal-head #pm-follow { margin-left: auto; }
.modal-head #pm-admin-del { margin-left: auto; color: var(--down); border-color: var(--down); }
.modal-head #pm-admin-del + #pm-follow { margin-left: 8px; }
.pm-admin:hover { background: var(--down-soft); }
.pm-body { padding: 8px 24px 24px; max-height: 62vh; overflow-y: auto; }
.pm-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.pm-kpi { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; flex: 1; min-width: 120px; }
.pm-kpi .k-lbl { font-size: 11px; color: var(--text-dim); }
.pm-kpi .k-val { font-size: 17px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.pm-note { font-size: 12px; color: var(--text-mute); background: var(--surface-2);
  border-radius: 8px; padding: 9px 12px; margin-bottom: 14px; }
.pm-private { text-align: center; color: var(--text-mute); padding: 30px; }

/* ============================ LOGIN (WEB) ============================ */
.login-gate {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 50% -10%, #171d27, #0a0d12 60%);
}
.login-gate.open { display: flex; }
.gate-card {
  width: min(400px, 92vw); background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 30px 28px;
  box-shadow: var(--shadow);
}
.gate-brand { display: flex; align-items: center; gap: 11px; justify-content: center; margin-bottom: 6px; }
.gate-title { text-align: center; font-size: 13.5px; color: var(--text-dim); margin-bottom: 22px; }
.gate-tabs { width: 100%; margin-bottom: 16px; }
.gate-tabs .seg-btn { flex: 1; }
.gate-form { display: flex; flex-direction: column; gap: 11px; }
/* Aviso del cambio de dirección: la sesión vive en localStorage, que es por
   dominio, así que quien venía del enlace antiguo aterriza aquí desconectado.
   Sin explicación eso se lee como "he perdido la cuenta". */
.gate-moved {
  margin-top: 16px; padding: 11px 13px; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid rgba(61, 139, 255, 0.28);
  font-size: 12px; line-height: 1.55; color: var(--text-dim);
}
.gate-moved b { color: var(--text); font-weight: 600; }
.gate-moved code {
  background: var(--bg-elev); color: var(--text-dim); border-radius: 5px;
  padding: 1px 5px; font-size: 11px;
}
/* ============================== PORTADA ===================================
   El fondo es GENERADO, no una fotografía: degradados + una rejilla de datos en
   SVG embebido. Pesa cero, carga instantáneo y no depende de bancos de imágenes
   ajenos. Y encaja mejor con el producto que una foto de archivo de un skyline,
   que es lo que se ve en cualquier página financiera y no dice nada.

   El velo va en DEGRADADO DIRECCIONAL, no en velo plano: un negro uniforme
   sobre el fondo garantiza contraste pero lo aplana y delata el truco.
   ========================================================================= */
.login-gate {
  /* OJO: no tocar aquí position. La regla original la fija en `fixed` para que
     cubra la pantalla, y `fixed` ya crea el bloque contenedor que necesitan
     ::before y ::after. Poner `relative` aquí la pisaría y rompería la portada. */
  background:
    /* halo del acento, arriba a la izquierda */
    radial-gradient(1100px 620px at 12% -8%, rgba(61, 139, 255, 0.20), transparent 62%),
    /* contrapunto frío, abajo a la derecha */
    radial-gradient(900px 560px at 92% 108%, rgba(38, 162, 148, 0.14), transparent 60%),
    /* velo direccional para que el texto se lea sin aplanar el fondo */
    linear-gradient(160deg, rgba(8, 11, 16, 0.72) 0%, rgba(8, 11, 16, 0.94) 58%, var(--s-0) 100%),
    var(--s-0);
}
/* rejilla de mercado: líneas finas que sugieren un gráfico sin serlo */
.login-gate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(147, 161, 180, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(147, 161, 180, 0.045) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  mask-image: radial-gradient(circle at 30% 25%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 30% 25%, #000 0%, transparent 72%);
}
/* trazo ascendente, el gesto de la marca */
.login-gate::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  pointer-events: none; opacity: 0.5;
  background: no-repeat bottom / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233d8bff' stop-opacity='.26'/%3E%3Cstop offset='1' stop-color='%233d8bff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 250 L90 232 L180 244 L270 196 L360 214 L450 160 L540 178 L630 128 L720 146 L810 96 L900 112 L990 62 L1080 78 L1200 28 L1200 300 L0 300 Z' fill='url(%23f)'/%3E%3Cpath d='M0 250 L90 232 L180 244 L270 196 L360 214 L450 160 L540 178 L630 128 L720 146 L810 96 L900 112 L990 62 L1080 78 L1200 28' fill='none' stroke='%233d8bff' stroke-opacity='.55' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gate-card { position: relative; z-index: 1; }

/* ---- recuperar el acceso ---- */
.gate-forgot { text-align: center; margin-top: 4px; }
.gate-forgot#gate-forgot-wrap { opacity: 0.65; }
.gate-forgot#gate-forgot-wrap.show { opacity: 1; }   /* se realza tras fallar el login */
.rec-lead { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 2px; }
.rec-lead b { color: var(--text); }
.rec-note {
  font-size: 11.5px; color: var(--text-mute); line-height: 1.55;
  border-left: 2px solid var(--border); padding-left: 10px; margin-top: 2px;
}
#rec-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 1px; }

/* ---- código de rescate en ajustes ---- */
.rescue-state { font-size: 11.5px; line-height: 1.5; border-radius: 8px; padding: 8px 11px; }
.rescue-state.ok { background: var(--up-soft); color: var(--up); }
.rescue-state.warn { background: rgba(245, 166, 35, 0.13); color: #f5a623; }
.rescue-out {
  background: var(--bg-elev); border: 1px solid var(--accent);
  border-radius: 10px; padding: 13px; text-align: center;
}
.rescue-code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 18px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent);
  user-select: all; word-break: break-all;
}
.rescue-warn { font-size: 11.5px; color: var(--text-dim); margin-top: 9px; line-height: 1.5; }
.rescue-warn b { color: var(--text); }

.gate-foot { text-align: center; font-size: 11.5px; color: var(--text-mute); margin-top: 18px; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1080px) {
  .pf-grid { grid-template-columns: 1fr; }
  .community-grid { grid-template-columns: 1fr; }
  .pf-summary { grid-template-columns: repeat(2, 1fr); }
  .idx-spark { display: none; }
}

/* ------------------------------ MÓVIL ------------------------------ */
@media (max-width: 720px) {
  /* En móvil dejamos que la página entera haga scroll nativo. El patrón de
     "app shell" (altura fija 100dvh + scroll interno en .view) es frágil en
     Safari/Chrome móvil y bloqueaba el scroll salvo haciendo zoom. */
  html, body { height: auto; overflow: visible; }
  /* Y por lo mismo se retira el aislamiento: aquí .view ya NO es el contenedor de
     scroll, crece con su contenido, y `contain: paint` recortaría lo que sobresale
     de su caja — por ejemplo el desplegable del buscador cuando el formulario de
     añadir posición queda al final de la vista. */
  .view { contain: none; overscroll-behavior: auto; }

  /* Navegación inferior tipo app */
  .app { flex-direction: column; height: auto; min-height: 100dvh; }
  .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: 58px; z-index: 60;
    flex-direction: row; padding: 0;
    border-right: none; border-top: 1px solid var(--border);
    background: var(--bg-elev);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .brand, .sidebar-foot { display: none; }
  .nav { flex-direction: row; width: 100%; gap: 0; }
  .nav-item {
    flex: 1; flex-direction: column; gap: 3px;
    justify-content: center; padding: 7px 0; border-radius: 0;
    font-size: 10.5px; font-weight: 600;
  }
  .nav-item span { display: inline; }
  .nav-item .ico { width: 21px; height: 21px; }
  .nav-item:hover { background: transparent; color: var(--text-dim); }
  .nav-item.active { background: transparent; color: var(--accent); }

  .main { min-width: 0; }
  /* La vista fluye con su contenido; el scroll lo hace el documento. */
  .view { overflow: visible; padding: 14px 12px 82px; }

  /* La fila de acciones de la barra superior no envolvía, y con el buscador de
     260 px más cinco controles necesita unos 400 px. En un móvil de 390 px no
     caben, y como nada envuelve, empujaba el ANCHO DEL DOCUMENTO ENTERO a unos
     500 px: el navegador entonces no puede hacer otra cosa que encoger la página
     para que quepa, así que todo salía diminuto y cortado por la derecha —la
     pantalla de entrada incluida—. Envolviendo, la barra crece hacia abajo, que
     es donde sobra sitio. */
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .topbar-search { flex: 1 1 100%; width: auto; max-width: none; }
  /* El selector de densidad de filas es de escritorio: en móvil solo hay una
     densidad razonable y son tres botones que quitan sitio a lo que importa. */
  .dens-seg { display: none; }

  /* Cabecera del índice, compacta */
  .topbar { padding: 12px 14px; gap: 14px; }
  .idx-value { font-size: 21px; }
  .idx-title { font-size: 11px; }
  .idx-ex { display: none; }
  #idx-change-abs { font-size: 13px; }
  .btn-ghost { width: 34px; height: 34px; }

  /* Cabeceras de sección */
  .section-head { flex-wrap: wrap; gap: 8px; margin: 20px 2px 12px; }
  .section-head h2 { font-size: 14px; }
  .filter-input { width: 100%; }
  .legend { display: none; }

  /* Resumen de cartera */
  .pf-summary { gap: 10px; }
  .stat { padding: 13px 14px; }
  .stat-val { font-size: 20px; }

  /* Formulario de añadir posición a ancho completo */
  .add-form { flex-direction: column; }
  .search-wrap, .inp-sm { width: 100%; }
  .add-form .btn-primary { width: 100%; padding: 12px; }

  /* Gráficos más bajos */
  .heatmap-card { padding: 8px; }
  .heatmap { height: 320px; }
  .heatmap-sm { height: 260px; }
  .donut { height: 260px; }

  /* Tablas: menos columnas + scroll horizontal de reserva */
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dtable th, .dtable td { padding: 11px 10px; font-size: 13px; }
  .sector-tag { display: none; }
  /* Mercado: dejar Valor, Precio y Var.% (ocultar Var. abs, Volumen y Capitalización) */
  #market-table th:nth-child(4), #market-table td:nth-child(4),
  #market-table th:nth-child(5), #market-table td:nth-child(5),
  #market-table th:nth-child(6), #market-table td:nth-child(6) { display: none; }
  /* Cartera: ocultar Acciones, P. compra, P/L(€) y Hoy% */
  #pf-table th:nth-child(2), #pf-table td:nth-child(2),
  #pf-table th:nth-child(3), #pf-table td:nth-child(3),
  #pf-table th:nth-child(6), #pf-table td:nth-child(6),
  #pf-table th:nth-child(8), #pf-table td:nth-child(8) { display: none; }

  /* Comunidad */
  .community-grid { gap: 12px; }
  .following-feed { grid-template-columns: 1fr; }
  .disc-results { max-height: none; }

  /* Modales casi a pantalla completa */
  .modal { width: 94vw; }
  .modal-head { padding: 16px 16px 10px; gap: 12px; }
  .modal-name { font-size: 16px; }
  .modal-last { font-size: 18px; }
  .modal-controls { padding: 4px 14px 10px; gap: 8px; }
  .ta-bar { padding: 0 14px 10px; gap: 10px; }
  .modal-chart { height: 340px; margin: 0 8px 12px; }
  .seg-btn { padding: 6px 9px; }
  .profile-modal { width: 94vw; }
  .pm-body { padding: 6px 16px 20px; max-height: 68vh; }
  .pm-summary { gap: 8px; }
  .pm-kpi { min-width: 92px; padding: 9px 11px; }

  /* Login */
  .gate-card { padding: 26px 20px; }
}

@media (max-width: 380px) {
  .idx-value { font-size: 19px; }
  .nav-item span { font-size: 10px; }
  .stat-val { font-size: 18px; }
}

/* ============================ EXTRAS (v3) ============================ */
/* toasts */
.toast-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.toast { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px 14px; font-size: 13px; box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease, opacity 0.28s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-ok { border-left-color: var(--up); }
.toast-err { border-left-color: var(--down); }
.toast-info { border-left-color: var(--accent); }

/* campana de alertas */
.bell-btn { position: relative; }
.bell-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 10px; background: var(--down); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* estrella de seguimiento */
.star-btn { background: none; border: none; color: var(--text-mute); font-size: 16px; cursor: pointer; padding: 0 6px 0 0; line-height: 1; float: left; margin-top: 1px; }
.star-btn:hover { color: #f5b301; }
.star-btn.on { color: #f5b301; }
.icon-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); width: 32px; height: 32px; border-radius: 8px; font-size: 15px; cursor: pointer; line-height: 1; }
.icon-btn:hover { color: var(--text); border-color: #33404f; }
.icon-btn.on { color: #f5b301; border-color: #f5b301; }

/* watchlist */
.watchlist-card { padding: 14px 16px; }
.wl-hint { font-weight: 400; color: var(--text-mute); font-size: 11px; }
.wl-table td { padding: 8px 10px; }
.wl-table .cell-name .nm { font-size: 13px; }

/* movers */
.movers-card { padding: 14px 16px; }
.movers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.movers-h { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.mover { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.mover:hover { background: var(--bg-elev); }
.mover-nm { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mover-val { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mover-vol { color: var(--text-dim); }

/* alertas modal */
.alerts-modal { width: min(620px, 94vw); }
.al-create { display: flex; gap: 8px; padding: 0 24px 6px; flex-wrap: wrap; align-items: center; }
.al-create .inp { flex: 1; min-width: 110px; }
.al-create .inp-sm { flex: 0 0 auto; width: auto; min-width: 90px; }
.al-list { padding: 8px 24px 20px; display: flex; flex-direction: column; gap: 8px; }
.al-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.al-main { font-size: 13px; }
.al-note { font-size: 11.5px; color: var(--text-mute); margin-top: 3px; }
.al-trig { color: var(--up); font-size: 11.5px; margin-left: 6px; }
.al-active { color: var(--text-mute); font-size: 11.5px; margin-left: 6px; }

/* benchmark */
.pf-bench-card { padding: 14px 16px; }
.bench-note { font-size: 11px; color: var(--text-mute); margin-top: 8px; }
#pf-bench-chart { height: 300px; }

/* editar perfil */
.prof-form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.prof-form textarea { resize: vertical; font-family: inherit; }

/* modo invitado: CTA de crear cuenta */
.view { position: relative; }
.guest-cta { position: absolute; inset: 0; z-index: 6; display: none; align-items: flex-start; justify-content: center; background: var(--bg); padding-top: 60px; }
.guest-cta-box { max-width: 460px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 40px 32px; box-shadow: var(--shadow); }
.guest-cta-emoji { font-size: 46px; margin-bottom: 14px; }
.guest-cta-title { font-size: 19px; font-weight: 600; letter-spacing: -0.3px; margin-bottom: 10px; }
.guest-cta-sub { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; margin-bottom: 22px; }
.guest-cta-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.guest-cta-actions .btn-primary { padding: 11px 26px; font-size: 14px; }

/* botón invitado en el login gate */
.gate-guest { margin-top: 12px; text-align: center; }

/* ============================ LOGOS (v4) ============================ */
.logo { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
.logo-sm { width: 18px; height: 18px; border-radius: 5px; }
.logo-lg { width: 40px; height: 40px; border-radius: 10px; }
.logo-none { display: none; }
.cell-name-inner { display: flex; align-items: center; gap: 9px; }
.nm-txt { min-width: 0; }
.star-btn { float: none; margin: 0; }
.mover-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sr-left { display: flex; align-items: center; gap: 9px; min-width: 0; }

/* ==================== COMPARADOR DE VALORES (v4) ==================== */
.scmp-modal { width: min(1000px, 96vw); }
.scmp-add { padding: 4px 24px 8px; }
.scmp-add .search-wrap { position: relative; }
.scmp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 10px; }
.scmp-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-elev); border: 1px solid var(--border); border-left-width: 3px; border-radius: 9px; padding: 5px 8px 5px 10px; font-size: 12.5px; }
.scmp-chip button { background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.scmp-chip button:hover { color: var(--down); }
.scmp-axes { font-weight: 400; font-size: 12px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.scmp-axes select { padding: 4px 8px; }
.scmp-note { font-size: 11px; color: var(--text-mute); margin: 8px 24px 18px; }
#scmp-chart, #scmp-map { height: 320px; margin: 0 12px; }
#scmp-table { margin: 0 24px; }

/* ==================== BUSCADOR GLOBAL (topbar, v5) ==================== */
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-search { flex: 0 0 auto; width: 260px; max-width: 40vw; }
.topbar-search .inp { padding: 8px 12px; font-size: 13px; }
.topbar-search .search-results { z-index: 60; }

/* ============================== COMUNIDAD ================================
   Las tarjetas estaban vacías de contenido y por eso la sección se veía pobre.
   La jerarquía ahora: la cifra que ordena manda, la barra sitúa a cada uno
   FRENTE AL PRIMERO (una lista de números sueltos no es una clasificación), y
   los datos de la cartera quedan como metadatos discretos.
   ======================================================================== */
.rank-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rank-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--tx-3); flex: none; }
.rank-bar {
  height: 4px; border-radius: 3px; background: var(--s-3);
  margin-top: 9px; overflow: hidden; max-width: 320px;
}
.rank-bar i { display: block; height: 100%; border-radius: 3px; transition: width var(--t-3) var(--e-out); }
.rank-bar i.up-text { background: var(--up); }
.rank-bar i.down-text { background: var(--down); }
.rank-bar i.flat { background: var(--ac); }
.rank-card .rank-pos {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--s-3); color: var(--tx-3); font-size: 12px; font-weight: 700; flex: none;
}
.rank-card.podium .rank-pos { background: var(--ac-soft); color: var(--ac); }
.rank-card {
  transition: background-color var(--t-1) var(--e-out), border-color var(--t-1) var(--e-out);
}
.rank-card:hover { border-color: var(--line-strong); background: var(--s-3); }
.rank-metric .m-big { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.rank-metric .m-lbl { font-size: 10.5px; color: var(--tx-3); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

/* Aviso de dónde están las herramientas cuando se está en modo línea. */
.ta-hint { font-size: 11.5px; color: var(--tx-3); align-self: center; }
.ta-hint b { color: var(--tx-2); font-weight: 600; }

/* La barra superior muestra el índice: eso solo aplica a Mercado. En Mi Cartera,
   en Comunidad y en Mundo se retira, y el buscador ocupa el ancho que deja
   libre. En Mundo sobra especialmente: hablar del IBEX encima de un mapa de
   veinticuatro mercados confunde sobre qué se está mirando. */
body[data-view="portfolio"] .idx-block,
body[data-view="portfolio"] .idx-change,
body[data-view="portfolio"] .idx-spark,
body[data-view="community"] .idx-block,
body[data-view="community"] .idx-change,
body[data-view="community"] .idx-spark,
body[data-view="world"] .idx-block,
body[data-view="world"] .idx-change,
body[data-view="world"] .idx-spark { display: none; }

body[data-view="portfolio"] .topbar-actions,
body[data-view="community"] .topbar-actions,
body[data-view="world"] .topbar-actions { margin-left: auto; flex: 1; justify-content: flex-end; }
body[data-view="portfolio"] .topbar-search,
body[data-view="community"] .topbar-search,
body[data-view="world"] .topbar-search { flex: 1; max-width: 520px; }

/* ------------------------------- dividendos ------------------------------ */
.div-card { margin-bottom: 14px; }
.div-head { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.div-head .card-title { margin: 0; flex: 1; min-width: 130px; }
.div-tot { text-align: right; }
.div-big { font-size: 23px; font-weight: 600; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.div-lbl { font-size: 10.5px; color: var(--tx-3); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.div-list { margin-top: 16px; display: flex; flex-direction: column; gap: 1px; }
.div-row {
  display: grid; grid-template-columns: minmax(140px, 1.4fr) 2fr repeat(3, 96px);
  align-items: center; gap: 14px; padding: 8px 8px; border-radius: var(--r-sm);
  cursor: pointer; transition: background-color var(--t-1) var(--e-out);
}
.div-row:hover { background: var(--s-3); }
.div-nm { display: flex; align-items: center; gap: 9px; font-size: 12.5px; min-width: 0; }
.div-nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.div-bar { height: 6px; border-radius: 3px; background: var(--s-3); overflow: hidden; }
.div-bar i { display: block; height: 100%; border-radius: 3px; background: var(--up); }
.div-num {
  text-align: right; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.div-num small { display: block; font-size: 9.5px; font-weight: 400; color: var(--tx-3);
                 text-transform: uppercase; letter-spacing: 0.4px; margin-top: 1px; }
.div-num.soft { color: var(--tx-2); font-weight: 500; }
.div-foot { font-size: 11px; color: var(--tx-3); line-height: 1.55; margin-top: 14px; }
@media (max-width: 900px) {
  .div-row { grid-template-columns: 1fr 84px 84px; gap: 10px; }
  .div-bar, .div-num.soft { display: none; }
}

/* sin fechas de pago (cartera solo europea): una columna menos */
.div-list.sin-fecha .div-row { grid-template-columns: minmax(140px, 1.4fr) 2fr repeat(2, 96px); }

/* ============ Añadir rápido dentro del comparador (cartera / índice) ============ */
.scmp-quickadd { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.qa-tabs { align-self: flex-start; }
.qa-chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 104px; overflow-y: auto; padding: 2px 4px 4px 0; }
.qa-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 4px 11px 4px 6px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .12s ease; }
.qa-chip:hover { border-color: var(--accent); }
.qa-empty { color: var(--text-mute); font-size: 12.5px; padding: 4px 2px; }

/* Casilla "＋ Añadir gráfica" del mosaico */
.mos-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 210px; background: transparent; border: 1.5px dashed var(--border); border-radius: 12px; color: var(--text-dim); cursor: pointer; font-size: 30px; line-height: 1; transition: border-color .12s ease, color .12s ease; }
.mos-add span { font-size: 13px; font-weight: 600; }
.mos-add:hover { border-color: var(--accent); color: var(--text); }

/* La ficha (detalle) debe quedar por encima del comparador al pulsar "⤢ Ampliar":
   ambos son .modal-overlay (z-index 100) y, por orden en el DOM, el comparador
   ganaría el apilamiento. */
#chart-modal { z-index: 110; }

/* ===================== Mosaico de gráficas (comparador) ===================== */
.scmp-view-seg { margin-bottom: 12px; }
.scmp-mosaic { display: grid; grid-template-columns: repeat(var(--mos-cols, 2), minmax(0, 1fr)); gap: 12px; }
.mos-panel { background: var(--surface); border: 1px solid var(--border); border-top-width: 2px; border-radius: 12px; padding: 10px 12px 8px; min-width: 0; }
.mos-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.mos-name { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.mos-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.mos-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.seg-mini { padding: 2px; }
.seg-mini .seg-btn { padding: 3px 7px; font-size: 11px; }
.mos-expand { padding: 3px 7px; }
.mos-rm { background: transparent; border: none; color: var(--text-mute); cursor: pointer; font-size: 17px; line-height: 1; padding: 2px 4px; }
.mos-rm:hover { color: var(--down); }
.mos-chart { position: relative; height: 240px; margin-top: 4px; }
@media (max-width: 720px) { .scmp-mosaic { grid-template-columns: 1fr; } }

/* ===================== Medir % arrastrando (gráficas de línea) ===================== */
.measure-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; display: none; }
.measure-layer.show { display: block; }
.measure-band { position: absolute; top: 0; bottom: 0; background: rgba(38, 162, 148, 0.15); }
.measure-layer.down .measure-band { background: rgba(242, 96, 111, 0.15); }
.measure-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--up); }
.measure-layer.down .measure-line { border-left-color: var(--down); }
.measure-tip {
  position: absolute; top: 8px; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--up); color: var(--text);
  border-radius: 8px; padding: 4px 9px; text-align: center; white-space: nowrap; box-shadow: var(--shadow);
}
.measure-layer.down .measure-tip { border-color: var(--down); }
.measure-tip b { font-size: 13px; color: var(--up); }
.measure-layer.down .measure-tip b { color: var(--down); }
.measure-tip span { display: block; color: var(--text-dim); font-size: 10.5px; margin-top: 1px; }

/* ===================== Análisis por reglas (ficha / cartera / comparador) ===================== */
.an-pos { color: var(--up); }
.an-neu { color: var(--warn); }
.an-neg { color: var(--down); }
#cm-tab-analisis { padding: 4px 20px 18px; }
.an-top { display: flex; align-items: center; gap: 16px; padding: 6px 2px 14px; }
.an-score { display: flex; align-items: baseline; justify-content: center; gap: 1px; min-width: 96px; height: 72px; border-radius: 14px; border: 2px solid var(--border); background: var(--bg-elev); }
.an-score.an-pos { border-color: var(--up); }
.an-score.an-neu { border-color: var(--warn); }
.an-score.an-neg { border-color: var(--down); }
.an-score-n { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.an-score.an-pos .an-score-n { color: var(--up); }
.an-score.an-neu .an-score-n { color: var(--warn); }
.an-score.an-neg .an-score-n { color: var(--down); }
.an-score-d { font-size: 13px; color: var(--text-mute); }
.an-verdict-t { font-size: 20px; font-weight: 700; }
.an-verdict-s { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.an-rows { display: flex; flex-direction: column; }
.an-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--border); }
.an-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--text-mute); }
.an-dot.pos { background: var(--up); }
.an-dot.neu { background: var(--warn); }
.an-dot.neg { background: var(--down); }
.an-cat { font-weight: 600; font-size: 13px; }
.an-detail { font-size: 12.5px; color: var(--text-dim); }
.an-note { font-size: 11px; color: var(--text-mute); line-height: 1.5; margin-top: 12px; }
.an-verd-sm { font-size: 12px; font-weight: 600; }
.an-badge { display: inline-block; min-width: 26px; text-align: center; font-weight: 700; font-size: 12.5px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border); }
.an-badge.an-pos { color: var(--up); border-color: var(--up); }
.an-badge.an-neu { color: var(--warn); border-color: var(--warn); }
.an-badge.an-neg { color: var(--down); border-color: var(--down); }
/* salud de la cartera */
.pf-health-hint { font-size: 11.5px; color: var(--text-mute); font-weight: 400; margin-left: 6px; }
.pfh-notes { display: flex; flex-direction: column; margin: 2px 0 10px; }
.pfh-notes .an-row { border-top: none; padding: 4px 4px; }
.pfh-list { display: flex; flex-direction: column; }
.pfh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--border); }
.pfh-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pfh-sym { font-weight: 600; font-size: 13px; }
.pfh-w { font-size: 11.5px; color: var(--text-mute); }
.pfh-score { display: flex; align-items: center; gap: 8px; }
@media (max-width: 560px) { .an-verdict-t { font-size: 17px; } .an-score { min-width: 80px; height: 64px; } .an-score-n { font-size: 28px; } }
/* perfiles + transparencia (interacción con el análisis) */
.an-profiles { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.an-prof-lbl { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; }
.an-w { font-size: 10.5px; color: var(--text-mute); font-weight: 500; }
.an-contrib { height: 4px; background: var(--bg-elev); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.an-contrib-bar { height: 100%; border-radius: 3px; }
.an-contrib-bar.pos { background: var(--up); }
.an-contrib-bar.neg { background: var(--down); }
.an-how { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); }
.an-how summary { cursor: pointer; padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); list-style: none; }
.an-how summary::-webkit-details-marker { display: none; }
.an-how summary::before { content: "▸ "; color: var(--text-mute); }
.an-how[open] summary::before { content: "▾ "; }
.an-how-body { padding: 0 14px 12px; font-size: 12px; color: var(--text-mute); line-height: 1.6; }
.an-how-body p { margin: 0 0 8px; }
.an-how-thr { font-size: 11px; }

/* ========================= MUNDO (mapa mundial) =========================
   El mapa se dibuja en un <canvas> que gestiona ECharts, así que aquí solo hay
   que darle una caja con altura y no estorbarle. Nada de sombras ni filtros
   sobre el contenedor: encima de un canvas que se repinta al mover el ratón,
   eso obliga al navegador a recomponer la capa entera en cada fotograma. */
.world-head { align-items: center; gap: 14px; flex-wrap: wrap; }
.world-note { font-size: 12.5px; color: var(--text-dim); }

.world-card { padding: 0; overflow: hidden; position: relative; }
#world-map {
  width: 100%;
  /* Alto proporcional a la ventana con tope: el mapa es apaisado y con una
     altura fija en píxeles queda una banda ridícula en pantallas grandes. */
  height: clamp(320px, 58vh, 620px);
}
.world-loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; color: var(--text-dim); z-index: 2;
}

.world-legend {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-dim);
}
.wl-set { display: inline-flex; align-items: center; gap: 16px; }
.wl-item { display: inline-flex; align-items: center; gap: 6px; }
.wl-sw { width: 22px; height: 8px; border-radius: 3px; display: inline-block; }
.wl-down { background: linear-gradient(90deg, #e5484d, #7e3b40); }
.wl-flat { background: #242c38; }
.wl-up { background: linear-gradient(90deg, #2e6b4d, #30a46c); }
/* El azul del mapa de cartera: el color no dice si sube o baja, dice cuánto pesa. */
.wl-weight { background: linear-gradient(90deg, #16324f, #3d8bff); }
.world-legend .wl-hint { margin-left: auto; opacity: .75; }

@media (max-width: 720px) {
  #world-map { height: clamp(280px, 46vh, 420px); }
  /* En una pantalla estrecha la pista de uso se come dos líneas y empuja el
     mapa; además el "arrastra / rueda" no aplica a un dedo. */
  .world-legend .wl-hint { display: none; }
}

/* ===================== TrackInvex AI (chat flotante) ===================== */
.ai-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  display: flex; align-items: center; gap: 6px;
  height: 52px; padding: 0 18px; border: none; border-radius: 26px;
  background: var(--accent); color: #fff; cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.55); font-weight: 700; font-size: 14px;
  transition: transform .12s ease, filter .12s ease;
}
.ai-fab:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ai-fab .ico { width: 22px; height: 22px; }
.ai-fab.active { background: var(--surface-2); color: var(--text); }
.ai-panel {
  position: fixed; right: 20px; bottom: 84px; z-index: 120;
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px));
  display: none; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.7); overflow: hidden;
}
.ai-panel.open { display: flex; }
.ai-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ai-title { font-weight: 700; font-size: 14px; }
.ai-sub { font-size: 10.5px; color: var(--text-mute); font-weight: 400; margin-left: 4px; }
.ai-close { background: none; border: none; color: var(--text-mute); font-size: 24px; line-height: 1; cursor: pointer; }
.ai-close:hover { color: var(--text); }
.ai-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { display: flex; }
.ai-msg.me { justify-content: flex-end; }
.ai-bubble { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.ai-msg.bot .ai-bubble { background: var(--bg-elev); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.ai-msg.me .ai-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.ai-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-sugg-chip { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 5px 11px; font-size: 12px; cursor: pointer; }
.ai-sugg-chip:hover { border-color: var(--accent); color: var(--text); }
.ai-gate { text-align: center; color: var(--text-mute); font-size: 13px; padding: 24px 12px; line-height: 1.6; }
.ai-gate-btn { height: 36px; margin-top: 12px; }
.ai-input-row { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); align-items: flex-end; }
.ai-input { flex: 1; resize: none; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; color: var(--text); padding: 9px 12px; font-family: inherit; font-size: 13px; line-height: 1.4; max-height: 96px; }
.ai-input:focus { outline: none; border-color: var(--accent); }
.ai-send { flex-shrink: 0; width: 38px; height: 38px; border: none; border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer; font-size: 15px; }
.ai-send:hover { filter: brightness(1.08); }
.ai-send:disabled, .ai-input:disabled { opacity: .5; cursor: default; }
.ai-typing { display: inline-flex; gap: 4px; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-mute); animation: ai-blink 1.2s infinite both; }
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (max-width: 560px) { .ai-fab { right: 14px; bottom: 14px; } .ai-panel { right: 8px; left: 8px; width: auto; bottom: 76px; } }

/* ===================== Efectivo y aportaciones (cartera) ===================== */
.pf-cash-hint { font-size: 11px; color: var(--text-mute); font-weight: 400; margin-left: 6px; }
.pf-cash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.cc-stat { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.cc-lbl { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.cc-val { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-editrow { display: flex; align-items: center; gap: 8px; }
.cc-edit, .cc-del { background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 14px; padding: 2px 4px; }
.cc-edit:hover { color: var(--accent); }
.cc-editrow .inp { width: 120px; }
.cc-save { padding: 0 12px; height: 32px; }
.pf-contrib { border-top: 1px solid var(--border); padding-top: 12px; }
.cc-sub { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.cc-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; margin-bottom: 12px; }
.cc-row { display: grid; grid-template-columns: 1fr auto 28px; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; }
.cc-row:hover { background: var(--bg-elev); }
.cc-date { color: var(--text-dim); font-size: 13px; }
.cc-amt { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.cc-del:hover { color: var(--down); }
.cc-empty { color: var(--text-mute); font-size: 13px; padding: 10px 4px; }
.cc-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cc-add .inp-sm { width: 150px; }
.cc-hint { font-size: 12px; min-height: 15px; margin-top: 8px; color: var(--text-mute); }
.cc-hint.err { color: var(--down); }
@media (max-width: 560px) { .cc-add .inp-sm { width: 100%; } }

.cc-chart { height: 200px; margin: 2px 0 14px; }

/* ===================== Ambiente futurista + botón de tema ===================== */
.app { position: relative; z-index: 1; }
/* Capa de fondo: fija y aislada.
   `contain` le dice al navegador que nada de aquí influye en el layout ni en el
   pintado del resto, así que sus cinco gradientes y su campo de estrellas se
   rasterizan una vez y no vuelven a entrar en el ciclo.
   `transform: translateZ(0)` es para MÓVIL: por debajo de 720px el scroll lo hace
   el documento, y ahí un fondo `position: fixed` sin capa propia se repinta en
   cada fotograma del desplazamiento. En escritorio el scroll ocurre dentro de
   `.view`, el fondo no se mueve nunca y la línea no hace nada — pero tampoco
   estorba, y el caso móvil es justo el que peor lo pasa. */
#bg-fx {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  contain: layout paint style;
  transform: translateZ(0);
}
#bg-fx .fx-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(var(--fx-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--fx-grid) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 85% 78% at 50% 26%, #000 34%, transparent 82%);
  mask-image: radial-gradient(ellipse 85% 78% at 50% 26%, #000 34%, transparent 82%);
}
.theme-btn .ico-moon { display: none; }
.theme-btn .ico-sun { display: block; }
:root[data-theme="light"] .theme-btn .ico-sun { display: none; }
:root[data-theme="light"] .theme-btn .ico-moon { display: block; }

.cc-row { grid-template-columns: 1fr auto auto 28px; }
.cc-dest-tag { font-size: 11px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.cc-dest-tag.fund { color: var(--accent); }

/* ===================== Interfaz futurista: cristal + neón ===================== */
:root {
  --glass: rgba(19, 25, 34, 0.56);
  --glass-2: rgba(24, 31, 42, 0.66);
  --glass-brd: rgba(255, 255, 255, 0.09);
  --glass-brd-hi: rgba(122, 162, 255, 0.32);
  --neon-2: #22d3ee;
}
:root[data-theme="light"] {
  --glass: rgba(255, 255, 255, 0.60);
  --glass-2: rgba(255, 255, 255, 0.74);
  --glass-brd: rgba(24, 45, 86, 0.10);
  --glass-brd-hi: rgba(47, 111, 224, 0.34);
}

/* Superficies de cristal esmerilado (dejan ver el fondo futurista).
   SIN backdrop-filter: el desenfoque del fondo obliga al compositor a releer y
   volver a desenfocar la zona que hay detrás en cada fotograma en el que algo se
   mueve. Con una tarjeta puede pasar; con veinte, más el menú y la barra
   superior, el scroll deja de llegar a 60fps. La translucidez sola ya deja ver
   el fondo, que es el efecto que se buscaba. */
.card {
  background: var(--glass);
  border-color: var(--glass-brd);
  position: relative;
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.6);
  /* Solo el borde transiciona. La sombra NO: al desplazar, el puntero se queda
     quieto y son las tarjetas las que pasan por debajo, así que :hover entra y
     sale sin parar; animar una sombra de 40px de difuminado en cada una de esas
     entradas es repintar media pantalla mientras el usuario hace scroll. */
  transition: border-color var(--t-3) var(--e-out);
  /* OJO: nada de `contain` aquí. Sería tentador (aislaría el recálculo de cada
     tarjeta), pero `contain: layout` crea un contexto de apilamiento, y hay
     tarjetas de las que SALE contenido flotante: el desplegable del buscador de
     posiciones y el menú de exportar (z-index 40). Con el contexto local, ese
     z-index deja de contar frente a las tarjetas siguientes y el desplegable se
     esconde debajo de la tarjeta de abajo. El aislamiento se hace en `.view`, que
     es el contenedor de scroll y de ahí no se escapa nada. */
}
.card::before {   /* filo de neón superior (HUD) */
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), var(--neon-2), transparent);
  opacity: .5;
}
.card:hover { border-color: var(--glass-brd-hi); }
.sidebar, .topbar { background: var(--glass); }
/* Aquí sí se conserva el desenfoque: son capas que solo existen cuando están
   abiertas y por debajo no hay nada desplazándose. */
.modal, .ai-panel {
  background: var(--glass-2);
  border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
}

/* Acentos con brillo de neón */
.btn-primary { background: linear-gradient(135deg, var(--accent), #6a5cff); box-shadow: 0 6px 18px -7px rgba(61, 139, 255, 0.55); }
.btn-primary:hover { box-shadow: 0 10px 26px -7px rgba(61, 139, 255, 0.8); }
.nav-item.active { box-shadow: inset 2px 0 0 0 var(--accent), 0 0 22px -8px rgba(61, 139, 255, 0.55); }
.inp:focus, .inp:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.ai-fab { box-shadow: 0 8px 28px -6px rgba(61, 139, 255, 0.65); }
.seg-btn.active { box-shadow: 0 0 14px -7px rgba(61, 139, 255, 0.55); }

/* Aurora: posición y capas base. El aspecto final (cortinas verticales) y la
   ausencia de animación se definen en el bloque "v5/v6" del final del fichero. */
#bg-fx .fx-aurora {
  position: absolute; top: -30%; left: -20%; width: 140%; height: 160%;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(61, 139, 255, 0.16), transparent 60%),
    radial-gradient(38% 38% at 72% 40%, rgba(124, 77, 255, 0.14), transparent 60%),
    radial-gradient(45% 45% at 50% 80%, rgba(0, 209, 209, 0.10), transparent 60%);
  filter: blur(30px);
}

/* Aportación automática mensual (cartera) */
.auto-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auto-lead { font-size: 13px; color: var(--text-dim); }
.auto-form .inp-sm { width: 120px; }
.auto-form select.inp-sm { width: 70px; }
.auto-active { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--glass-brd, var(--border)); border-radius: 10px; padding: 10px 14px; }
.auto-on { font-size: 13.5px; }
.auto-actions { display: flex; gap: 8px; }
.auto-off-btn { color: var(--down); }
.cc-auto-tag { font-size: 10px; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 0 5px; margin-left: 6px; vertical-align: middle; }

/* ================= v2: scroll fluido + más recursos visuales ================= */
/* RENDIMIENTO: el fondo va en la capa FIJA #bg-fx (no en body → no repinta al
   scrollear) y las tarjetas no usan backdrop-filter (lo caro al scrollear): se
   quedan translúcidas sólidas, que también deja ver el fondo. */
:root { --glass: rgba(18, 24, 33, 0.66); }
:root[data-theme="light"] { --glass: rgba(255, 255, 255, 0.72); }
body { background: var(--bg); background-attachment: initial; }
#bg-fx .fx-grid { animation: none; }
/* `will-change` NO se declara de forma permanente: mantiene una capa y su
   textura reservadas en GPU para siempre, y en un fondo a pantalla completa eso
   son decenas de MB de memoria de vídeo compitiendo con el scroll. Se pone (y se
   quita) solo mientras algo se está animando de verdad. */

/* Brackets tipo HUD en la esquina de las tarjetas */
.card::after {
  content: ""; position: absolute; top: 9px; right: 9px; width: 12px; height: 12px;
  border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent);
  opacity: .32; pointer-events: none;
}
/* Brillo en los números protagonistas */
.idx-value, .an-score-n, #pf-total { text-shadow: 0 0 20px rgba(61, 139, 255, 0.22); }

/* v3: legibilidad + fluidez — tarjetas más sólidas y menos movimiento */
:root { --glass: rgba(18, 24, 33, 0.82); }
:root[data-theme="light"] { --glass: rgba(255, 255, 255, 0.86); }

.add-mode-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.add-mode-note { font-size: 12px; color: var(--text-dim); }

/* ================= v4: futurismo MÁS VISIBLE (en el chrome + bordes) ================= */
:root { --fx-glow-1: rgba(61,139,255,0.22); --fx-glow-2: rgba(124,77,255,0.18); --fx-glow-3: rgba(0,209,209,0.13); --glass: rgba(18,24,33,0.74); }
:root[data-theme="light"] { --fx-glow-1: rgba(61,139,255,0.20); --fx-glow-2: rgba(124,77,255,0.14); --fx-glow-3: rgba(0,175,175,0.12); --glass: rgba(255,255,255,0.80); }

/* Tarjetas: filo de neón más marcado + halo de acento.
   UNA sola sombra, no dos. Cada sombra difuminada es una pasada de rasterizado
   sobre un área bastante mayor que la tarjeta, y el contenedor de scroll las
   rasteriza por baldosas al desplazarse: con dos sombras por tarjeta y veinte
   tarjetas, el coste de pintar una pantalla se duplica. El halo azul se conserva
   fundido en la misma sombra. */
.card::before { opacity: .9; height: 2px; }
.card { box-shadow: 0 14px 30px -22px rgba(0,0,0,0.72); }

/* Barra lateral: filo de neón a la derecha + resplandor */
.sidebar { position: relative; box-shadow: 14px 0 44px -34px rgba(61,139,255,0.55); }
.sidebar::after { content:""; position:absolute; top:0; bottom:0; right:0; width:1px; pointer-events:none;
  background: linear-gradient(180deg, transparent, var(--accent), var(--neon-2), transparent); opacity:.55; }

/* Barra superior: línea de neón inferior */
.topbar { position: relative; }
.topbar::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; pointer-events:none;
  background: linear-gradient(90deg, transparent, var(--accent), var(--neon-2), transparent); opacity:.6; }

/* Aquí vivía un latido permanente alrededor del icono de la marca. Se ha ido con
   el logo nuevo, y se agradece: era la única animación infinita que quedaba en
   pantalla, y una animación infinita mantiene despierta la capa de composición
   para siempre, restándole presupuesto al scroll. El logo se defiende solo. */

/* ============ v5: fondo cinemático estilo TradingView (aurora + espacio) ============ */
#bg-fx {
  background:
    radial-gradient(135% 58% at 50% -14%, rgba(200, 66, 210, 0.42), transparent 58%),
    radial-gradient(85% 46% at 20% -6%, rgba(96, 120, 255, 0.30), transparent 60%),
    radial-gradient(85% 46% at 82% -4%, rgba(0, 205, 225, 0.22), transparent 60%),
    radial-gradient(150% 44% at 50% 118%, rgba(255, 140, 60, 0.13), transparent 55%),
    linear-gradient(180deg, #0b0f1b 0%, #06080f 55%, #04060b 100%) !important;
}
:root[data-theme="light"] #bg-fx {
  background:
    radial-gradient(135% 58% at 50% -14%, rgba(200, 66, 210, 0.18), transparent 58%),
    radial-gradient(85% 46% at 20% -6%, rgba(96, 120, 255, 0.13), transparent 60%),
    radial-gradient(150% 44% at 50% 118%, rgba(255, 140, 60, 0.06), transparent 55%),
    linear-gradient(180deg, #e7ebf3, #eef2f9) !important;
}
/* Aurora: cortinas verticales de luz arriba */
#bg-fx .fx-aurora {
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: auto !important; height: 52% !important;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(214,96,232,0.10) 6px 8px, transparent 8px 15px),
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(130,120,255,0.08) 10px 11px, transparent 11px 23px),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(0,215,225,0.06) 14px 15px, transparent 15px 31px) !important;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 42%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 42%, transparent 100%);
  filter: blur(1.4px);
  opacity: .95;
  /* SIN animación. Era la única cosa de la interfaz que se movía de forma
     permanente, y eso significa que el navegador nunca deja de producir
     fotogramas: aunque la animación en sí sea barata, mantiene despierta la
     tubería de composición y le quita presupuesto al scroll, que es lo que sí se
     está mirando. Es una capa de máscara + desenfoque a pantalla completa; en
     cuanto está quieta se rasteriza una vez y no cuesta nada más. */
  animation: none !important;
}
:root[data-theme="light"] #bg-fx .fx-aurora { opacity: .5; }
/* Estrellas (reaprovecha .fx-grid) */
#bg-fx .fx-grid {
  inset: 0 !important; animation: none !important; opacity: .85;
  -webkit-mask-image: none !important; mask-image: none !important;
  background-repeat: no-repeat !important;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 12%, rgba(255,255,255,.95), transparent),
    radial-gradient(1px 1px at 22% 33%, rgba(210,225,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 37% 17%, #fff, transparent),
    radial-gradient(1px 1px at 51% 40%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 63% 21%, rgba(220,230,255,.9), transparent),
    radial-gradient(1px 1px at 74% 46%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 86% 15%, #fff, transparent),
    radial-gradient(1px 1px at 92% 36%, rgba(210,225,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 15% 54%, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 44% 60%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 68% 64%, rgba(230,238,255,.7), transparent),
    radial-gradient(1px 1px at 82% 56%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 30% 8%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 58% 6%, rgba(210,225,255,.7), transparent);
}
:root[data-theme="light"] #bg-fx .fx-grid { opacity: .3; }

/* ============ v6: aurora de la app MÁS intensa ============ */
#bg-fx {
  background:
    radial-gradient(145% 62% at 50% -16%, rgba(206, 72, 216, 0.55), transparent 60%),
    radial-gradient(92% 50% at 17% -8%, rgba(102, 126, 255, 0.40), transparent 62%),
    radial-gradient(92% 50% at 85% -6%, rgba(0, 212, 232, 0.30), transparent 62%),
    radial-gradient(160% 46% at 50% 120%, rgba(255, 142, 62, 0.16), transparent 56%),
    linear-gradient(180deg, #0c1020 0%, #06080f 55%, #04060b 100%) !important;
}
:root[data-theme="light"] #bg-fx {
  background:
    radial-gradient(145% 62% at 50% -16%, rgba(206, 72, 216, 0.22), transparent 60%),
    radial-gradient(92% 50% at 17% -8%, rgba(102, 126, 255, 0.15), transparent 62%),
    radial-gradient(160% 46% at 50% 120%, rgba(255, 142, 62, 0.07), transparent 56%),
    linear-gradient(180deg, #e7ebf3, #eef2f9) !important;
}
#bg-fx .fx-aurora {
  height: 58% !important; opacity: 1 !important;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(216,98,234,0.16) 6px 8px, transparent 8px 14px),
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(135,125,255,0.13) 10px 11px, transparent 11px 22px),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(0,220,232,0.10) 14px 15px, transparent 15px 30px) !important;
}
:root[data-theme="light"] #bg-fx .fx-aurora { opacity: .55 !important; }

/* ============ Login: HERO cinemático (aurora espacio) — solo web ============ */
.login-gate {
  flex-direction: column !important; gap: 28px !important;
  background:
    radial-gradient(150% 60% at 50% -18%, rgba(206, 72, 216, 0.52), transparent 58%),
    radial-gradient(92% 50% at 16% -8%, rgba(102, 126, 255, 0.36), transparent 62%),
    radial-gradient(92% 50% at 86% -6%, rgba(0, 212, 232, 0.26), transparent 62%),
    radial-gradient(165% 44% at 50% 120%, rgba(255, 142, 62, 0.15), transparent 55%),
    linear-gradient(180deg, #0b0f1b 0%, #06080f 60%, #04060b 100%) !important;
}
.login-gate::before {
  background-image:
    radial-gradient(1.5px 1.5px at 10% 14%, rgba(255,255,255,.95), transparent),
    radial-gradient(1px 1px at 24% 30%, rgba(210,225,255,.7), transparent),
    radial-gradient(1.6px 1.6px at 39% 12%, #fff, transparent),
    radial-gradient(1px 1px at 53% 34%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 66% 18%, rgba(220,230,255,.9), transparent),
    radial-gradient(1px 1px at 78% 40%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.7px 1.7px at 88% 14%, #fff, transparent),
    radial-gradient(1px 1px at 16% 48%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.2px 1.2px at 46% 52%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 72% 58%, rgba(230,238,255,.7), transparent) !important;
  background-repeat: no-repeat !important; background-size: auto !important;
  mask-image: none !important; -webkit-mask-image: none !important;
}
.login-gate::after { opacity: .3 !important; }
.gate-hero { position: relative; z-index: 1; text-align: center; max-width: 660px; padding: 0 20px; }
.gate-hero-title { font-size: clamp(30px, 6.2vw, 58px); font-weight: 800; letter-spacing: -1px; line-height: 1.04;
  background: linear-gradient(180deg, #fff, #c8d3ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gate-hero-title span { background: linear-gradient(90deg, #7aa2ff, #c46ad2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gate-hero-sub { margin-top: 14px; font-size: clamp(14px, 2.2vw, 18px); color: #aeb8cc; line-height: 1.5; }
.gate-card {
  background: rgba(16, 21, 30, 0.60) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8), 0 0 46px -22px rgba(150,100,255,0.55) !important;
}

/* El icono de marca genérico (gráfico ascendente sobre cápsula azul→turquesa) lo
   sustituyó el logo de TrackInvex, que se define arriba en .brand-logo. */