/* ---------------------------------------------------------------------
   tradingbot — panel
   -----------------------------------------------------------------------
   DIRECCIÓN DE DISEÑO: "expediente bajo plazo".

   Esto no es un terminal de trading (esa estética vende confianza) ni un
   cuadro de mando (todas las tarjetas pesan igual). Es un juzgado pequeño:
   una persona sola, a menudo en el móvil, dictamina sobre la propuesta de un
   analista con dinero real y un reloj de diez minutos corriendo. La página
   tiene que hacer posible ese dictamen en el tiempo que hay, sin que el
   resultado parezca mejor de lo que es.

   TRES CARAS, TRES VOCES — es la decisión que sostiene todo lo demás:
     · --mono  = medida de máquina: precios, niveles, reloj, múltiplos.
     · --serif = las palabras del ANALISTA y nada más: su frase y su tesis.
     · --sans  = la interfaz hablando: títulos, botones, etiquetas.
   De un vistazo se sabe de quién es la voz que estás leyendo.

   COLOR: verde y rojo marcan DIRECCIÓN y signo, nunca éxito — van apagados a
   propósito y ningún botón es verde. El ámbar (--plazo) está reservado a una
   sola cosa en todo el panel: el tiempo que se acaba. El rojo de --real solo
   aparece como chapa invertida y como filo superior, nunca como color de
   texto, para que no pueda confundirse con una pérdida.
   El color NUNCA es la única señal: todo estado lleva además su palabra.
   ------------------------------------------------------------------- */

:root {
  /* -- superficie y texto: gris-topo cálido, un banco de trabajo sobre el
        que los paneles son objetos, no tarjetas flotando -- */
  --bg: #eae8e2;
  --surface: #fbfaf7;
  --surface-2: #f2f0ea;
  --surface-sunken: #dfdcd3;
  --border: #d3cfc5;
  --border-soft: #e4e1d9;

  --ink: #191b18;
  --ink-soft: #3a3f39;
  --ink-dim: #5f655d;
  --ink-faint: #8b9089;

  /* -- color de marca y estado -- */
  --brand: #0c6960;
  --brand-ink: #ffffff;
  --brand-bg: rgba(12, 105, 96, 0.09);

  /* Apagados a propósito: dicen "arriba" y "abajo", no "bien" y "mal". */
  --gain: #2d6b4a;
  --gain-bg: rgba(45, 107, 74, 0.10);
  --loss: #a3382a;
  --loss-bg: rgba(163, 56, 42, 0.10);

  /* Ámbar: SOLO el tiempo que se acaba y los avisos que van con él. */
  --plazo: #96610c;
  --plazo-bg: rgba(150, 97, 12, 0.12);
  --warn: var(--plazo);
  --warn-bg: var(--plazo-bg);

  /* Dinero real: chapa invertida y filo. Nunca color de texto. */
  --real: #8c2317;
  --real-ink: #ffffff;

  /* -- tipografía -- */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", "DejaVu Sans Mono", Consolas, monospace;
  /* La cara de lectura. Solo la usa el analista: su frase y su tesis son
     1.500-3.000 caracteres que hay que LEER, no ojear. Todo del sistema. */
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text",
           Cambria, "Noto Serif", "Liberation Serif", Georgia, serif;

  /* -- forma: radios distintos por nivel, nunca la misma esquina para todo -- */
  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-lift: 0 1px 2px rgba(25, 27, 24, 0.05), 0 18px 34px -22px rgba(25, 27, 24, 0.30);

  /* -- espacio: una escala, no números sueltos -- */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 36px;
  --gap: var(--e4);

  /* -- gráficos (leídos por charts.js con getComputedStyle) -- */
  --chart-text: var(--ink-faint);
  --chart-grid: rgba(25, 27, 24, 0.06);
  --chart-border: rgba(25, 27, 24, 0.16);
  --chart-up: var(--gain);
  --chart-down: var(--loss);
  --chart-accent: var(--brand);
  --chart-area-top: rgba(12, 105, 96, 0.20);
  --chart-area-bottom: rgba(12, 105, 96, 0.02);
  --chart-baseline: rgba(25, 27, 24, 0.30);
  --chart-regime-trend: rgba(45, 107, 74, 0.10);
  --chart-regime-chaos: rgba(163, 56, 42, 0.12);
  /* Comparativa por cartera: spot y futuros operan, así que llevan color de
     instrumento; referencia es el grupo de control y usa el mismo gris
     apagado del resto de líneas neutras (además va discontinua). */
  --chart-sleeve-spot: var(--brand);
  --chart-sleeve-futuros: #2b6ba8;
  --chart-sleeve-referencia: var(--ink-faint);

  color-scheme: light;
}

/* El tema oscuro se define UNA vez y se aplica por dos caminos: lo que diga el
   sistema y, si algún día hay un interruptor, lo que diga [data-theme]. La
   guarda :not([data-theme="light"]) evita que el sistema gane a una elección
   explícita. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1211;
    --surface: #161a19;
    --surface-2: #1c2120;
    --surface-sunken: #090c0b;
    --border: rgba(255, 255, 255, 0.11);
    --border-soft: rgba(255, 255, 255, 0.06);

    --ink: #e8eeec;
    --ink-soft: #c0ccc8;
    --ink-dim: #929e99;
    --ink-faint: #66726d;

    --brand: #3ecfb9;
    --brand-ink: #05201c;
    --brand-bg: rgba(62, 207, 185, 0.13);

    --gain: #58b98a;
    --gain-bg: rgba(88, 185, 138, 0.13);
    --loss: #e8735c;
    --loss-bg: rgba(232, 115, 92, 0.13);

    --plazo: #e0aa4e;
    --plazo-bg: rgba(224, 170, 78, 0.13);

    --real: #cf3a25;
    --real-ink: #ffffff;

    --shadow-lift: 0 12px 32px -18px rgba(0, 0, 0, 0.65);

    --chart-grid: rgba(255, 255, 255, 0.05);
    --chart-border: rgba(255, 255, 255, 0.12);
    --chart-area-top: rgba(62, 207, 185, 0.22);
    --chart-area-bottom: rgba(62, 207, 185, 0.02);
    --chart-baseline: rgba(255, 255, 255, 0.26);
    --chart-regime-trend: rgba(88, 185, 138, 0.10);
    --chart-regime-chaos: rgba(232, 115, 92, 0.13);
    --chart-sleeve-futuros: #6aa6e8;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0e1211;
  --surface: #161a19;
  --surface-2: #1c2120;
  --surface-sunken: #090c0b;
  --border: rgba(255, 255, 255, 0.11);
  --border-soft: rgba(255, 255, 255, 0.06);
  --ink: #e8eeec;
  --ink-soft: #c0ccc8;
  --ink-dim: #929e99;
  --ink-faint: #66726d;
  --brand: #3ecfb9;
  --brand-ink: #05201c;
  --brand-bg: rgba(62, 207, 185, 0.13);
  --gain: #58b98a;
  --gain-bg: rgba(88, 185, 138, 0.13);
  --loss: #e8735c;
  --loss-bg: rgba(232, 115, 92, 0.13);
  --plazo: #e0aa4e;
  --plazo-bg: rgba(224, 170, 78, 0.13);
  --real: #cf3a25;
  --shadow-lift: 0 12px 32px -18px rgba(0, 0, 0, 0.65);
  --chart-grid: rgba(255, 255, 255, 0.05);
  --chart-border: rgba(255, 255, 255, 0.12);
  --chart-area-top: rgba(62, 207, 185, 0.22);
  --chart-area-bottom: rgba(62, 207, 185, 0.02);
  --chart-baseline: rgba(255, 255, 255, 0.26);
  --chart-regime-trend: rgba(88, 185, 138, 0.10);
  --chart-regime-chaos: rgba(232, 115, 92, 0.13);
  --chart-sleeve-futuros: #6aa6e8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
button, select, input { font: inherit; color: inherit; }

.pos { color: var(--gain); }
.neg { color: var(--loss); }
.muted { color: var(--ink-dim); }
.right { text-align: right; }

::selection { background: var(--brand); color: var(--brand-ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

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

/* ------------------------------------------------------------- topbar */

#topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e3) 22px;
  /* Opaco a propósito, SIN backdrop-filter: ese filtro convierte a #topbar en
     contenedor de posicionamiento para sus descendientes "fixed", y la barra
     de pestañas inferior del móvil (.tabs) es uno de ellos — con el filtro
     puesto quedaba clavada arriba en vez de abajo. */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar-row { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.topbar-row-nav { justify-content: space-between; }

.brand { display: flex; align-items: center; gap: var(--e2); }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  background: var(--brand); color: var(--brand-ink);
  font-size: 13px; font-weight: 700;
}
.brand-name { font-weight: 700; letter-spacing: -0.01em; color: var(--ink); font-size: 15px; }

/* Chapa de modo. En papel es un recordatorio callado; en dinero real es la
   ÚNICA cosa del panel con tinta invertida, y por eso no se confunde con nada
   (ver .badge-real más abajo). */
.badge-paper {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}
.badge-paper-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Semáforo de salud del bot, siempre visible, se actualiza solo. */
.chip-health {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 5px 12px 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.chip-health:hover { border-color: var(--ink-faint); }
.chip-health-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--ink-faint);
}
.chip-health-text { display: flex; flex-direction: column; line-height: 1.2; }
.chip-health-sub { font-weight: 400; font-size: 11px; color: var(--ink-faint);
                   font-variant-numeric: tabular-nums; }
.chip-health.ok .chip-health-dot { background: var(--gain); box-shadow: 0 0 0 4px var(--gain-bg); }
.chip-health.warn .chip-health-dot { background: var(--plazo); box-shadow: 0 0 0 4px var(--plazo-bg); }
.chip-health.bad .chip-health-dot { background: var(--loss); box-shadow: 0 0 0 4px var(--loss-bg); }
.chip-health.muted .chip-health-dot { background: var(--ink-faint); }

.tabs { display: flex; gap: 2px; }
.tab {
  border: 0;
  background: none;
  color: var(--ink-dim);
  font: 600 13.5px/1 var(--sans);
  padding: var(--e2) 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tab:hover { color: var(--ink); background: var(--surface-2); }
.tab.on { color: var(--brand-ink); background: var(--brand); }

select, input.num {
  appearance: none;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 26px 6px 10px;
  font: 13px/1.3 var(--sans);
  cursor: pointer;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
                    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: right 12px center, right 8px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
select:hover, input.num:hover { border-color: var(--ink-faint); }
input.num {
  width: 10ch;
  padding: 6px 8px;
  font-family: var(--mono);
  cursor: text;
}

.field { display: flex; align-items: center; gap: var(--e2); }
.field-label { font: 500 12px/1 var(--sans); color: var(--ink-faint); white-space: nowrap; }

.btn {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font: 600 13px/1.3 var(--sans);
  cursor: pointer;
}
.btn:hover { color: var(--ink); border-color: var(--ink-faint); background: var(--surface-2); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--surface); border-color: var(--border); }

.link {
  background: none;
  border: 0;
  color: var(--brand);
  font: 600 13px/1.4 var(--sans);
  cursor: pointer;
  padding: 0;
}
.link:hover { text-decoration: underline; }

/* --------------------------------------------------------------- main */

main { flex: 1; min-height: 0; overflow-y: auto; position: relative; }

/* Aquí se pinta la versión nueva durante un refresco automático: ocupa el
   ancho real (los gráficos miden su propio nodo y con ancho cero salen rotos)
   pero no se ve ni recibe clics. Cuando está lista sustituye a la anterior de
   golpe, así no hay parpadeo ni se pierde el scroll. */
.view-preparando {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  pointer-events: none;
}

.view {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--e5) 22px 64px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.loading { padding: 48px 22px; color: var(--ink-dim); }

.view-head { display: flex; align-items: flex-end; gap: var(--e4); flex-wrap: wrap; }
/* Título y explicación apilados: en una fila, la explicación empujaba al
   título fuera de la esquina y el ojo tenía que buscarlo. */
.view-head-col { flex-direction: column; align-items: flex-start; gap: 4px; }
.view-head h1 { font-size: 21px; color: var(--ink); letter-spacing: -0.015em; }
.view-sub { color: var(--ink-dim); font-size: 13.5px; max-width: 62ch; }

/* --------------------------------------------------------------- hero */

.hero {
  display: flex;
  gap: var(--e5);
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 26px 26px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.hero-kicker { font: 600 12px/1 var(--sans); color: var(--ink-faint); margin-bottom: var(--e2); }
.hero-title { font-size: 15px; color: var(--ink-dim); }
.hero-number {
  font: 700 clamp(36px, 6vw, 54px)/1.05 var(--mono);
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 2px 0 6px;
}
.hero-sub { color: var(--ink-dim); font-size: 14px; }
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-side { text-align: right; display: flex; flex-direction: column; gap: var(--e2); align-items: flex-end; }
.hero-note { font-size: 12.5px; color: var(--ink-faint); max-width: 34ch; }
.hero-note.warn { color: var(--plazo); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font: 600 13px/1 var(--sans);
  color: var(--ink);
}
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.pill-sub { color: var(--ink-faint); font-weight: 400; font-size: 12px; }
.pill.ok .pill-dot { background: var(--gain); box-shadow: 0 0 0 3px var(--gain-bg); }
.pill.warn .pill-dot { background: var(--plazo); box-shadow: 0 0 0 3px var(--plazo-bg); }
.pill.bad .pill-dot { background: var(--loss); box-shadow: 0 0 0 3px var(--loss-bg); }

/* -------------------------------------------------------------- cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.card-label { font: 600 12px/1 var(--sans); color: var(--ink-faint); }
.card-value {
  font: 600 23px/1.25 var(--mono);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin: 7px 0 2px;
}
.card-sub { font-size: 12px; color: var(--ink-dim); }

/* Reparto del capital de una cartera: cuánto está comprometido en posiciones
   y cuánto queda libre. El equity solo no responde a eso, y es la pregunta de
   todos los días antes de abrir nada. */
.capital { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.capital-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border-soft);
  overflow: hidden;
}
.capital-bar-fill { display: block; height: 100%; background: var(--brand); }
.capital-legend {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.capital-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.capital-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); flex: none;
}
.capital-expuesto { font-size: 11.5px; color: var(--ink-faint); }

/* --- acceso y configuración --- */
.login-wrap { display: grid; place-items: center; min-height: 70vh; padding: 20px; }
.login {
  display: flex; flex-direction: column; gap: var(--e3);
  width: min(340px, 100%);
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.login h1 { font-size: 20px; }
.login-sub { font-size: 13px; color: var(--ink-dim); margin: -6px 0 6px; }
.login input {
  padding: 9px 11px; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.login-error { margin: 0; font-size: 13px; color: var(--loss); }

.cfg-cartera { display: flex; flex-direction: column; gap: 10px; }
.cfg-campo { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.cfg-campo input[type="number"], .cfg-campo input[type="text"] {
  padding: 7px 9px; font-size: 14px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.cfg-etiqueta { font-size: 11.5px; color: var(--ink-faint); }
.cfg-ayuda { font-size: 11.5px; color: var(--ink-dim); }
.cfg-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cfg-aviso { margin: 0; font-size: 13px; max-width: 70ch; }
.cfg-aviso.ok { color: var(--gain); }
.cfg-aviso.bad { color: var(--loss); }

.benchmark {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 var(--gap);
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.benchmark-label { color: var(--ink-dim); }
.benchmark-valor { font-weight: 700; }
.benchmark-dif { color: var(--ink-faint); margin-left: auto; }

/* Las dos líneas de "elegir vs desplegar" van pegadas entre sí y separadas de
   la de comprar y mantener: contestan a la pregunta que esa deja abierta. */
.seleccion { display: flex; flex-direction: column; gap: 4px; }
.seleccion .benchmark { margin-bottom: 0; border-style: solid; }
.seleccion .benchmark:first-child { border-bottom-width: 0;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.seleccion .benchmark:last-child { border-top-left-radius: 0; border-top-right-radius: 0; }
.seleccion + .capital-total { margin-top: var(--gap); }

.capital-total {
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--e3) 14px; margin-bottom: var(--gap);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.capital-total-head { font-size: 12px; color: var(--ink-faint); }
.capital-total .position-figures { border-top: 0; padding-top: 0; }
.capital-total .figure dd { font-size: 16px; font-weight: 600; }
.capital-total .figure dd small { font-weight: 400; }

/* ------------------------------------------------------------- panels */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--e4) 18px 18px;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  min-width: 0;
}
/* La tabla de operaciones tiene once columnas: con `overflow: hidden` a secas,
   en una ventana estrecha las últimas se recortaban sin forma de llegar a
   ellas. Se desplaza dentro del panel, nunca desplazando la página entera. */
.panel-flush { padding: 0; overflow-x: auto; }
.panel-flush .data { margin: 0; }

.panel-head { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; justify-content: space-between; }
.panel-head h2 { font-size: 15px; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.panel-hint { font-size: 12.5px; color: var(--ink-faint); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--gap);
  align-items: start;
}

.table-wrap { overflow-x: auto; }

/* ------------------------------------------------------------- charts */

.chart { width: 100%; min-height: 0; }
.chart-equity { height: 280px; }
.chart-detail { height: 440px; }
.chart-market { height: 520px; }

.chart-toolbars { display: flex; flex-direction: column; gap: var(--e2); }

.toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toolbar-chart, .toolbar-overlays {
  padding: var(--e2) 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  gap: var(--e3);
}
.toolbar-note { font: 12px/1 var(--mono); color: var(--ink-faint); }
.manual-range { display: inline-flex; align-items: center; gap: 6px; }
.manual-range[hidden] { display: none; }

.toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font: 12px/1 var(--mono); color: var(--ink);
  cursor: pointer; user-select: none;
}
.toggle input { width: 13px; height: 13px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.toggle-note {
  font: 10px/1 var(--mono); color: var(--ink-faint);
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px;
}
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.legend { display: flex; gap: 14px; font: 12px/1 var(--mono); color: var(--ink-dim); }
.legend-dot { display: inline-block; width: 8px; height: 2px; margin-right: 5px; }
.legend-dot.entry { background: var(--ink-dim); }
.legend-dot.exit { background: var(--brand); }

/* --------------------------------------------------------- day bars */

.daybars { display: flex; align-items: flex-end; gap: 3px; height: 92px; padding-top: 6px; }
/* Con pocos días la barra lleva su importe encima y su fecha debajo: la cifra
   escondida en un tooltip no existe en un móvil ni en una captura. */
.daybars-detalle { height: auto; gap: var(--e3); align-items: stretch; }
.daycol { display: flex; flex-direction: column; align-items: center; gap: 4px;
          flex: 0 1 78px; cursor: help; }
.daycol-val { font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums;
              color: var(--ink-dim); }
.daycol.pos .daycol-val { color: var(--gain); }
.daycol.neg .daycol-val { color: var(--loss); }
.daycol-dia { font: 400 11px/1 var(--mono); color: var(--ink-faint); }
.daybars-detalle .daybar { height: 84px; width: 100%;
                           border-bottom: 1px solid var(--border); }
.daybar { flex: 1 1 auto; min-width: 4px; max-width: 26px; height: 100%; display: flex; align-items: flex-end; cursor: help; }
.daybar-fill { display: block; width: 100%; border-radius: 2px; background: var(--ink-faint); }
.daybar.pos .daybar-fill { background: var(--gain); }
.daybar.neg .daybar-fill { background: var(--loss); }

/* -------------------------------------------------------------- stats */

.stats { display: flex; flex-wrap: wrap; gap: 10px; }
.stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e2) 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 118px;
}
.stat-label { font: 500 12px/1 var(--sans); color: var(--ink-faint); }
.stat-value { font: 600 16px/1.3 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- tables */

table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left;
  font: 600 12px/1 var(--sans);
  color: var(--ink-faint);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky; top: 0;
  background: var(--surface);
}
table.data td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.data td.right, table.data th.right, table.data td.num { text-align: right; }
table.data td.num { font-family: var(--mono); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr.clickable { cursor: pointer; }
table.data tbody tr.clickable:hover { background: var(--surface-2); }
table.data tbody tr.row-win td:last-child { color: var(--gain); }
table.data tbody tr.row-loss td:last-child { color: var(--loss); }
table.indicators td.muted { white-space: normal; }

/* Calendario macro: lo que ocurre en menos de 24 h se destaca */
.row-urgente { background: var(--plazo-bg); }
.row-urgente td { font-weight: 600; }
td.warn { color: var(--plazo); }

/* -------------------------------------------------------------- empty */

.empty {
  padding: 30px 22px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--ink-dim);
}
.empty-title { color: var(--ink); font-weight: 700; margin-bottom: 6px; }
.empty-detail { font-size: 13.5px; max-width: 60ch; margin: 0 auto; line-height: 1.6; }

/* ------------------------------------------------------------- detail */

.detail-head { align-items: center; }
.detail-head .back { flex-basis: 100%; text-align: left; }
.detail-title { flex: 1; min-width: 260px; }
.detail-result { text-align: right; }
.detail-pnl { font: 700 32px/1.1 var(--mono); font-variant-numeric: tabular-nums;
              letter-spacing: -0.03em; color: var(--ink); }
.detail-pnl-sub { font-size: 12px; color: var(--ink-dim); }

.why { display: flex; flex-direction: column; gap: 10px; }
.why-line { font-size: 13.5px; color: var(--ink-soft); }
.why-line strong { color: var(--ink); }
.why-line.ok { border-left: 3px solid var(--gain); padding-left: 10px; }
.why-line.warn { border-left: 3px solid var(--plazo); padding-left: 10px; }

.fields { display: flex; flex-direction: column; }
.field-row { display: flex; justify-content: space-between; gap: var(--e4); padding: var(--e2) 0; border-bottom: 1px solid var(--border-soft); }
.field-row:last-child { border-bottom: 0; }
.field-row-label { color: var(--ink-dim); font-size: 13px; }
.field-row-value { font: 600 14px/1.4 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }

/* ----------------------------------------------------------- eventos */

.events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.events li { display: flex; gap: var(--e3); padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; flex-wrap: wrap; }
.event-ts { font: 12px/1.5 var(--mono); color: var(--ink-faint); white-space: nowrap; }
.event-kind { color: var(--brand); font-weight: 600; white-space: nowrap; }

/* ACTIVIDAD — tres familias en vez de treinta filtros de un solo uso.
   Cada botón es una pregunta ("¿qué decidió?", "¿ha ido algo mal?"), no una
   etiqueta del motor, y lleva su recuento dentro: así se ve de un vistazo que
   el 95% del diario son velas. */
.familias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e2);
  margin-bottom: var(--e3);
}
.familia {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  cursor: pointer;
  color: var(--ink-dim);
}
.familia:hover { border-color: var(--ink-faint); color: var(--ink); }
.familia.on {
  border-color: var(--ink);
  background: var(--surface-2);
  color: var(--ink);
}
.familia-titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2);
  font: 600 14px/1.2 var(--sans);
}
.familia-n {
  font: 600 13px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.familia.on .familia-n { color: var(--ink); }
.familia-pista { font: 400 11.5px/1.35 var(--sans); color: var(--ink-faint); }

.actividad-controles {
  display: flex; align-items: center; gap: var(--e2);
  margin-bottom: var(--e3);
}

.chips { display: flex; gap: var(--e2); flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-dim);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font: 600 12px/1.3 var(--sans);
  cursor: pointer;
}
.chip:hover { color: var(--ink); }
.chip.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* ------------------------------------------------------------ posiciones */

.positions-list { display: flex; flex-direction: column; gap: 10px; }

/* Ficha de posición: cabecera (qué es y cómo va) + rejilla de cifras. Antes
   era una sola fila `flex-wrap` y al no caber cada dato saltaba donde podía,
   dejando el bloque descuadrado y sin poder comparar dos posiciones. */
.position-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: var(--e3) 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.position-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.position-market { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.position-sleeve { color: var(--ink-dim); font-size: 13px; }
/* Empuja el resultado y el botón a la derecha sin usar space-between, que
   repartía huecos entre TODOS los elementos. */
.position-spacer { flex: 1 1 auto; }
.position-pnl {
  display: flex; align-items: baseline; gap: var(--e2);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.position-pnl-pct { font-size: 12.5px; opacity: 0.85; }

/* auto-fit: las columnas cuadran entre fichas, así "tu dinero" de una queda
   encima de "tu dinero" de la siguiente. */
.position-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px 18px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.figure { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.figure dt { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.figure dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums;
             font-family: var(--mono); }
.figure dd small { color: var(--ink-dim); font-size: 11.5px; margin-left: 5px;
                   font-family: var(--sans); }

/* Lado de la operación. Compra y venta llevan color de DIRECCIÓN, no de
   resultado; `cerrar` no es ni una cosa ni la otra: es salir. */
.position-side {
  font: 700 11px/1 var(--sans);
  padding: 4px var(--e2);
  border-radius: var(--radius-sm);
}
.position-side.long { background: var(--gain-bg); color: var(--gain); }
.position-side.short { background: var(--loss-bg); color: var(--loss); }
.position-side.cerrar { background: var(--surface-sunken); color: var(--ink-dim); }

.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn-primary:hover { color: var(--brand-ink); background: var(--brand); filter: brightness(1.06); border-color: var(--brand); }
.btn-danger { background: var(--loss-bg); color: var(--loss); border-color: var(--loss); }
.btn-danger:hover { background: var(--loss); color: #fff; border-color: var(--loss); }

/* Dónde está el precio entre el stop y el objetivo. Lo primero que se mira en
   una posición abierta, y lo único que la ficha no decía. */
.recorrido { margin-top: 10px; }
.recorrido-barra {
  position: relative; height: 6px; border-radius: 3px;
  background: var(--surface-sunken);
  overflow: visible;
}
.recorrido-zona-perdida {
  position: absolute; top: 0; height: 100%;
  background: var(--loss-bg); border-radius: 3px;
}
.recorrido-entrada {
  position: absolute; top: -3px; width: 1px; height: 12px;
  background: var(--ink-faint); transform: translateX(-0.5px);
}
.recorrido-ahora {
  position: absolute; top: -3px; width: 10px; height: 12px;
  border-radius: 2px; transform: translateX(-5px);
  background: var(--ink); border: 1px solid var(--surface);
}
.recorrido-ahora.pos, .recorrido-ahora.gain { background: var(--gain); }
.recorrido-ahora.neg, .recorrido-ahora.loss { background: var(--loss); }
.recorrido-pie {
  margin: 6px 0 0; font-size: 12px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- comparativa de carteras */

.chart-pnl { height: 240px; }

.sleeve-legend { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 2px; }
.sleeve-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.sleeve-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* La referencia (grupo de control) no solo cambia de color: la línea es
   discontinua, así que la diferencia no depende solo de ver bien el color. */
.sleeve-dot.dashed { width: 16px; height: 0; border-top: 2px dashed; border-radius: 0; background: none !important; }
.sleeve-legend-label { color: var(--ink); font-weight: 600; }
.sleeve-legend-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.sleeve-legend-usd { font-variant-numeric: tabular-nums; font-size: 12px; }

/* --------------------------------------------------------------- diálogos */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(9, 12, 11, 0.55);
}
.modal {
  width: min(460px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-danger { box-shadow: 0 0 0 1.5px var(--loss), var(--shadow-lift); }
.modal-title { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.modal-danger .modal-title { color: var(--loss); }
.modal-body { display: flex; flex-direction: column; gap: 11px; }
.modal-text { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
/* :not() para no ganarle la especificidad a .pos/.neg cuando el <strong> es
   una cifra de PnL: ahí el color del signo manda, no el neutro por defecto. */
.modal-text strong:not(.pos):not(.neg) { color: var(--ink); }
.modal-note { font-size: 12.5px; color: var(--ink-dim); margin: 0; }
.modal-total { font-size: 14px; color: var(--ink); margin: 0; }
.modal-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 200px; overflow-y: auto;
  padding: 4px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.modal-list-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e3);
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.modal-list-row:last-child { border-bottom: 0; }
.modal-field { display: flex; flex-direction: column; gap: 6px; }
.modal-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: 700 16px/1.3 var(--mono);
  letter-spacing: 0.04em;
  background: var(--surface);
  color: var(--ink);
}
.modal-input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; }
.modal-motivo {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--e2) 10px;
  font: 14px/1.5 var(--sans);
  background: var(--surface); color: var(--ink);
  resize: vertical; min-height: 4.5em;
}
.modal-motivo:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------------------------------------------------------------- avisos */

.toasts {
  position: fixed; right: var(--e4); bottom: var(--e4); z-index: 200;
  display: flex; flex-direction: column; gap: var(--e2);
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
}
.toast.ok { border-color: var(--gain); }
.toast.bad { border-color: var(--loss); }
.toast-close {
  background: none; border: 0; color: var(--ink-faint); cursor: pointer;
  padding: 0; font-size: 11px; line-height: 1.4; margin-left: auto; flex: none;
}
.toast-close:hover { color: var(--ink); }

/* ---------------------------------------------------- control y emergencia */

/* Aviso persistente en la cabecera: pánico activo o cierres a la espera de
   la próxima vela. Solo aparece cuando hay algo que contar. */
.control-banner {
  display: flex; align-items: center; gap: 9px;
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font: 600 13px/1.3 var(--sans);
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--loss);
  background: var(--loss-bg);
  color: var(--loss);
}
.control-banner[hidden] { display: none; }
.control-banner.warn { border-color: var(--plazo); background: var(--plazo-bg); color: var(--plazo); }
.control-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* El botón de pánico vive en su propia zona, aparte de las acciones
   frecuentes (cerrar una posición, cambiar filtros): hay que bajar hasta
   aquí a propósito, pero sigue en la primera pantalla para encontrarlo
   rápido si hace falta. */
.panel-danger {
  border: 1px dashed var(--loss);
  background: color-mix(in srgb, var(--loss) 5%, var(--surface));
}
.panel-danger .panel-head h2 { color: var(--loss); }
.btn-panic { align-self: flex-start; padding: 9px 18px; }

/* ------------------------------------------------------------ insights */
/* Fila de avisos de contexto en Resumen: cuándo es el próximo evento macro
   y cuánto reparte de verdad tu diversificación. Ninguno da una orden — son
   instrumentos de lectura. */

.insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.insight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.insight-card.warn { border-color: color-mix(in srgb, var(--plazo) 45%, var(--border));
                     background: var(--plazo-bg); }
.insight-card.ok {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
  background: var(--brand-bg);
}

.insight-label { font: 600 12px/1 var(--sans); color: var(--ink-faint); }
.insight-value {
  font: 600 20px/1.3 var(--mono);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.insight-sub { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }
.insight-sub strong { color: var(--ink); font-weight: 600; }
.insight-foot { font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }

.insight-bar {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
  margin: 2px 0;
}
.insight-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--brand);
}
.insight-bar-fill.warn { background: var(--plazo); }
.insight-bar-fill.ok { background: var(--gain); }

/* Aviso al pie de un panel: recuerda qué NO es lo que se está mostrando */
.panel-nota { margin: var(--e2) 0 0; font-size: 12.5px; color: var(--ink-dim); }

/* ======================================================== DINERO REAL ====

   La primera versión era una franja roja gruesa con borde en toda la ventana:
   inconfundible, sí, pero gritando. Un aviso que molesta se acaba ignorando, y
   entonces deja de avisar. Se apoya en tres señales discretas y permanentes
   —filo superior, chapa invertida y la palabra— en vez de una alarma. */

.aviso-real {
  position: sticky; top: 0; z-index: 999;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 7px 16px;
  background: var(--surface-2);
  color: var(--ink-dim);
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 3px 0 0 var(--real);      /* filo, no bloque */
}
.aviso-real strong { font-size: 12px; font-weight: 700; color: var(--ink); }
.aviso-real strong::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  margin-right: 7px; border-radius: 50%; background: var(--real);
  vertical-align: middle;
}

/* La chapa: el ÚNICO sitio del panel con tinta invertida. Ni las ganancias ni
   las pérdidas se pintan así, de modo que no puede confundirse con ninguna. */
.badge-real {
  background: var(--real);
  color: var(--real-ink);
  border-color: var(--real);
}
.badge-real .badge-paper-dot { background: currentColor; }

.aviso-sin-alertas {
  margin-left: auto; padding: 2px var(--e2); border-radius: var(--radius-pill);
  background: var(--plazo-bg); color: var(--plazo);
  font-size: 11.5px; cursor: help;
}

/* ==================================================== VISTA DE SEÑALES ====

   Cuatro zonas con MATERIAL distinto, no cuatro tarjetas iguales:
     1. .mesa        — donde se decide. Fondo hundido, filo de dinero real.
     2. .registro    — lo que ha dicho el analista. Sin tarjeta, cronológico.
     3. .contado     — tu dinero al contado. Una tira compacta.
     4. .herramientas— plegado: útil, pero no es a lo que se viene.
   ------------------------------------------------------------------------ */

/* ---- 1. la mesa de decisión ---- */

.mesa {
  display: flex; flex-direction: column; gap: var(--e4);
  padding: var(--e4) var(--e4) 20px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-top: 3px solid var(--real);
  border-radius: var(--radius-lg);
}
/* En papel no hay dinero que perder: el filo desaparece en vez de mentir. */
.mesa.mesa-papel { border-top-color: var(--border); }

.mesa-cab { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.mesa-cab h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.mesa-cab .panel-hint { flex-basis: 100%; color: var(--ink-dim); }

/* ---- la pregunta al analista ---- */

.pregunta {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e3) 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.pregunta-fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pregunta-fila-2 { gap: var(--e2) 10px; }
.pregunta-sep {
  color: var(--ink-faint); font-size: 12.5px;
  flex-basis: 100%; margin-top: -2px;
}
/* CUÁNDO PREGUNTA SOLO. Va debajo del botón porque responde a la pregunta que
   se hace justo antes de pulsarlo: ¿espero o lo pido yo? La cuenta atrás en
   mono y tabular para que no baile mientras corre. */
.auto {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--border);
}
.auto-titulo {
  display: block;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7px;
}
.auto-lista { list-style: none; margin: 0; padding: 0;
              display: flex; flex-direction: column; gap: 4px; }
.auto-fila {
  display: flex; align-items: baseline; gap: var(--e2);
  font-size: 12.5px; color: var(--ink-dim);
}
.auto-clase { min-width: 68px; color: var(--ink); font-weight: 600; }
.auto-cuenta {
  font: 600 13px/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.auto-que { color: var(--ink-faint); }
.auto-pie { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-faint); }
/* Ámbar SOLO cuando queda poco: es el mismo código que avisa de un plazo que
   se acaba en el resto del panel, y ahí gana su significado. */
.auto-fila.inminente .auto-cuenta { color: var(--plazo); }

.pregunta-pie { font-size: 12.5px; color: var(--ink-dim); }
.pregunta-pie strong { color: var(--ink); font-weight: 600; }

.btn-pedir {
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font: 700 14px/1.2 var(--sans);
  cursor: pointer;
}
.btn-pedir:hover { filter: brightness(1.15); }
.btn-pedir[disabled] { opacity: 0.45; cursor: not-allowed; }

/* La casilla de noticias es un MODIFICADOR de la misma pregunta, no otra
   pregunta: dos botones que solo se diferencian en eso escondían la jerarquía
   (y hacían pensar que eran dos consultas distintas). */
.pregunta-noticias {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-soft); cursor: pointer; user-select: none;
}
/* El desplegable del "opinar sobre": con 18 mercados, sin ancho mínimo se
   encogía hasta no dejar leer el que estaba elegido. */
.sel-mercado { min-width: 15ch; }

.pregunta-noticias input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }

/* ---- el cartel de espera (2-5 minutos) ---- */

/* Sustituye a los botones, no los deshabilita: mientras hay una consulta en
   vuelo NO EXISTE con qué lanzar otra. Deshabilitar dejaba cuatro botones
   grises que parecían un error de la página. */
.espera {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px var(--e4);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--plazo) 40%, var(--border));
  border-radius: var(--radius-md);
}
.espera-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.espera-que { font-weight: 700; font-size: 14px; color: var(--ink); }
.espera-punto {
  width: 9px; height: 9px; border-radius: 50%; background: var(--plazo);
  flex: none; align-self: center;
  animation: latido 1.6s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}
.espera-reloj {
  margin-left: auto;
  font: 600 19px/1 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; color: var(--ink);
}
.espera-barra {
  height: 4px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); overflow: hidden;
}
.espera-barra-fill {
  display: block; height: 100%; background: var(--plazo);
  border-radius: var(--radius-pill);
  transition: width 1s linear;
}
.espera-nota { font-size: 12.5px; color: var(--ink-dim); line-height: 1.55; max-width: 62ch; }
.espera-nota strong { color: var(--ink); font-weight: 600; }
.espera-salida {
  margin: 0; font: 12px/1.5 var(--mono); color: var(--ink-dim);
  max-height: 8em; overflow-y: auto; overflow-wrap: anywhere;
  padding: var(--e2) 10px; background: var(--surface-2); border-radius: var(--radius-sm);
}

/* ---- 1b. el expediente: una propuesta esperando tu decisión ---- */

.dossiers { display: flex; flex-direction: column; gap: var(--e3); }

.dossier {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4) var(--e4) 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}

.dossier-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dossier-mercado {
  font: 700 19px/1 var(--sans); letter-spacing: -0.02em; color: var(--ink);
}
.dossier-cuando { font-size: 12.5px; color: var(--ink-faint); }

/* El plazo: lo único ámbar de la página, y lo único que se mueve. */
.dossier-plazo {
  margin-left: auto; text-align: right;
  display: flex; flex-direction: column; gap: 1px; align-items: flex-end;
}
.dossier-reloj {
  font: 700 27px/1 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em; color: var(--ink-dim);
}
.dossier-reloj.corriendo { color: var(--plazo); }
.dossier-reloj.ultimo { color: var(--loss); }
.dossier-plazo-que { font-size: 11.5px; color: var(--ink-faint); max-width: 22ch; }

/* EL HÉROE de la página: la frase del analista, en su cara de lectura. Un
   panel financiero cuyo elemento principal es una FRASE, no una cifra. */
.dossier-claim {
  font: 400 21px/1.38 var(--serif);
  color: var(--ink);
  max-width: 42ch;
  letter-spacing: -0.005em;
}

/* La regla de precios: dónde está el precio entre el stop y el objetivo.
   Marcas y números, NO una barra que se llena — una barra llenándose hacia el
   objetivo insinuaría un progreso que nadie ha hecho. */
.regla { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.regla-linea {
  position: relative; height: 22px;
  border-bottom: 1px solid var(--border);
}
.regla-tramo {
  position: absolute; bottom: 0; height: 5px; border-radius: 2px;
}
.regla-tramo.perdida { background: var(--loss-bg); }
.regla-tramo.ganancia { background: var(--gain-bg); }
.regla-tick {
  position: absolute; bottom: 0; width: 1px; height: 11px;
  background: var(--ink-faint); transform: translateX(-0.5px);
}
.regla-tick.stop { background: var(--loss); height: 15px; }
.regla-tick.objetivo { background: var(--gain); height: 15px; }
.regla-tick.entrada { background: var(--ink); height: 15px; }
/* El precio de AHORA: es el dato que decide si la propuesta sigue en pie, así
   que es la marca más gruesa de la regla y la única redonda. */
.regla-ahora {
  position: absolute; bottom: -5px; width: 13px; height: 13px;
  border-radius: 50%; transform: translateX(-6.5px);
  background: var(--ink); border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--ink);
}
.regla-ahora-nota {
  position: absolute; top: -2px; transform: translateX(-50%);
  font: 11px/1 var(--sans); color: var(--ink-dim); white-space: nowrap;
}
.regla-numeros {
  display: flex; justify-content: space-between; gap: 10px;
  font: 12px/1.35 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}
.regla-numeros b { display: block; font-weight: 600; color: var(--ink); }
.regla-numeros .stop b { color: var(--loss); }
.regla-numeros .objetivo b { color: var(--gain); }
/* La alineación va por POSICIÓN en la regla, no por qué nivel sea: en una
   venta el stop está a la derecha y el objetivo a la izquierda, y fijarlos
   siempre igual pondría los números encima de la marca equivocada. */
.regla-numeros > span { min-width: 0; }
.regla-numeros .n-izq { text-align: left; }
.regla-numeros .n-cen { text-align: center; }
.regla-numeros .n-der { text-align: right; }

/* Las cifras de apoyo: ATR, deriva, confianza. Secundarias por tamaño, no por
   estar escondidas. */
.dossier-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--e2) 18px; margin: 0;
  padding-top: var(--e3); border-top: 1px solid var(--border-soft);
}
.dossier-datos div { min-width: 0; }
.dossier-datos dt { font-size: 11.5px; color: var(--ink-faint); }
.dossier-datos dd {
  margin: 1px 0 0; font: 600 14px/1.3 var(--mono);
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.dossier-datos dd small { font: 400 11.5px/1 var(--sans); color: var(--ink-dim);
                          margin-left: 5px; white-space: nowrap; }

/* La resolución. Ninguno de los dos botones es verde: uno manda dinero real y
   el otro no, y eso no es "bien" contra "mal". El peso lo da la tinta llena. */
.dossier-acciones { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 2px; }
.btn-ejecutar {
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 11px 22px; font: 700 14px/1.2 var(--sans); cursor: pointer;
}
.btn-ejecutar:hover { filter: brightness(1.15); }
.btn-vetar {
  background: none; color: var(--ink-soft); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 18px; font: 600 14px/1.2 var(--sans); cursor: pointer;
}
.btn-vetar:hover { border-color: var(--ink-faint); background: var(--surface-2); }
.btn-ejecutar[disabled], .btn-vetar[disabled] { opacity: 0.45; cursor: wait; }
.dossier-consecuencia { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }

/* ---- la tesis: 1.500-3.000 caracteres del analista ---- */

.tesis { border-top: 1px solid var(--border-soft); padding-top: var(--e3); }
.tesis-boton {
  background: none; border: 0; padding: 0;
  color: var(--brand); font: 600 13px/1.3 var(--sans); cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.tesis-boton:hover { text-decoration: underline; }
.tesis-boton .tesis-largo { color: var(--ink-faint); font-weight: 400; font-size: 12px; }
.tesis-texto {
  margin: var(--e3) 0 0;
  font: 15.5px/1.72 var(--serif);
  color: var(--ink-soft);
  max-width: 68ch;                 /* medida de lectura, no la del monitor */
  overflow-wrap: anywhere;
  white-space: pre-line;
  /* Un muro de 3.000 caracteres tapaba la pantalla entera: se lee con su
     propio scroll y el botón de decidir nunca se va de sitio. */
  max-height: 46vh;
  overflow-y: auto;
  padding-right: var(--e2);
}
.tesis-texto[hidden] { display: none; }

/* Gráficos de una decisión (los usa también la vista "por qué"). */
.ai-chart-caja {
  margin: 0; padding-top: var(--e3);
  border-top: 1px solid var(--border-soft);
}
.ai-chart-titulo {
  margin: 0 0 6px; font-size: 12px; color: var(--ink-faint);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ai-chart { width: 100%; height: 260px; }
.ai-chart-5m { height: 180px; }
.ai-chart-caja .panel-hint {
  margin: 6px 0 0; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .ai-chart { height: 200px; }
  .ai-chart-5m { height: 150px; }
}

/* ---- 2. el registro del analista ---- */

/* Una consulta y las propuestas que salieron de ella son LA MISMA cosa: el
   panel las enseñaba en dos bloques distintos y el mismo texto salía dos
   veces. Aquí cada entrada es "tal día el analista miró el mercado, dijo esto
   y propuso aquello". */
.registro { display: flex; flex-direction: column; }

.registro-entrada {
  display: flex; flex-direction: column; gap: var(--e2);
  padding: 14px 0 var(--e4) var(--e4);
  border-left: 2px solid var(--border);
  position: relative;
}
.registro-entrada::before {
  content: ''; position: absolute; left: -5px; top: 20px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); border: 2px solid var(--bg);
}
/* Una consulta que SÍ propuso algo lleva el punto en tinta: distingue de un
   vistazo los días en que el analista se abstuvo, que son la mitad del dato. */
.registro-entrada.propuso { border-left-color: var(--ink-faint); }
.registro-entrada.propuso::before { background: var(--brand); }
.registro-entrada:last-child { border-left-color: transparent; padding-bottom: 0; }

.registro-cab {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-faint);
}
.registro-cuando { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.registro-clase { font-weight: 700; color: var(--ink); font-size: 13px; }
.registro-veredicto { color: var(--ink-dim); }
.registro-veredicto.propuso { color: var(--brand); font-weight: 600; }

/* El repaso en cristiano: lo primero que se lee de una consulta. */
.registro-facil {
  margin: 0; font: 15px/1.6 var(--serif); color: var(--ink);
  max-width: 68ch; white-space: pre-line;
}

/* "Ver las N anteriores" no es una entrada del registro: no lleva punto ni
   filo, o parecería una consulta más. */
.registro-mas { padding: var(--e3) 0 0 var(--e4); }
.registro-mas .btn { width: 100%; padding: 10px 12px; }

.registro-facil-caja { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

.registro-props { display: flex; flex-direction: column; gap: var(--e2); margin-top: 2px; }

/* Una propuesta ya resuelta: fila compacta que se abre a la ficha entera. */
.registro-prop {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px var(--e3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.registro-prop-cab { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.registro-prop-linea {
  font: 15px/1.5 var(--serif); color: var(--ink-soft); max-width: 68ch;
}
.registro-prop-geo {
  font: 12px/1.4 var(--mono); color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.registro-prop-mas { display: flex; gap: 14px; flex-wrap: wrap; }

.chip-estado {
  font: 600 11.5px/1 var(--sans);
  padding: 4px var(--e2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--ink-dim);
  white-space: nowrap;
}
.chip-estado.warn { background: var(--plazo-bg); color: var(--plazo); }
.chip-estado.ok { background: var(--gain-bg); color: var(--gain); }

/* ---- 3. tu capital al contado ---- */

/* Era una rejilla de cuatro tarjetas con aguja, del mismo tamaño que la zona de
   decisión. No lo es: el bot no lo opera, es un aviso. Una tira de cuatro
   filas dice exactamente lo mismo ocupando un cuarto. */
.contado { display: flex; flex-direction: column; }
.contado-fila {
  display: grid;
  grid-template-columns: 4.5ch minmax(0, 1fr) auto;
  align-items: center; gap: 10px var(--e3);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.contado-fila:last-child { border-bottom: 0; }
.contado-market { font: 700 14px/1 var(--sans); color: var(--ink); }
.contado-estado {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12.5px/1 var(--sans);
}
.contado-estado.verde { color: var(--gain); }
.contado-estado.rojo { color: var(--loss); }
.contado-precio {
  font: 600 14px/1.2 var(--mono); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--ink);
}
.contado-detalle {
  grid-column: 2 / -1; font-size: 12px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
/* La aguja: pequeña, al lado de su fila, no un instrumento aparte. */
.contado-aguja {
  grid-column: 2 / -1;
  position: relative; height: 5px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); overflow: hidden;
}
.contado-aguja-fill { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill); }
.contado-aguja-fill.verde { background: var(--gain); }
.contado-aguja-fill.rojo { background: var(--loss); }
.contado-aguja-mid { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border); }

/* ---- 4. herramientas, plegadas ---- */

.herramientas { border-top: 1px solid var(--border); padding-top: var(--e3); }
.herramientas > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 10px;
  font: 700 15px/1.4 var(--sans); color: var(--ink);
}
.herramientas > summary::-webkit-details-marker { display: none; }
.herramientas > summary::before {
  content: '▸'; color: var(--ink-faint); font-size: 11px;
}
.herramientas[open] > summary::before { content: '▾'; }
.herramientas > summary span { font: 400 12.5px/1.4 var(--sans); color: var(--ink-faint); }
.herramientas-cuerpo {
  display: flex; flex-direction: column; gap: var(--gap); margin-top: var(--e4);
}

/* --------------------------------------------------------- calculadora */

.calc-form { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.calc-form .field { flex-direction: column; align-items: flex-start; gap: 5px; }
.calc-form input.num { width: 12ch; }
.calc-stats { min-height: 32px; }

.calc-avisos { display: flex; flex-direction: column; gap: var(--e2); }
.calc-alert {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--plazo) 45%, var(--border));
  background: var(--plazo-bg);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}
.calc-alert strong { color: var(--plazo); }
.calc-alert.bad { border-color: var(--loss); background: var(--loss-bg); }
.calc-alert.bad strong { color: var(--loss); }

/* --------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .hero { padding: 20px; }
  .hero-side { text-align: left; align-items: flex-start; }
  .detail-result { text-align: left; }
}

@media (max-width: 680px) {
  #topbar { padding: 10px 14px var(--e2); }
  .topbar-row-nav { flex-wrap: nowrap; }
  #source-picker { display: none; }
  .view { padding: var(--e4) 14px 88px; }

  /* Barra inferior fija: se consulta con el pulgar. */
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; justify-content: space-around; gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
  .tab { flex: 1; padding: var(--e2) 2px; text-align: center; border-radius: var(--radius-sm); font-size: 11.5px; }
  .chip-health-sub { display: none; }

  /* La barra de pestañas queda fija abajo: los avisos no pueden tapiarla. */
  .toasts { right: var(--e3); left: var(--e3); bottom: calc(70px + env(safe-area-inset-bottom)); max-width: none; }

  /* La mesa pierde el marco lateral y gana la pantalla: en el móvil el hueco
     de 14px a cada lado valía más como texto legible que como borde. */
  .mesa { margin: 0 -14px; border-radius: 0; border-left: 0; border-right: 0;
          padding: var(--e3) 14px 18px; }
  .dossier { padding: var(--e3) 14px var(--e4); }
  .dossier-claim { font-size: 19px; }
  .dossier-reloj { font-size: 24px; }
  .dossier-acciones { gap: var(--e2); }
  /* Con el pulgar: los dos botones a lo ancho, y el de vetar no puede quedar
     debajo del borde de la pantalla. */
  .btn-ejecutar, .btn-vetar { flex: 1 1 45%; padding: 13px 12px; }
  .registro-entrada { padding-left: var(--e3); }
  .tesis-texto { max-height: 60vh; }
}

/* Realizado y latente bajo la cifra grande. Dos medidas distintas, no una
   suma: lo cerrado ya no se puede perder, lo abierto puede darse la vuelta. */
.hero-pnl {
  display: flex; flex-wrap: wrap; gap: 4px 28px;
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.pnl-parte { display: flex; flex-direction: column; gap: 1px; }
.pnl-parte-label {
  font: 500 11.5px/1 var(--sans); color: var(--ink-faint);
  letter-spacing: .01em;
}
.pnl-parte-valor { font: 600 19px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.pnl-parte-sub { font: 400 11.5px/1.3 var(--sans); color: var(--ink-faint); }

/* ¿ACIERTA EL ANALISTA? — una pantalla escrita para poder decir NO SÉ.
   Las cifras grandes en mono, y el matiz que las desactiva justo debajo: con
   la muestra de hoy el matiz es más importante que el número. */
.analista-bloque + .analista-bloque { margin-top: var(--gap); }
.analista-bloque h2 { margin: 0 0 2px; }
.analista-bloque .view-sub { margin: 0 0 var(--e3); }
.analista-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e3);
}
.analista-cifra { display: flex; flex-direction: column; gap: 2px; }
.analista-cifra strong {
  font: 600 24px/1.1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.analista-cifra span { font-size: 11.5px; color: var(--ink-faint); line-height: 1.3; }
.analista-cifra.ok strong { color: var(--gain); }
.analista-cifra.warn strong { color: var(--plazo); }
.analista-cifra.pos strong { color: var(--gain); }
.analista-cifra.neg strong { color: var(--loss); }
.analista-veredicto {
  margin: 0 0 var(--e3);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.analista-veredicto strong { color: var(--ink); }
/* El veredicto del preregistro va literal, con sus saltos de línea: es texto
   con umbrales dentro y reflowearlo le quita la forma. */
.analista-preregistro {
  margin: 0;
  padding: var(--e3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font: 400 12px/1.5 var(--mono);
  color: var(--ink-dim);
  white-space: pre-wrap;
  overflow-x: auto;
}