/* ===== GENERACYE design tokens ===== */
:root {
  --bg: oklch(0.16 0.005 260);
  --bg-1: oklch(0.19 0.006 260);
  --bg-2: oklch(0.22 0.008 260);
  --bg-3: oklch(0.26 0.01 260);
  --bg-0: oklch(0.13 0.004 260);
  --line: oklch(0.30 0.01 260);
  --line-soft: oklch(0.24 0.008 260);
  --ink: oklch(0.97 0.005 90);
  --ink-2: oklch(0.82 0.008 90);
  --ink-3: oklch(0.66 0.01 90);
  /* MEDIDO, NO ELEGIDO A OJO. Estaba en 0.56 y daba 3,73 de contraste contra
     --bg-2, por debajo del mínimo legible de 4,5. Son 284 usos en todo el
     sitio: texto secundario, pies de tabla, notas al pie de las fichas.
     0.62 da 4,73 y sigue por debajo de --ink-3 (0.66), así que la jerarquía
     visual se mantiene. No bajarlo sin recalcular. */
  --ink-4: oklch(0.62 0.012 260);

  --accent: oklch(0.80 0.155 70);
  --accent-soft: oklch(0.80 0.155 70 / 0.12);
  --accent-line: oklch(0.80 0.155 70 / 0.30);

  --up: oklch(0.78 0.16 152);
  --down: oklch(0.7 0.19 27);
  /* 16-oct-2026: colores que iban escritos a mano y el tema claro necesita
     cambiar (escalera del estudio de la zona, fondo de la cinta). */
  --azul: oklch(0.72 0.12 240);
  --violeta: oklch(0.72 0.1 300);
  --cinta-fondo: oklch(0.1 0.005 260 / 0.9);
  --card: oklch(0.19 0.006 260);
  --border: oklch(0.24 0.008 260);
  --ink-0: oklch(0.13 0.004 260);

  --radius: 10px;
  --radius-lg: 16px;

  --font-display: "Syne", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-editorial: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --row-py: 12px;
}

/* ─── Light mode ─────────────────────────── */
[data-color-scheme="light"] {
  /* El anillo de foco usa var(--accent). En claro el dorado daba 1,81:1
     sobre el fondo (minimo 3:1): quien navega con teclado no veia donde
     estaba. Este tono oscurecido pasa de 4,5:1 y solo afecta al foco. */
  --focus-ring: oklch(0.55 0.14 70);
  --bg:         oklch(0.98 0.003 90);
  --bg-1:       oklch(0.96 0.004 90);
  --bg-2:       oklch(0.93 0.005 90);
  --bg-3:       oklch(0.89 0.006 90);
  --bg-0:       oklch(1    0     0);
  --line:       oklch(0.82 0.006 260);
  --line-soft:  oklch(0.88 0.004 260);
  --ink:        oklch(0.12 0.01  260);
  --ink-2:      oklch(0.28 0.012 260);
  --ink-3:      oklch(0.44 0.012 260);
  /* Igual que en la paleta oscura: estaba en 0.52 y daba 4,49 contra --bg-2,
     un pelo por debajo del mínimo de 4,5. 0.50 da 4,91. */
  --ink-4:      oklch(0.50 0.010 260);
  --ink-0:      oklch(0.98 0.003 90);
  --card:       oklch(0.96 0.004 90);
  --border:     oklch(0.88 0.004 260);
  /* 16-oct-2026: verde y rojo se leen como texto (zonas, stops, cambios del
     día): con 0.58 / 0.55 daban 3,45:1 sobre --bg-1. Un poco más oscuros. */
  /* 17-oct-2026: en la ficha el verde sobre los fondos teñidos de verde o de
     dorado (chips, «✓», «VOLUMEN ACUMULADO») daba 4,2-4,5:1. 0.47 pasa de 4,5. */
  --up:         oklch(0.47 0.16 152);
  --down:       oklch(0.50 0.21 27);
  /* 16-oct-2026 · EL ACENTO EN CLARO. El tema claro no redefinía --accent y
     se quedaba el ámbar pensado para fondo oscuro (0.82): todo texto en el
     color de acento (rótulos, el objetivo de la pick, las cajas de la
     portada) daba 1,58:1, ilegible. Lleva !important porque appmain.js lo
     escribe en línea en <html> según el acento elegido, y una regla normal
     no ganaría. Los botones principales conservan su ámbar brillante con
     texto oscuro (regla de abajo). */
  /* 17-oct-2026: 0.56 daba 3,7:1 sobre su propio fondo suave (los chips
     dorados de la ficha: «Subida», «MEDIA», «R:R DE ESTA ZONA»). 0.50 pasa
     de 4,5:1 en todos; el fondo suave y la línea se quedan como estaban. */
  --accent:      oklch(0.50 0.14 68) !important;
  --accent-soft: oklch(0.56 0.14 68 / 0.12) !important;
  --accent-line: oklch(0.56 0.14 68 / 0.36) !important;
  --azul:        oklch(0.48 0.13 240);
  --violeta:     oklch(0.48 0.12 300);
  --cinta-fondo: oklch(0.97 0.004 90 / 0.94);
  /* 17-oct-2026 · LOS TINTES DE LAS TARJETAS. La tarjeta de la Acción de la
     Semana, la del 13F, la del régimen y la del Estudio arrancaban su degradado
     en un tono oscuro escrito a mano (oklch 0.16-0.2): en claro salían en
     marrón oscuro con el texto oscuro del tema encima, a 1,1:1. Estas tres
     variables solo existen aquí; en oscuro cada tarjeta usa el tono de siempre
     (es el valor de reserva de su var()). */
  --tinte-oro:     oklch(0.92 0.03 80 / 0.7);
  --tinte-violeta: oklch(0.92 0.02 280 / 0.7);
  --tinte-pick:    oklch(0.93 0.03 80);
}
[data-color-scheme="light"] .btn-primary,
[data-color-scheme="light"] button.btn-primary {
  background: linear-gradient(135deg, oklch(0.82 0.13 78) 0%, oklch(0.74 0.145 65) 100%) !important;
  border-color: oklch(0.74 0.145 65) !important;
  color: oklch(0.14 0.02 65) !important;
}
/* 17-oct-2026 · TEXTO OSCURO SOBRE EL ACENTO, EL VERDE O EL ROJO. Varias
   etiquetas («SYNC», «AHORA», «NO COMPRAR», «NO OPERABLE», los pasos del
   simulador) llevan fondo var(--accent) / var(--down) / var(--up) y texto
   casi negro escrito en línea. En oscuro esos tokens son brillantes; en claro
   son oscuros, para que se lean como TEXTO, y la etiqueta bajaba a 2,8-3,0:1.
   En claro vuelven al tono brillante del tema oscuro. Se reconocen por su
   estilo en línea tal como lo escribe el navegador (#0a0a0a sale «rgb(10,
   10, 10)»); las que llevan texto blanco no se tocan: se leen bien así. */
[data-color-scheme="light"] [style*="background: var(--accent);"]:is([style*="color: oklch(0.18"], [style*="color: rgb(10, 10, 10)"], [style*="color: rgb(20, 18, 16)"], [style*="color: rgb(0, 0, 0)"]) { background: oklch(0.80 0.155 70) !important; }
[data-color-scheme="light"] [style*="background: var(--down);"]:is([style*="color: oklch(0.18"], [style*="color: rgb(10, 10, 10)"], [style*="color: rgb(20, 18, 16)"], [style*="color: rgb(0, 0, 0)"]) { background: oklch(0.7 0.19 27) !important; }
[data-color-scheme="light"] [style*="background: var(--up);"]:is([style*="color: oklch(0.18"], [style*="color: rgb(10, 10, 10)"], [style*="color: rgb(20, 18, 16)"], [style*="color: rgb(0, 0, 0)"]) { background: oklch(0.78 0.16 152) !important; }
/* El avatar de Ajustes va del acento a un violeta oscuro (launch.css) con
   letras casi negras: en claro, 3,0:1. Con letras blancas pasa de 4,5:1 en
   los dos extremos del degradado. */
[data-color-scheme="light"] .settings-avatar { color: #fff; }
/* El pie lleva fondo casi negro con !important (launch.css) y en claro el
   texto gris del tema claro quedaba encima a 2,70:1. */
[data-color-scheme="light"] .footer-base { background: var(--bg-2) !important; }
[data-color-scheme="light"] .topbar {
  background: rgba(252,252,250,.92);
  border-bottom-color: var(--line-soft);
}
[data-color-scheme="light"] .auth-screen { background: var(--bg); }
[data-color-scheme="light"] #splash { background: #fafaf8; }
[data-color-scheme="light"] .sp-brand { color: #0a0a0a; }
[data-color-scheme="light"] .sp-sub { color: #aaa; }
[data-color-scheme="light"] #splash::before {
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
}

[data-density="compact"] {
  --row-py: 6px;
  --radius: 6px;
}

[data-theme="terminal"] {
  --bg: oklch(0.13 0.01 150);
  --bg-1: oklch(0.16 0.012 150);
  --bg-2: oklch(0.19 0.014 150);
  --bg-3: oklch(0.22 0.016 150);
  --line: oklch(0.27 0.02 150);
  --line-soft: oklch(0.21 0.014 150);
  --ink: oklch(0.93 0.06 145);
  --ink-2: oklch(0.78 0.05 145);
  --ink-3: oklch(0.58 0.04 145);
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* Subtle film-grain / noise on the obsidian background */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, oklch(0.4 0.05 260 / 0.18), transparent 60%);
  z-index: 0;
}

button { font-family: inherit; color: inherit; }
input, textarea { font-family: inherit; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; }
.display { font-family: var(--font-display); letter-spacing: -0.02em; }

/* ===== App scaffold ===== */
.app {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr);
}
.app > main {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app > main > * { flex: 1 1 auto; min-height: 0; }

.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  padding: 0 18px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(14px);
  position: relative;
  z-index: 1200;
  gap: 12px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 15px;
}
.brand .mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background:
    conic-gradient(from 210deg, var(--accent) 0%, oklch(0.55 0.13 60) 35%, oklch(0.32 0.08 260) 70%, var(--accent) 100%);
  box-shadow: inset 0 0 0 1px oklch(0.95 0 0 / 0.2), 0 0 18px var(--accent-soft);
}
.brand .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--up);
  box-shadow: 0 0 8px var(--up);
}
.nav { display: flex; gap: 4px; justify-content: center; }
.nav button {
  appearance: none; background: transparent; border: 0;
  padding: 8px 14px; border-radius: 8px;
  color: var(--ink-3); font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.nav button:hover { color: var(--ink); background: var(--bg-2); }
.nav button[data-active="true"] { color: var(--ink); background: var(--bg-2); }
.top-right { display: flex; gap: 10px; justify-content: flex-end; align-items: center; font-size: 12px; color: var(--ink-3); min-width: max-content; }
.top-right-cluster { min-width: max-content; }
.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
}
.live-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }
@keyframes bounce { 0%,100% { transform: translateY(0); opacity:.6; } 50% { transform: translateY(-4px); opacity:1; } }

.screen {
  height: 100%;
  overflow: auto;
  scroll-behavior: smooth;
}
.screen::-webkit-scrollbar { width: 10px; height: 10px; }
.screen::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 10px; border: 2px solid var(--bg); }
.screen::-webkit-scrollbar-track { background: transparent; }

/* ===== Generic primitives ===== */
.btn {
  appearance: none; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink);
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s, border-color 0.14s;
}
.btn:hover { background: var(--bg-3); border-color: var(--line); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  color: oklch(0.18 0.02 80);
  border-color: var(--accent);
  font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn-ghost {
  background: transparent; border-color: transparent; color: var(--ink-2);
}
.btn-ghost:hover { background: var(--bg-2); color: var(--ink); }

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 18px; padding: 0 5px;
  border-radius: 4px; background: var(--bg-3);
  border: 1px solid var(--line); border-bottom-width: 2px;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-2);
}

.card {
  background: linear-gradient(180deg, var(--bg-1), var(--bg));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.card-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px;
}
.card-title .actions { display: flex; gap: 6px; letter-spacing: 0; text-transform: none; font-size: 11px; }
.card-title .actions span {
  padding: 3px 8px; border-radius: 6px; cursor: pointer;
  color: var(--ink-3);
}
.card-title .actions span[data-on="true"] { background: var(--bg-2); color: var(--ink); }

.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--ink-3); }

/* ===== Landing ===== */
.landing { padding: 64px 8vw 80px; max-width: 1500px; margin: 0 auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--bg-1);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7.4vw, 116px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 22px 0 18px;
  color: var(--ink);
  text-wrap: balance;
  position: relative;
  z-index: 1;
}
.hero { position: relative; }
.hero::before {
  content: '';
  position: absolute; inset: -60px -80px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 55% 50% at 65% 35%, oklch(0.82 0.13 78 / 0.08) 0%, transparent 65%),
    radial-gradient(ellipse 45% 60% at 20% 70%, oklch(0.55 0.18 280 / 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 80%, oklch(0.65 0.16 200 / 0.05) 0%, transparent 55%);
  animation: hero-mesh 20s ease-in-out infinite alternate;
}
@keyframes hero-mesh {
  0%   { transform: scale(1) translate(0,0); }
  50%  { transform: scale(1.04) translate(-1%, 1.5%); }
  100% { transform: scale(1.01) translate(1.5%, -1%); }
}
.hero h1 .accent {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(120deg, var(--accent) 20%, oklch(0.92 0.08 80) 60%, var(--accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lede {
  font-size: 18px; max-width: 620px;
  line-height: 1.5; color: var(--ink-2);
  margin: 0 0 30px;
}
.hero-row {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 1080px) {
  .hero-row { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== Dashboard mini orb ===== */
.dash-orb-wrap {
  width: 80px; height: 80px; flex-shrink: 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.dash-orb {
  position: relative; width: 72px; height: 72px;
  perspective: 600px;
}
.dash-orb .orb-ring {
  animation-duration: 18s;
}
.dash-orb .orb-ring.r2 { animation-duration: 14s; }
.dash-orb .orb-ring.r3 { animation-duration: 10s; }
.dash-orb-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  border-radius: 50%;
  animation: orb-bob 4s ease-in-out infinite;
  pointer-events: none;
}
.dash-orb-label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .18em;
  text-shadow: 0 0 8px var(--accent);
  animation: orb-bob 4s ease-in-out infinite;
  pointer-events: none;
}
.orb-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  perspective: 1400px;
}
.orb-stage .glow {
  position: absolute; inset: -15%;
  background: radial-gradient(50% 50% at 50% 50%, oklch(0.82 0.13 78 / 0.5), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  animation: orb-bob 6s ease-in-out infinite;
}
.orb-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid oklch(0.82 0.13 78 / 0.7);
  transform-style: preserve-3d;
  animation: orb-spin 38s linear infinite;
  box-shadow: 0 0 12px oklch(0.82 0.13 78 / 0.3);
}
.orb-ring.r2 { inset: 8%;  border-color: oklch(0.82 0.13 78 / 0.6); animation-duration: 28s; animation-direction: reverse; box-shadow: 0 0 10px oklch(0.82 0.13 78 / 0.25); }
.orb-ring.r3 { inset: 18%; border-color: oklch(0.82 0.13 78 / 0.8); animation-duration: 22s; box-shadow: 0 0 14px oklch(0.82 0.13 78 / 0.35); }
.orb-ring.r4 { inset: 30%; border-color: oklch(0.82 0.13 78 / 1.0); animation-duration: 18s; animation-direction: reverse; border-width: 2.5px; box-shadow: 0 0 18px oklch(0.82 0.13 78 / 0.5); }
.orb-ring::before, .orb-ring::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent);
}
.orb-ring::before { top: -5px; left: 50%; transform: translateX(-50%); }
.orb-ring::after  { bottom: -5px; left: 50%; transform: translateX(-50%); background: var(--ink); box-shadow: 0 0 14px oklch(1 0 0 / 0.4); }

.orb-core {
  position: absolute; inset: 35%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, oklch(1 0 0 / 0.7), transparent 38%),
    radial-gradient(circle at 70% 72%, oklch(0.82 0.13 78 / 0.45), transparent 60%),
    linear-gradient(160deg, oklch(0.32 0.04 260), oklch(0.18 0.02 260));
  box-shadow:
    inset 0 0 40px oklch(0.82 0.13 78 / 0.25),
    inset 0 -20px 60px oklch(0 0 0 / 0.5),
    0 30px 60px -10px oklch(0 0 0 / 0.6),
    0 0 60px oklch(0.82 0.13 78 / 0.25);
  animation: orb-bob 6s ease-in-out infinite;
}
.orb-core::after {
  content: "";
  position: absolute; inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, oklch(1 0 0 / 0.18), transparent 50%);
  pointer-events: none;
}

.orb-tick {
  position: absolute; left: 50%; top: 50%;
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 10px; border-radius: 999px;
  background: oklch(0.18 0.005 260 / 0.85);
  border: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap;
  transform-origin: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.4);
  animation: orb-tick-fade 12s ease-in-out infinite;
}
.orb-tick .px { color: var(--accent); margin-left: 6px; }
.orb-tick .pct { color: var(--up); margin-left: 4px; }
.orb-tick .pct.dn { color: var(--down); }

@keyframes orb-spin {
  from { transform: rotateX(42deg) rotateZ(0deg); }
  to   { transform: rotateX(42deg) rotateZ(360deg); }
}
@keyframes orb-bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
@keyframes orb-tick-fade {
  0%,100% { opacity: 0.6; }
  50%     { opacity: 1; }
}

/* ===== Footer ===== */
.footer {
  margin-top: 96px;
  border-top: 1px solid var(--line-soft);
  padding-top: 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer .col h4,
.footer .col h3 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 16px;
}
.footer .col a {
  display: block;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  padding: 5px 0;
  cursor: pointer;
}
.footer .col a:hover { color: var(--ink); }

/* La columna "Qué cubre" son HECHOS, no enlaces. Antes eran seis <a> muertos
   que insinuaban páginas por índice ("S&P 500", "Russell 2000") que nunca han
   existido: se pinchaban y no pasaba nada. Se ven como texto, sin manita ni
   subrayado al pasar por encima, para que nadie intente pincharlas. */
.footer .col .pie-dato {
  display: block;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.45;
  padding: 5px 0;
  cursor: default;
}
.footer .brand { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.footer .brand .mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: conic-gradient(from 210deg, var(--accent) 0%, oklch(0.55 0.13 60) 35%, oklch(0.32 0.08 260) 70%, var(--accent) 100%);
  box-shadow: inset 0 0 0 1px oklch(0.95 0 0 / 0.2), 0 0 18px var(--accent-soft);
}
.footer .blurb { color: var(--ink-3); font-size: 12px; line-height: 1.5; max-width: 280px; }
.footer .compliance {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px;
}
.footer .compliance span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  border: 1px solid var(--line-soft); padding: 4px 8px; border-radius: 4px;
  color: var(--ink-3);
}
.footer-base {
  margin-top: 56px;
  border-top: 1px solid var(--line-soft);
  padding: 22px 0 8px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
}
.footer-base .legal { display: flex; gap: 18px; }
.hero-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero-cta .btn-primary { padding: 14px 22px; font-size: 14px; }
.hero-cta .btn { padding: 14px 18px; font-size: 14px; }

.hero-mock {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: 14px;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.7), 0 0 0 1px oklch(1 0 0 / 0.02) inset;
}
.hero-mock .mock-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  padding: 6px 8px; border-bottom: 1px dashed var(--line-soft);
  color: var(--ink-2);
}
.hero-mock .mock-row:last-child { border-bottom: 0; }

.metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 80px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--bg-1);
  overflow: hidden;
}
.metrics-strip > div {
  padding: 22px 24px;
  border-right: 1px solid var(--line-soft);
}
.metrics-strip > div:last-child { border-right: 0; }
.metrics-strip .k {
  font-family: var(--font-display); font-weight: 700; font-size: 36px;
  letter-spacing: -0.02em;
}
.metrics-strip .l { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* Section heading */
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  margin: 96px 0 28px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
  max-width: 760px;
}
.section-head .num {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
}

.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.feature {
  border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 22px;
  background: var(--bg-1);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 220px;
}
.feature .tag {
  font-family: var(--font-mono); font-size: 10px; color: var(--accent);
  letter-spacing: 0.14em;
}
.feature h3 {
  font-family: var(--font-display); font-size: 22px; margin: 0;
  letter-spacing: -0.015em; font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}
.feature p { color: var(--ink-3); margin: 0; font-size: 13px; line-height: 1.5; }
.feature .placeholder {
  margin-top: auto;
  height: 80px; border-radius: 8px;
  background: repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 8px, var(--bg-1) 8px, var(--bg-1) 16px);
  border: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.1em; text-transform: uppercase;
}

.logo-row {
  display: flex; align-items: center; gap: 36px; flex-wrap: wrap;
  padding: 24px 0; opacity: 0.7;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-top: 60px;
}
.logo-row .label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.16em; text-transform: uppercase;
}
.logo-row .lg {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; color: var(--ink-2); letter-spacing: -0.01em;
}

/* ===== Dashboard ===== */
.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  height: 100%;
}
.side {
  border-right: 1px solid var(--line-soft);
  padding: 18px 12px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto;
}
.side .group-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3); padding: 0 8px;
}
.side .item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px; border-radius: 7px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.side .item:hover, .side .item[data-active="true"] {
  background: var(--bg-2); color: var(--ink);
}
.side .item .badge {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--bg-3); padding: 1px 6px; border-radius: 4px; color: var(--ink-3);
}

.center { padding: 22px 28px; overflow-y: auto; }
.center .h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 28px; letter-spacing: -0.02em; margin: 0;
}
.center .sub { color: var(--ink-3); font-size: 13px; margin-top: 4px; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
.kpi {
  border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 16px;
  background: var(--bg-1);
  position: relative; overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
.kpi::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transition: opacity .3s;
}
.kpi:hover { border-color: oklch(0.82 0.13 78 / 0.4); transform: translateY(-2px); box-shadow: 0 8px 28px oklch(0 0 0 / 0.18); }
.kpi:hover::after { opacity: 1; }
.kpi .label { font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
.kpi .value { font-family: var(--font-display); font-weight: 600; font-size: 26px; margin-top: 6px; letter-spacing: -0.02em; }
.kpi .delta { font-family: var(--font-mono); font-size: 12px; margin-top: 2px; }
.kpi .spark { position: absolute; right: 14px; bottom: 12px; opacity: 0.7; }

.chart-card { margin-top: 22px; }
.chart-frame {
  height: 260px; border-radius: 8px;
  background:
    linear-gradient(0deg, transparent 24px, var(--line-soft) 24px, var(--line-soft) 25px, transparent 25px) repeat-y,
    linear-gradient(90deg, transparent 60px, var(--line-soft) 60px, var(--line-soft) 61px, transparent 61px) repeat-x,
    var(--bg-1);
  background-size: 25px 25px, 60px 60px;
  position: relative; overflow: hidden;
}

.right { border-left: 1px solid var(--line-soft); padding: 22px 18px; overflow-y: auto; }
.right h3 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 12px;
}

.watch-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 10px;
  padding: var(--row-py) 8px;
  border-bottom: 1px dashed var(--line-soft);
  cursor: pointer;
  border-radius: 6px;
}
.watch-row:hover { background: var(--bg-2); }
.watch-row .sym { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.watch-row .name { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.watch-row .price { font-family: var(--font-mono); font-size: 12px; text-align: right; }
.watch-row .chg { font-family: var(--font-mono); font-size: 11px; text-align: right; }

.news-item {
  padding: 12px 0; border-bottom: 1px dashed var(--line-soft);
}
.news-item:last-child { border-bottom: 0; }
.news-item .meta {
  display: flex; gap: 8px; font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 6px;
}
.news-item .meta .src { color: var(--accent); }
.news-item .head { font-size: 13px; line-height: 1.4; color: var(--ink); }
.news-item .sentiment {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px;
  vertical-align: middle;
}

/* ===== Analysis screen ===== */
.analysis { padding: 22px 28px; overflow-y: auto; max-width: 1480px; margin: 0 auto; }
.tk-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.tk-head .symbol { display: flex; align-items: baseline; gap: 14px; }
.tk-head .symbol .s {
  font-family: var(--font-display); font-weight: 700;
  font-size: 56px; letter-spacing: -0.025em;
}
.tk-head .symbol .n { color: var(--ink-3); font-size: 16px; }
.tk-head .price-block { text-align: right; }
.tk-head .price-block .px { font-family: var(--font-display); font-weight: 600; font-size: 44px; letter-spacing: -0.02em; }
.tk-head .price-block .chg { font-family: var(--font-mono); font-size: 14px; margin-top: 2px; }
.tk-head .meta-strip {
  display: flex; gap: 16px; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); margin-top: 10px; flex-wrap: wrap;
}
.tk-head .meta-strip span { color: var(--ink-2); }

.verdict {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 0;
  margin-top: 22px;
  border: 1px solid var(--line-soft); border-radius: 14px;
  background:
    radial-gradient(600px 200px at 0% 0%, var(--accent-soft), transparent 60%),
    var(--bg-1);
  overflow: hidden;
}
.verdict > div { padding: 18px 22px; border-right: 1px solid var(--line-soft); }
.verdict > div:last-child { border-right: 0; }
.verdict .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.verdict .v {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; letter-spacing: -0.02em;
  margin-top: 6px;
}
.verdict .v.buy { color: var(--up); }
.verdict .v.hold { color: var(--accent); }
.verdict .v.sell { color: var(--down); }
.verdict .score-bar {
  height: 6px; border-radius: 999px; background: var(--bg-3); margin-top: 10px;
  position: relative; overflow: hidden;
}
.verdict .score-bar > div {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--down), var(--accent), var(--up));
  border-radius: 999px;
}
.verdict .score-bar > .pin {
  position: absolute; top: -3px; width: 2px; height: 12px; background: var(--ink);
  border-radius: 2px;
}

.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 14px; }
.grid-2.sin-cartera { display: none !important; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }

.tabs {
  display: flex; gap: 2px;
  border: 1px solid var(--line-soft);
  background: var(--bg-1);
  border-radius: 8px;
  padding: 3px;
  font-size: 12px;
}
.tabs button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 6px 12px; border-radius: 6px; color: var(--ink-3);
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
.tabs button[data-active="true"] {
  background: var(--bg-3); color: var(--ink);
}

.metric-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.metric-table tr { border-bottom: 1px dashed var(--line-soft); }
.metric-table tr:last-child { border-bottom: 0; }
.metric-table td { padding: var(--row-py) 0; }
.metric-table td.l { color: var(--ink-3); }
.metric-table td.v { font-family: var(--font-mono); text-align: right; color: var(--ink); }
.metric-table td.bar { width: 40%; padding: 0 14px; }
.metric-table td.bar .b {
  height: 4px; border-radius: 99px; background: var(--bg-3); position: relative; overflow: hidden;
}
.metric-table td.bar .b > div { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 99px; }

.bullet-list { list-style: none; padding: 0; margin: 0; }
.bullet-list li {
  display: grid; grid-template-columns: 16px 1fr;
  gap: 10px; align-items: start;
  padding: 8px 0; font-size: 13px; line-height: 1.5;
  color: var(--ink-2);
}
.bullet-list li .b {
  width: 6px; height: 6px; border-radius: 50%; margin-top: 8px;
  background: var(--accent);
}
.bullet-list li.risk .b { background: var(--down); }
.bullet-list li.moat .b { background: var(--up); }

/* Mini chart bars */
.bars-chart {
  display: grid; grid-template-columns: repeat(28, 1fr);
  gap: 3px; align-items: end; height: 120px; margin-top: 10px;
}
.bars-chart > div {
  background: var(--accent); border-radius: 2px 2px 0 0;
  opacity: 0.85; transition: opacity 0.2s;
}
.bars-chart > div:hover { opacity: 1; }

/* ===== Command palette ===== */
.cmd-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: oklch(0.1 0 0 / 0.6);
  backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  animation: fadein 0.16s ease;
}
@keyframes caret-blink { 0%,100% { border-color: var(--accent); } 50% { border-color: transparent; } }
.cmd {
  width: min(640px, 92vw);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px var(--accent-line);
  overflow: hidden;
}
.cmd input {
  width: 100%;
  background: transparent; border: 0; outline: 0;
  padding: 18px 22px;
  font-size: 17px;
  color: var(--ink);
  font-family: var(--font-display); letter-spacing: -0.01em;
  border-bottom: 1px solid var(--line-soft);
}
.cmd input::placeholder { color: var(--ink-3); }
.cmd-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmd-row {
  display: grid; grid-template-columns: 60px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 10px 14px; border-radius: 8px;
  cursor: pointer; font-size: 13px;
}
.cmd-row[data-active="true"] { background: var(--bg-3); }
.cmd-row .sym { font-family: var(--font-display); font-weight: 700; }
.cmd-row .name { color: var(--ink-3); font-size: 12px; }
.cmd-row .px { font-family: var(--font-mono); color: var(--ink-2); font-size: 12px; }
.cmd-row .chg { font-family: var(--font-mono); font-size: 12px; }
.cmd-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); border-top: 1px solid var(--line-soft);
}

/* Search bar in topbar */
.search-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 7px 12px;
  width: min(540px, 90%);
  margin: 0 auto;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color 0.16s;
}
.search-bar:hover { border-color: var(--line); color: var(--ink-2); }
.search-bar svg { flex-shrink: 0; }
.search-bar .placeholder { flex: 1; }

/* Onboarding-style toast */
.toast {
  position: fixed; bottom: 22px; left: 84px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-2);
  display: flex; gap: 10px; align-items: center;
  z-index: 60;
}
.toast .live { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); animation: pulse 2s infinite; }

/* Tweaks slot tweak: ensure z-index */
[data-tweaks-panel] { z-index: 70; }

/* ============================================================
   MOBILE & TABLET RESPONSIVE
   ============================================================ */

/* Topbar: intermediate widths (tablet / small laptop) — shed chrome progressively
   so the nav, search and right cluster never overlap. Nav stays usable. */
@media (max-width: 1200px) {
  .brand .mono { display: none; }              /* drop "WORKSTATION" label */
  .top-right .btn-ghost { display: none; }      /* drop Free-trial ghost button */
  .search-bar { max-width: 200px !important; }
}
/* «Entrar» no es cromo prescindible: es la puerta del cliente que YA paga. Se
   ocultaba junto al resto de botones fantasma entre 768 y 1200 px —un portatil
   con la ventana sin maximizar— y desde la portada no quedaba ningun acceso
   directo a la sesion. Se mantiene visible en ese tramo; en movil sigue oculto
   porque alli la barra no da mas de si y el acceso vive en «Acceder». */
@media (min-width: 769px) and (max-width: 1200px) {
  .top-right .btn-ghost.btn-signin { display: inline-flex !important; }
}

@media (max-width: 1040px) {
  .topbar .search-bar { display: none; }        /* ⌘K palette still opens via keyboard */
  /* OJO: `.live-pill` y `.market-clock` NO EXISTEN en el DOM. Comprobado en
     producción: document.querySelectorAll('.market-clock').length === 0. Esta
     regla lleva meses sin esconder nada, y por eso el reloj y el botón de
     precios live se comían el ancho del menú en el teléfono. Se deja escrita
     porque no hace daño y esos nombres pueden volver, pero el arreglo de verdad
     está abajo, en el bloque de 768 px: el menú ya no depende de cuánto ocupe
     el bloque de la derecha. */
  .top-right-cluster .live-pill,
  .top-right-cluster > .market-clock { display: none; }
}

/* Topbar: collapse on phones */
@media (max-width: 768px) {

  /* ── EL MENÚ, EN SU PROPIA FILA ────────────────────────────────────────
     Medido a 375 px: `Panel` estaba en x=-110 y `Mercados` en x=-60, o sea
     FUERA de la pantalla, y sin poder deslizar (scrollWidth == clientWidth).
     El cliente del teléfono no podía llegar al Panel — su cartera, la Acción
     de la Semana y el historial.

     Causa: la columna del grid donde vive el nav colapsaba a 0px porque el
     bloque derecho se llevaba 313 de los 347 px, y el contenedor del nav trae
     `justify-content: center` EN LÍNEA: 303 px centrados en una caja de 0 se
     desbordan 151 px por cada lado.

     No se esconde nada del bloque derecho: sus elementos no tienen clase y
     cualquier selector sería estructural y frágil. El menú baja a su fila y
     ocupa el ancho completo, así que da igual lo que ocupe la derecha. */
  /* ── UNA SOLA FILA (corregido el 6-sep-2026) ───────────────────────────
     Esto metía el nav en una SEGUNDA fila… dentro de un header al que `.app`
     le da 56 px fijos. La fila se salía y las letras se cortaban por la mitad.
     Ahora el menú de la portada es un panel (ver polish.css) y el header
     vuelve a caber en su altura. */
  .topbar {
    grid-template-columns: auto auto 1fr;
    grid-template-rows: 1fr;
    padding: 0 12px;
    gap: 8px;
  }
  .topbar > .brand     { grid-column: 1; }
  .topbar > .top-right { grid-column: 3; justify-self: end; min-width: 0; }
  /* El contenedor del nav no tiene clase; se identifica por descarte. Ya no
     ocupa una fila propia: dentro solo queda el botón hamburguesa, que mide
     40 px y cabe de sobra junto a la marca. */
  .topbar > div:not(.brand):not(.top-right) {
    grid-column: 2;
    /* `justify-content: center` viene en un estilo EN LÍNEA: hace falta !important. */
    justify-content: flex-start !important;
    min-width: 0;
  }
  .topbar .search-bar { display: none; }
  .top-right .btn-ghost { display: none; }
  .brand .mono { display: none; }
}

/* Landing: mobile hero */
@media (max-width: 768px) {
  .hero { padding: 40px 16px 32px; }
  .hero h1 { font-size: clamp(32px, 8vw, 56px); }
  .hero .lede { font-size: 15px; }
  .hero-cta { flex-direction: column; gap: 10px; align-items: flex-start; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .orb-stage { max-width: 380px; margin: 0 auto; }
  .metrics-strip { grid-template-columns: 1fr 1fr; gap: 14px; }
  .press-strip .row { gap: 14px; flex-wrap: wrap; }
  .feature-grid { grid-template-columns: 1fr; }
  .section-head { padding: 40px 16px 0; }
  .section-head h2 { font-size: clamp(22px, 5vw, 32px); }
  .how-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .compare-table { font-size: 12px; }
}

/* Dashboard: mobile layout */
@media (max-width: 900px) {
  .db-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .right { border-top: 1px solid var(--line-soft); border-left: none; }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .kpi-row { grid-template-columns: 1fr; }
}

/* Analysis: mobile */
@media (max-width: 900px) {
  .an-grid { grid-template-columns: 1fr; }
  .an-tabs { flex-wrap: wrap; gap: 4px; }
  .an-tabs button { flex: 1; min-width: 80px; font-size: 10px; }
}

/* Checkout: mobile */
@media (max-width: 700px) {
  .ck { grid-template-columns: 1fr; }
  .ck-summary { border-right: none; border-bottom: 1px solid var(--line-soft); padding-bottom: 20px; }
  .ck-form { padding: 20px 16px; }
  .ck-price-line .ck-amt { font-size: 36px; }
}

/* Auth: mobile */
@media (max-width: 600px) {
  .auth-card { padding: 24px 20px; margin: 0 12px; }
  .auth-oauth { gap: 8px; }
  .oauth-btn { padding: 10px 12px; font-size: 12px; }
}

/* Settings: mobile */
@media (max-width: 700px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-sidebar { border-right: none; border-bottom: 1px solid var(--line-soft); flex-direction: row; overflow-x: auto; padding: 12px; }
}

/* ═══ Color scheme transition ═══════════════════════════════════════════ */
html {
  transition: background-color 0.35s ease, color 0.2s ease;
}
*, *::before, *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease;
}
/* Exclude transitions that would look bad */
.topbar, .avatar-menu, .cmd, input, textarea, select,
[class*="chart"], iframe, .tradingview-widget-container {
  transition: none !important;
}
body::after {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 99999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMDAnIGhlaWdodD0nMzAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC43NScgbnVtT2N0YXZlcz0nNCcgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSczMDAnIGhlaWdodD0nMzAwJyBmaWx0ZXI9J3VybCgjbiknLz48L3N2Zz4=");
  background-size: 180px 180px;
}

/* ═══ Feature card hover ════════════════════════════════════════════════ */
.feature {
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.28s, border-color 0.28s, background 0.28s;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.feature::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.82 0.13 78 / 0.8), transparent);
  transition: left 0.6s ease;
}
.feature:hover::before { left: 100%; }
.feature:hover {
  transform: translateY(-5px) scale(1.005);
  border-color: oklch(0.82 0.13 78 / 0.45);
  box-shadow: 0 24px 60px oklch(0.82 0.13 78 / 0.12), 0 0 0 1px oklch(0.82 0.13 78 / 0.2);
  background: color-mix(in oklab, var(--bg-1) 85%, oklch(0.82 0.13 78 / 0.08));
}
.feature:hover .tag {
  color: oklch(0.92 0.14 85);
  letter-spacing: 0.22em;
  transition: letter-spacing 0.35s, color 0.2s;
}
.feature:hover h3 { color: var(--ink); }
.feature .placeholder {
  transition: opacity 0.25s, transform 0.25s;
}
.feature:hover .placeholder {
  opacity: 1;
  transform: translateY(-2px);
}

/* ═══ FAQ smooth accordion ══════════════════════════════════════════════ */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(.4,0,.2,1), padding 0.35s;
  padding: 0 20px;
}
[data-open=true] .faq-a {
  grid-template-rows: 1fr;
  padding: 0 20px 20px;
}
.faq-a-inner { overflow: hidden; }
.faq-chev svg { transition: transform 0.3s cubic-bezier(.4,0,.2,1); }
[data-open=true] .faq-chev svg { transform: rotate(180deg); }
[data-open=true] .faq-q { color: var(--accent); }
.faq-item {
  border-radius: 10px;
  transition: background 0.2s;
}
.faq-item:hover { background: var(--bg-1); }
[data-open=true].faq-item { background: var(--bg-1); border-color: oklch(0.82 0.13 78 / 0.3); }

/* ═══ Magnetic hero button ══════════════════════════════════════════════ */
.btn-magnetic {
  transition: transform 0.3s cubic-bezier(.2,.9,.2,1), box-shadow 0.3s !important;
  will-change: transform;
}
.btn-magnetic:hover {
  box-shadow: 0 0 40px var(--accent-soft), 0 8px 24px oklch(0 0 0 / 0.4) !important;
}

/* ═══ Interactive demo section ══════════════════════════════════════════ */
.demo-section {
  margin: 0 0 60px;
  position: relative;
}
.demo-wrap {
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: var(--bg-1);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.demo-wrap:focus-within {
  border-color: oklch(0.82 0.13 78 / 0.5);
  box-shadow: 0 0 0 4px oklch(0.82 0.13 78 / 0.08), 0 24px 60px oklch(0 0 0 / 0.3);
}
.demo-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.demo-input {
  flex: 1; border: none; background: transparent;
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--ink); outline: none; letter-spacing: -0.01em;
  text-transform: uppercase;
}
.demo-input::placeholder { color: var(--ink-4); font-weight: 400; text-transform: none; font-family: var(--font-body); font-size: 16px; letter-spacing: 0; }
.demo-result {
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.demo-result-empty {
  padding: 28px 22px;
  color: var(--ink-4);
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: .1em;
}
.demo-metric {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
  animation: demo-fadein 0.4s ease both;
}
.demo-metric:nth-child(2) { animation-delay: 0.07s; }
.demo-metric:nth-child(3) { animation-delay: 0.14s; }
@keyframes demo-fadein {
  from { transform: translateY(8px) scale(0.98); }
  to   { transform: none; }
}
.demo-verdict-bar {
  height: 4px;
  border-radius: 2px;
  margin-top: 10px;
  background: var(--bg-3);
  overflow: hidden;
}
.demo-verdict-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.9s cubic-bezier(.2,.8,.2,1) 0.2s;
}

/* ═══ Pricing toggle ════════════════════════════════════════════════════ */
.pricing-toggle-wrap {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 28px;
}
.pricing-toggle-btn {
  position: relative; width: 44px; height: 24px;
  background: var(--bg-3); border: 1px solid var(--line-soft);
  border-radius: 12px; cursor: pointer; transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0; outline: none;
}
.pricing-toggle-btn[data-on=true] {
  background: oklch(0.82 0.13 78 / 0.25);
  border-color: oklch(0.82 0.13 78 / 0.5);
}
.pricing-toggle-btn::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-3);
  transition: transform 0.22s cubic-bezier(.4,0,.2,1), background 0.2s;
}
.pricing-toggle-btn[data-on=true]::after {
  transform: translateX(20px);
  background: var(--accent);
}
.pricing-toggle-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-2);
}
.pricing-toggle-label[data-active=true] { color: var(--ink); }
.pricing-annual-badge {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  background: oklch(0.78 0.16 152 / 0.15); color: var(--up);
  border: 1px solid oklch(0.78 0.16 152 / 0.3);
  transition: opacity 0.25s;
}

/* ═══ Stats section enhanced ════════════════════════════════════════════ */
.stats-section {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 16px; overflow: hidden;
  margin: 40px 0;
}
.stats-cell {
  background: var(--bg-1);
  padding: 28px 24px;
  text-align: center;
  transition: background 0.2s;
}
.stats-cell:hover { background: var(--bg-2); }
.stats-cell .stats-num {
  font-family: var(--font-display); font-size: 36px; font-weight: 800;
  letter-spacing: -0.025em; color: var(--ink); line-height: 1;
  margin-bottom: 6px;
}
.stats-cell .stats-num span { color: var(--accent); }
.stats-cell .stats-label {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-3);
  letter-spacing: .14em; text-transform: uppercase;
}

/* ═══ Tweaks panel landing overrides ════════════════════════════════════ */
[data-accent=mint] { --accent: oklch(0.78 0.16 152); --accent-soft: oklch(0.78 0.16 152 / 0.08); }
[data-accent=azure] { --accent: oklch(0.70 0.18 240); --accent-soft: oklch(0.70 0.18 240 / 0.08); }
[data-accent=coral] { --accent: oklch(0.72 0.20 27); --accent-soft: oklch(0.72 0.20 27 / 0.08); }
[data-accent=amber] { --accent: #F0C56C; --accent-soft: oklch(0.82 0.13 78 / 0.08); }

/* Command palette: mobile */
@media (max-width: 600px) {
  .cmd { width: 96vw; border-radius: 12px; }
  .cmd-row { grid-template-columns: 50px 1fr auto; }
  .cmd-row .px { display: none; }
}

/* TradingView widgets: never overflow their container */
.tradingview-widget-container {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
iframe[src*="tradingview"] {
  max-width: 100% !important;
  display: block !important;
}
/* Botón de soporte: subirlo en móvil, por encima del área segura inferior. */
@media (max-width: 600px) {
  .support-float-btn { bottom: 20px !important; right: 16px !important; }
  .support-panel { right: 16px !important; width: calc(100vw - 32px) !important; }
}

/* ═══ Dashboard entry animation ════════════════════════════════════════ */
.dashboard {
  opacity: 1; /* visible by default — entrance animation is purely additive below */
}
@media (prefers-reduced-motion: no-preference) {
  .dashboard {
    animation: dash-enter 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}
@keyframes dash-enter {
  from { transform: translateY(8px); }
  to   { transform: none; }
}
.kpi-row .kpi {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .kpi-row .kpi {
    animation: kpi-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
}
.kpi-row .kpi:nth-child(1) { animation-delay: 0.05s; }
.kpi-row .kpi:nth-child(2) { animation-delay: 0.10s; }
.kpi-row .kpi:nth-child(3) { animation-delay: 0.15s; }
.kpi-row .kpi:nth-child(4) { animation-delay: 0.20s; }
@keyframes kpi-pop {
  from { transform: translateY(10px) scale(0.98); }
  to   { transform: none; }
}

/* ═══ Download CTA button ════════════════════════════════════════════════ */
.btn-download {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px;
  background: oklch(0.82 0.13 78 / 0.12);
  border: 1px solid oklch(0.82 0.13 78 / 0.35);
  color: var(--accent); font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  cursor: pointer; transition: background .2s, box-shadow .2s;
  text-transform: uppercase;
}
.btn-download:hover {
  background: oklch(0.82 0.13 78 / 0.2);
  box-shadow: 0 0 20px oklch(0.82 0.13 78 / 0.15);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE UX IMPROVEMENTS (June 2026)
   ══════════════════════════════════════════════════════════════ */

/* Analysis tabs: scroll horizontally on mobile */
@media (max-width: 768px) {
  .an-grid { grid-template-columns: 1fr; gap: 12px; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { white-space: nowrap; flex-shrink: 0; }
  .an-toolbar { flex-wrap: wrap; gap: 8px; }
  .actions { flex-wrap: wrap; }
}

/* KPI row: 2 columns on mobile */
@media (max-width: 640px) {
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 12px 14px; }
  .kpi .val { font-size: 22px; }
}

/* Dashboard grid: single column */
@media (max-width: 900px) {
  .db-grid { grid-template-columns: 1fr; }
  .watch-row { grid-template-columns: 1fr auto auto; }
}

/* MarketBar: hide extra tickers on mobile */
@media (max-width: 600px) {
  .market-bar-item:nth-child(n+5) { display: none; }
  .market-bar { gap: 12px; padding: 0 12px; }
}

/* TopBar: compact right section */
@media (max-width: 640px) {
  .top-right { gap: 4px !important; }
  .lang-picker .lang-btn span.mono { display: none; }
  .btn-download { display: none; }
  .live-pill { font-size: 9px; padding: 3px 6px; }
}

/* Analysis: full screen chart on mobile */
@media (max-width: 768px) {
  .analysis-wrap { padding: 12px; }
  .an-head { flex-wrap: wrap; gap: 8px; }
}

/* Settings: collapse sidebar */
@media (max-width: 700px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line-soft); padding: 0; flex-direction: row; }
  .settings-nav button { white-space: nowrap; border-bottom: 2px solid transparent; border-radius: 0; padding: 12px 14px; }
  .settings-nav button[data-active=true] { border-bottom-color: var(--accent); background: transparent; }
}

/* Paywall: full-width on mobile */
@media (max-width: 600px) {
  .pw-overlay { padding: 12px 0; align-items: flex-end; }
  .pw { border-radius: 18px 18px 0 0; max-height: 92vh; overflow-y: auto; }
  .pw-foot-actions { flex-direction: column; }
  .pw-foot-actions button { width: 100%; justify-content: center; }
  .pw-plans { grid-template-columns: 1fr; }
}

/* Alerts: mobile card layout */
@media (max-width: 640px) {
  .al-table thead { display: none; }
  .al-table tr { display: block; padding: 12px; border-bottom: 1px solid var(--line-soft); }
  .al-table td { display: inline-block; padding: 2px 6px 2px 0; }
}

/* Markets heatmap: 2 columns on mobile */
@media (max-width: 640px) {
  .heatmap-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .heat-cell { padding: 14px 12px !important; }
}

/* Backtesting table: scroll on mobile */
@media (max-width: 768px) {
  .bt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Command palette: full width on mobile */
@media (max-width: 500px) {
  .cmd { width: 100vw; left: 0; right: 0; top: 0; border-radius: 0 0 16px 16px; }
}

/* Support button: smaller on mobile */
@media (max-width: 500px) {
  .support-float-btn { width: 44px !important; height: 44px !important; bottom: 16px !important; right: 12px !important; }
}



/* ══ TARGETED DESIGN IMPROVEMENTS — June 2026 ══════════════════════ */

/* 1. Accent button: gradient + glow */
.btn-primary, button.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, oklch(0.74 0.145 65) 100%);
  box-shadow: 0 4px 16px oklch(0.80 0.155 70 / 0.22), 0 1px 0 0 oklch(0.92 0.06 80 / 0.35) inset;
  border: none;
  color: oklch(0.12 0.02 65);
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px oklch(0.80 0.155 70 / 0.30), 0 1px 0 0 oklch(0.92 0.06 80 / 0.45) inset;
}

/* 2. KPI cards: subtle top accent on hover */
.kpi { transition: border-color 0.2s, transform 0.2s; }
.kpi:hover {
  border-top-color: oklch(0.80 0.155 70 / 0.4);
  transform: translateY(-1px);
}
.kpi .val {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* 3. Active sidebar item: accent left border */
.sidebar button[data-active=true],
.nav-item[data-active=true] {
  border-left: 2px solid var(--accent) !important;
  color: var(--accent) !important;
  padding-left: calc(var(--px, 16px) - 2px) !important;
  background: oklch(0.80 0.155 70 / 0.06) !important;
}

/* 4. Watchlist rows: tighter hover */
.watch-row { transition: background 0.12s; }
.watch-row:hover { background: oklch(0.80 0.155 70 / 0.04); }
.watch-row .sym {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* 5. Tab active: accent tint */
.tabs button[data-active=true] {
  background: oklch(0.80 0.155 70 / 0.10) !important;
  color: var(--accent) !important;
  border-color: oklch(0.80 0.155 70 / 0.35) !important;
}

/* 6. Selection: branded */
::selection { background: oklch(0.80 0.155 70 / 0.28); color: var(--ink); }

/* 7. Scrollbar: thinner */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(0.28 0.012 260); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: oklch(0.38 0.018 260); }

/* 8. Hero h1: gradient text */
.h1 {
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.04 !important;
}

/* 9. Input focus: accent ring */
input:focus, select:focus, textarea:focus {
  border-color: oklch(0.80 0.155 70 / 0.45) !important;
  box-shadow: 0 0 0 3px oklch(0.80 0.155 70 / 0.07) !important;
  outline: none !important;
}

/* 10. Global keyboard focus ring — visible only for keyboard users (not on
   mouse click), so tab-navigation is always clear without cluttering pointer UX.
   Accesibilidad: cubre botones, enlaces, ítems de menú y cualquier elemento
   con tabindex. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.item:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent));
  outline-offset: 2px;
  border-radius: 4px;
}
/* No forzamos anillo en clic de ratón (evita doble ring con el de inputs). */
:focus:not(:focus-visible) { outline: none; }

/* 10. Live pill: green glow dot */
.live-pill .dot {
  box-shadow: 0 0 6px var(--up);
}
/* ════════════════════════════════════════════════════════════════════ */

/* ── Additional targeted improvements ─────────────────────────── */

/* KPI numbers: larger and bolder */
.kpi-row .kpi .val,
.kpi-row .kpi .value {
  font-size: clamp(22px, 2.5vw, 34px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  font-family: var(--font-display) !important;
}
/* 15-oct-2026: era 9 px con 0.18em, en escritorio y en el móvil (pisaba el
   suelo de 11 px del móvil por llevar !important con más especificidad).
   «Valor del portafolio», «Coste base», «Rentabilidad total»: es lo que dice
   qué es cada cifra de la cartera. */
.kpi-row .kpi .label {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  margin-bottom: 6px !important;
}

/* Sidebar bottom profile: clean truncation */
.sidebar-footer { border-top: 1px solid var(--line-soft); }

/* Watchlist: bolder ticker symbols */
.watch-row .sym, .wl-sym {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  font-size: 14px !important;
}

/* Greeting: bigger and bolder */
.h1 {
  font-size: clamp(28px, 3.5vw, 52px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}

/* Nav active item: accent bar on left */
.sidebar button[data-active="true"] {
  position: relative;
}
.sidebar button[data-active="true"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* Tab underline style: cleaner */
.tabs button {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Market breadth bars: smoother */
.breadth-bar, .progress-bar {
  border-radius: 2px;
  overflow: hidden;
}

/* ── Página de estado del servicio (estado.js) ────────────────────────────────
   Sustituye al enlace que soltaba el JSON crudo de /api/health a la cara del
   cliente. Usa las mismas variables que el resto: ni un color nuevo. */
.est-capa {
  position: fixed; inset: 0; z-index: 9000;
  background: oklch(0.08 0.01 280 / 0.72);
  backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
}
.est-caja {
  width: 100%; max-width: 460px;
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px oklch(0 0 0 / 0.5);
}
.est-titulo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.est-cerrar {
  background: none; border: none; color: var(--ink-3);
  cursor: pointer; font-size: 13px; padding: 2px 6px; line-height: 1;
}
.est-cerrar:hover { color: var(--ink); }
.est-cuerpo { padding: 6px 18px 16px; }
.est-cabecera {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 0 12px; font-size: 14px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.est-fila {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 0; border-bottom: 1px dashed var(--line-soft);
}
.est-fila:last-of-type { border-bottom: none; }
.est-nombre { font-size: 13px; color: var(--ink-2); }
.est-detalle { font-size: 11.5px; color: var(--ink-4); line-height: 1.5; margin-top: 2px; }
.est-punto {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.est-bien  { background: var(--up);   box-shadow: 0 0 7px var(--up); }
.est-aviso { background: var(--accent); box-shadow: 0 0 7px var(--accent); }
.est-mal   { background: var(--down); box-shadow: 0 0 7px var(--down); }
.est-pie {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft);
  font-size: 10.5px; color: var(--ink-4); line-height: 1.5;
}

/* ── LEGIBILIDAD Y DEDO EN MÓVIL (16-ago-2026) ────────────────────────────────
   Medido en un iPhone de 375 px: 37 textos por debajo de 11 px y 15 zonas
   táctiles de menos de 34 px de alto — los enlaces del pie quedaban en 26 px.

   En una pantalla de 27 pulgadas, una etiqueta mono de 10 px en versalitas es
   una decisión de diseño. En un móvil a un palmo de la cara es un texto que no
   se lee, y un enlace de 26 px es un enlace que se falla al pulsar. La guía de
   Apple pide 44 px de zona táctil y 11 pt de cuerpo mínimo.

   NO se cambia ni un color, ni una tipografía, ni una posición: solo tamaño y
   espacio, y solo por debajo de 640 px. En escritorio todo queda exactamente
   igual. */
@media (max-width: 640px) {
  /* Zonas táctiles: el pie era lo peor, con enlaces de 26 px pegados unos a
     otros. Se separa en vertical sin mover nada de sitio. */
  .footer .col a { padding: 11px 0; }
  .footer .col .pie-dato { padding: 9px 0; }

  /* Etiquetas y textos secundarios: de 10 px a 11,5 px. Sigue siendo texto
     pequeño y jerárquicamente secundario — solo deja de ser ilegible. */
  /* Las reglas de escritorio usan dos clases (.stats-cell .stats-label), asi
     que una sola clase pierde por especificidad. Se iguala el selector en vez
     de recurrir a !important: !important gana la batalla de hoy y complica
     todas las de mañana. */
  .stats-cell .stats-label,
  .stats-section .stats-label,
  .footer .compliance span,
  .est-detalle { font-size: 11.5px; }

  .feature .placeholder,
  .placeholder { font-size: 11.5px; }

  .sp-logo .sp-sub,
  .sp-status { font-size: 11.5px; }

  .mono { font-size: 11.5px; }

  /* ── LOS 512 TAMAÑOS ESCRITOS EN LINEA ──────────────────────────────────
     Todo lo de arriba va por clase, y por eso no arreglaba casi nada: los
     tamaños diminutos NO estan en el CSS, estan escritos en el atributo
     style de cada elemento desde el JS. Medido: 512 usos por debajo de
     11 px repartidos en 25 ficheros — 192 a 9 px, 199 a 10 px, y hasta uno
     a 7 px. En la portada, 133 elementos con texto por debajo de 11 px.

     Cambiarlos a mano son 512 ediciones en dos ficheros cada una (.js y
     .jsx), y ademas se cargaria la estetica de terminal que en una pantalla
     grande esta bien: una etiqueta mono de 9 px en versalitas es una
     decision de diseño a 60 cm, y un texto ilegible a un palmo.

     SOBRE EL !important. El bloque de arriba dice, con razon, que se iguala
     la especificidad en vez de recurrir a el. Eso vale entre reglas CSS.
     Contra un estilo EN LINEA no hay especificidad que valga: !important es
     el unico mecanismo que da el lenguaje. No es un atajo, es la herramienta
     prevista — y encerrada en un @media de movil, no puede sorprender a nadie
     en escritorio.

     El suelo son 11 px (la guia de Apple pide 11 pt de cuerpo minimo) y
     11,5 px para lo que ya estaba en 10: mantiene la jerarquia —lo pequeño
     sigue siendo lo pequeño— y deja de ser ilegible. */
  [style*="font-size: 7px"],
  [style*="font-size: 7.5px"],
  [style*="font-size: 8px"],
  [style*="font-size: 8.5px"],
  [style*="font-size: 9px"],
  [style*="font-size: 9.5px"] { font-size: 11px !important; }

  [style*="font-size: 10px"],
  [style*="font-size: 10.5px"] { font-size: 11.5px !important; }

  /* Esas etiquetas suelen llevar letter-spacing de 0.16em a 0.2em, pensado
     para 9 px. Al subir el cuerpo, ese espaciado desborda la caja y parte
     palabras en pantallas estrechas. Se recorta solo en las que se han
     agrandado, y solo en movil. */
  [style*="font-size: 7px"][style*="letter-spacing"],
  [style*="font-size: 7.5px"][style*="letter-spacing"],
  [style*="font-size: 8px"][style*="letter-spacing"],
  [style*="font-size: 8.5px"][style*="letter-spacing"],
  [style*="font-size: 9px"][style*="letter-spacing"],
  [style*="font-size: 9.5px"][style*="letter-spacing"],
  [style*="font-size: 10px"][style*="letter-spacing"],
  [style*="font-size: 10.5px"][style*="letter-spacing"] { letter-spacing: .08em !important; }

  /* ── Y LAS QUE VIENEN DEL PROPIO CSS ────────────────────────────────────
     Medido en el movil despues de arreglar las de linea: quedaban 40
     elementos por debajo de 11 px, y NINGUNO llevaba el tamaño en el
     atributo style. Salian de estas 17 reglas, sacadas recorriendo la hoja
     entera en vez de a ojo.

     Aqui no hace falta !important: mismo selector, y este bloque va al final
     del fichero, asi que gana por orden. Es la regla que ya seguia el bloque
     de arriba y se mantiene. */
  .kbd,
  .dash-orb-label,
  .side .group-label,
  .side .item .badge,
  .news-item .meta,
  .verdict .label,
  .an-tabs button,
  .pricing-annual-badge,
  .live-pill,
  .kpi-row .kpi .label,
  .tabs button,
  .est-titulo,
  .est-pie { font-size: 11.5px; }

  /* La etiqueta de las tarjetas de caracteristicas lleva versalitas y
     espaciado ancho: al subirla hay que apretar el espaciado o parte palabra
     en pantallas de 360 px. */
  .feature .tag { font-size: 11.5px; letter-spacing: .08em; }

  /* ── LOS ULTIMOS DIECIOCHO ──────────────────────────────────────────────
     Quedaban 18 elementos a 10 px repartidos en cuatro sitios. Rastreados
     recorriendo document.styleSheets en el navegador: NO salen de ninguna
     hoja alcanzable —ni de styles.css, ni del <style> del HTML, ni de un
     atributo style—, asi que no hay forma de ganarles por orden ni por
     especificidad. Aqui el !important no es comodidad: es lo unico que
     queda, y sigue encerrado en el @media de movil.

     Si algun dia aparece de donde salen, esta regla sobra y se quita. */
  .pulse-sym-btn,
  .pulse-head .mono,
  .fanout .leaf,
  .out .sp-status { font-size: 11.5px !important; }

  /* Las negritas sueltas dentro de un span heredan el tamaño del padre, y si
     el padre es una etiqueta diminuta se quedan igual de pequeñas. */
  span > b { font-size: inherit; }

  /* El enlace de la política de cookies mide 16 px de alto y va dentro de una
     frase. Aquí no vale agrandarlo: rompería el párrafo. Pero el relleno
     vertical de un elemento EN LÍNEA amplía la zona táctil SIN mover el texto
     ni cambiar la altura de la línea — el relleno se desborda visualmente y ya
     está. De 16 px a 36 px de zona, y en pantalla no se mueve nada. */
  .cookie-text .auth-link { padding: 10px 0; }
}