:root {
  /* Superficies, de más honda a más elevada. `fondo2` y `fondo3` faltaban y
     se usaban en 16 reglas: todo lo que las tocaba salía TRANSPARENTE y se
     leía encima del contenido de detrás. El tooltip, la lista lateral, los
     recuadros del plan, la escuela y el buscador. Hay un test que ahora
     impide que vuelva a usarse un color que no existe. */
  --fondo: #0b0e13;
  --panel: #141920;
  --panel2: #1b212a;
  --fondo2: #141920;
  --fondo3: #1b212a;
  --fondo4: #232b36;
  --borde: #262d38;
  --borde2: #333d4c;

  --texto: #e6edf3;
  --suave: #7d8792;
  --tenue: #576270;

  --verde: #26a65b;
  --verde2: #34d17a;
  --verde-fondo: rgba(38,166,91,.14);
  --rojo: #e5484d;
  --rojo2: #ff6b70;
  --rojo-fondo: rgba(229,72,77,.14);
  --ambar: #d9a441;
  --ambar-fondo: rgba(217,164,65,.14);
  --azul: #3b82f6;
  --azul-fondo: rgba(59,130,246,.12);

  --nav: 190px; --wl-ancho: 300px; --wl-lista: 240px;
  --barra: 34px;
  --radio: 8px;
  --sombra: 0 8px 24px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: grid;
  grid-template-columns: var(--nav) 1fr;
  /* Si el navegador no sabe animar la rejilla, el panel salta en vez de
     deslizarse. Se sigue plegando igual: solo se pierde el movimiento. */
  transition: grid-template-columns .18s ease;
  /* La barra de avisos es una FILA de verdad, no un elemento flotante con
     relleno compensatorio: así es imposible que tape nada. */
  grid-template-rows: auto 1fr;
  /* ALTURA EXACTA, no "al menos". Con `min-height` el cuerpo crecía y la
     página entera se iba de scroll, así que ninguna vista podía saber cuánto
     alto tenía de verdad. Ahora el alto es el de la pantalla y el scroll vive
     DENTRO de cada zona, que es donde hace falta.
     dvh y no vh porque en Safari `100vh` cuenta la barra del navegador aunque
     esté escondida, y sobraban unos píxeles por abajo. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ---------------------------------------------------------------- nav */

#nav {
  grid-row: 2; grid-column: 1;
  /* Z-INDEX OBLIGATORIO, y no es decorativo. `position: sticky` crea un
     contexto de apilamiento propio, así que el z-index del globito que sale
     al pasar por encima de un icono queda ATRAPADO dentro del menú y no puede
     competir con el contenido de la derecha: el globo salía por debajo del
     gráfico y no se leía. Es el menú entero el que tiene que subir.
     Por debajo de la ficha del glosario (200) y de la capa de arrastre (900):
     esas dos sí tienen que tapar al menú. */
  z-index: 120;
  background: var(--panel);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  position: sticky;
  top: 0;
  height: 100%;
}
.marca {
  font-size: 20px; font-weight: 800; letter-spacing: -.5px;
  padding: 0 18px 18px;
  display: flex; align-items: center; gap: 8px;
}
.marca-txt span {
  display: block; font-size: 11px; font-weight: 500; color: var(--suave);
  letter-spacing: 2px; text-transform: uppercase;
}
#nav-plegar {
  order: 3; margin-left: auto; flex: none;
  background: none; border: 1px solid transparent; color: var(--tenue);
  border-radius: 6px; width: 24px; height: 24px; cursor: pointer;
  font-size: 14px; line-height: 1;
}
#nav-plegar:hover { color: var(--texto); border-color: var(--borde2); }
#nav nav { display: flex; flex-direction: column; }
#nav nav a {
  color: var(--suave); text-decoration: none; padding: 9px 18px;
  border-left: 2px solid transparent; font-weight: 500;
  display: flex; align-items: center; gap: 11px;
}
#nav nav a svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
#nav nav a:hover { color: var(--texto); background: rgba(255,255,255,.03); }
#nav nav a.activo {
  color: var(--texto); border-left-color: var(--azul);
  background: rgba(59,130,246,.08);
}
#nav nav a.activo svg { stroke: var(--azul); }
#nav-pie { margin-top: auto; padding: 14px 18px 0; }
#nav-riesgo { margin-top: 12px; font-size: 12px; }
/* El pulso del margen solo aparece plegado: expandido está el número entero. */
#nav-pulso { display: none; }
#q-icono { display: none; }

/* ------------------------------------------------------- panel plegado */
/* Se contrae a una BARRA DE ICONOS, no a nada: plegado se sigue navegando,
   se sigue buscando y se sigue viendo el color del margen. Un panel que al
   plegarse desaparece obliga a desplegarlo para cada cambio de pantalla, que
   es justo el trabajo que se quería ahorrar. */

html.nav-plegado body { --nav: 54px; }
html.nav-plegado #nav { padding: 16px 0; overflow: visible; }
html.nav-plegado .marca {
  flex-direction: column; gap: 4px; padding: 0 0 14px;
}
html.nav-plegado .marca-txt { display: none; }
html.nav-plegado #nav-plegar { order: 0; margin: 0; }
html.nav-plegado #buscador { padding: 0 0 10px; }
html.nav-plegado #q { display: none; }
html.nav-plegado #q-icono {
  display: block; margin: 0 auto;
  background: none; border: 1px solid transparent; color: var(--suave);
  border-radius: 6px; width: 30px; height: 28px; cursor: pointer; padding: 0;
}
html.nav-plegado #q-icono svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round;
}
html.nav-plegado #q-icono:hover { color: var(--texto); border-color: var(--borde2); }
html.nav-plegado #nav nav a { justify-content: center; padding: 10px 0; }
html.nav-plegado #nav nav a .etq { display: none; }
html.nav-plegado #nav nav a svg { width: 19px; height: 19px; }
html.nav-plegado #nav-pie { padding: 14px 0 0; text-align: center; }
html.nav-plegado #nav-riesgo,
html.nav-plegado #nav-ayuda { display: none; }
html.nav-plegado #estado-conexion {
  font-size: 0; padding: 0; width: 9px; height: 9px; border-radius: 50%;
  margin: 0 auto 8px; border: 0;
}
html.nav-plegado #nav-pulso {
  display: block; width: 6px; height: 34px; border-radius: 3px;
  margin: 0 auto 8px; background: var(--borde2);
}
html.nav-plegado #nav-pulso.verde { background: var(--verde); }
html.nav-plegado #nav-pulso.ambar { background: var(--ambar); }
html.nav-plegado #nav-pulso.rojo  { background: var(--rojo); }
/* Plegado, el nombre de la pantalla vive en el `title`: sin esto un icono
   sin etiqueta es una adivinanza. */
html.nav-plegado #nav nav a::after {
  content: attr(title);
  position: absolute; left: 50px; margin-top: -2px;
  background: var(--panel2); color: var(--texto);
  border: 1px solid var(--borde2); border-radius: 6px;
  padding: 4px 9px; font-size: 12px; white-space: nowrap;
  box-shadow: var(--sombra); opacity: 0; pointer-events: none;
  transition: opacity .12s ease .25s; z-index: 60;
}
html.nav-plegado #nav nav a:hover::after { opacity: 1; }
html.nav-plegado #nav nav a { position: relative; }

/* ------------------------------------------------------------ layout */

/* SITIO EXPLÍCITO, fila Y columna. Sin la columna, cuando la barra de avisos
   estaba oculta la rejilla dejaba libre la casilla de arriba a la izquierda y
   el contenido se colocaba ahí, encima del menú, dejando la mitad derecha en
   negro. La colocación automática no puede decidir el esqueleto. */
#contenido {
  grid-row: 2; grid-column: 2;
  padding: 18px 22px 26px; max-width: 1700px;
  /* En una rejilla, un hijo NO puede encoger por debajo de su contenido sin
     esto, y sin poder encoger no aparece el scroll. */
  min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
/* Las vistas que se comen la pantalla entera: sin tope de ancho, sin relleno
   que sobre y sin scroll de página. El gráfico es la principal — dejar 100px
   muertos abajo en la pantalla donde se mira el precio no tiene defensa. */
#contenido.lleno {
  max-width: none; padding: 12px 14px; overflow: hidden;
}
.cargando { color: var(--suave); padding: 40px; }

.cabecera-vista {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px; gap: 14px; flex-wrap: wrap;
}
.cabecera-vista h1 { font-size: 19px; margin: 0; font-weight: 700; }
.cabecera-vista .meta { color: var(--suave); font-size: 12px; }

.rejilla { display: grid; gap: 12px; }
.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.c3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.c4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ancho { grid-column: 1 / -1; }

.tarjeta {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 8px; padding: 13px 15px;
}
.tarjeta h2 {
  font-size: 11px; margin: 0 0 10px; color: var(--suave);
  text-transform: uppercase; letter-spacing: .8px; font-weight: 700;
}

/* -------------------------------------------------------------- datos */

.dato { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.dato .k { color: var(--suave); }
.dato .v { font-variant-numeric: tabular-nums; font-weight: 600; }

.metrica .n {
  font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.metrica .d { color: var(--suave); font-size: 11.5px; margin-top: 2px; }

.verde { color: var(--verde); } .rojo { color: var(--rojo); }
.ambar { color: var(--ambar); } .suave { color: var(--suave); }
.azul  { color: var(--azul); }

.barra { height: 5px; background: var(--borde); border-radius: 3px;
         overflow: hidden; margin: 7px 0 3px; }
.barra > div { height: 100%; background: var(--azul); transition: width .3s; }
.barra.riesgo > div { background: linear-gradient(90deg, var(--verde), var(--ambar), var(--rojo)); }

.aviso {
  border-left: 3px solid var(--ambar); background: rgba(217,164,65,.09);
  padding: 8px 11px; border-radius: 0 6px 6px 0; margin-top: 9px; font-size: 12.5px;
}
.aviso.malo { border-color: var(--rojo); background: rgba(229,72,77,.1); }
.aviso.bien { border-color: var(--verde); background: rgba(38,166,91,.08); }
.aviso b { color: var(--texto); }

/* ------------------------------------------------------------ tablas */

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  text-align: left; color: var(--suave); font-weight: 600; padding: 6px 7px;
  border-bottom: 1px solid var(--borde); white-space: nowrap;
  position: sticky; top: 0; background: var(--panel); cursor: pointer;
  user-select: none;
}
th:hover { color: var(--texto); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td { padding: 5px 7px; border-bottom: 1px solid rgba(38,45,56,.55); }
tbody tr { cursor: pointer; }
tbody tr:hover { background: rgba(59,130,246,.07); }
tbody tr.sel { background: rgba(59,130,246,.13); }
.tabla-alta { max-height: 620px; overflow: auto; }

.pastilla {
  display: inline-block; padding: 1px 7px; border-radius: 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
}
.pastilla.ok   { background: rgba(38,166,91,.16);  color: var(--verde); }
.pastilla.mal  { background: rgba(229,72,77,.16);  color: var(--rojo); }
.pastilla.duda { background: rgba(217,164,65,.16); color: var(--ambar); }
.pastilla.info { background: rgba(59,130,246,.16); color: var(--azul); }

/* ---------------------------------------------------------- controles */

.controles { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
button, select, input {
  background: var(--panel2); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 6px; padding: 5px 11px; font-size: 12.5px; font-family: inherit;
}
button { cursor: pointer; }
button:hover { border-color: var(--azul); }
button.activo { border-color: var(--azul); color: var(--texto);
                background: rgba(59,130,246,.12); }
button.primario { background: var(--azul); border-color: var(--azul);
                  color: #fff; font-weight: 600; }
button.peligro { border-color: var(--rojo); color: var(--rojo); }
input { width: 100%; }
label { display: block; font-size: 11px; color: var(--suave);
        margin: 8px 0 3px; text-transform: uppercase; letter-spacing: .5px; }

.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chips button { padding: 3px 9px; font-size: 12px; }

/* ---------------------------------------------------------- gráficos */

#grafico-precio { height: 400px; }
#grafico-vol { height: 90px; }
#grafico-osc { height: 130px; }
.leyenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px;
           color: var(--suave); margin-bottom: 6px; }
.leyenda i { display: inline-block; width: 9px; height: 2px; margin-right: 4px;
             vertical-align: middle; }

/* -------------------------------------------------------------- toast */

#avisos { position: fixed; right: 18px; bottom: 18px; display: flex;
          flex-direction: column; gap: 8px; z-index: 50; max-width: 400px; }
.toast {
  background: var(--panel2); border: 1px solid var(--borde);
  border-left: 3px solid var(--azul); border-radius: 6px; padding: 10px 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: 12.5px; white-space: pre-wrap;
}
.toast.ok  { border-left-color: var(--verde); }
.toast.mal { border-left-color: var(--rojo); }

@media (max-width: 820px) {
  body { grid-template-columns: 1fr; }
  #nav { position: static; height: auto; flex-direction: row; align-items: center;
         padding: 8px; overflow-x: auto; }
  #nav nav { flex-direction: row; }
  #nav-pie { margin: 0 0 0 auto; padding: 0 10px; display: flex; gap: 10px; }
  #nav-riesgo { margin: 0; }
  /* En pantalla estrecha el panel YA es una barra horizontal: plegarlo no
     significa nada y plegado tapaba media barra. Se manda la barra. */
  html.nav-plegado body { --nav: 1fr; }
  html.nav-plegado #nav nav a .etq,
  html.nav-plegado .marca-txt,
  html.nav-plegado #q { display: inline; }
  html.nav-plegado #nav-plegar,
  html.nav-plegado #q-icono,
  html.nav-plegado #nav-pulso { display: none; }
  html.nav-plegado .marca { flex-direction: row; }
  html.nav-plegado #nav nav a { justify-content: flex-start; padding: 9px 18px; }
  html.nav-plegado #estado-conexion {
    font-size: 11px; width: auto; height: auto; border-radius: 999px; padding: 2px 8px;
  }
}

/* ------------------------------------------------ buscador (F17) */
#buscador { position: relative; padding: 0 12px 10px; }
#q {
  width: 100%; box-sizing: border-box; padding: 7px 9px;
  background: var(--fondo2); border: 1px solid var(--borde);
  border-radius: 6px; color: var(--texto); font-size: 13px;
}
#q:focus { outline: none; border-color: var(--azul); }
#q::-webkit-search-cancel-button { filter: invert(.5); }
#q-lista {
  display: none; position: absolute; left: 12px; right: 12px; top: 100%;
  z-index: 40; background: var(--fondo2); border: 1px solid var(--borde);
  border-radius: 6px; overflow: hidden; box-shadow: 0 8px 24px #0009;
}
#q-lista.abierta { display: block; }
.q-fila {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
  align-items: center; padding: 7px 10px; cursor: pointer; font-size: 13px;
}
.q-fila.sel, .q-fila:hover { background: var(--fondo3); }
#nav-ayuda { font-size: 11px; margin-top: 10px; line-height: 1.7; }
#nav-ayuda b {
  background: var(--fondo3); border: 1px solid var(--borde);
  border-radius: 4px; padding: 1px 4px; font-weight: 600;
}

/* --------------------------- alarmas: lo que no puede esperar (F17) */
#alarmas {
  position: fixed; top: 12px; right: 12px; z-index: 60;
  width: 380px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; gap: 8px;
}
.alarma {
  background: var(--fondo2); border-left: 4px solid var(--rojo);
  border-radius: 6px; padding: 10px 12px; font-size: 13px;
  box-shadow: 0 6px 20px #000a; line-height: 1.5;
}
.alarma.ambar { border-left-color: var(--ambar); }
.alarma b { color: var(--texto); }
.alarma .d { color: var(--suave); font-size: 12px; margin-top: 4px; }
.alarma a { color: var(--azul); font-size: 12px; display: inline-block;
            margin-top: 6px; }
/* Late despacio: llama la atención sin volverse ruido de fondo. */
.alarma:not(.ambar) { animation: latir 2.4s ease-in-out infinite; }
@keyframes latir {
  0%, 100% { box-shadow: 0 6px 20px #000a; }
  50%      { box-shadow: 0 6px 20px #000a, 0 0 0 2px var(--rojo); }
}
@media (prefers-reduced-motion: reduce) {
  .alarma:not(.ambar) { animation: none; }
}

/* Números que se mueven solos: un destello corto al cambiar. */
.vivo { transition: color .35s; }
.vivo.sube { color: var(--verde); }
.vivo.baja { color: var(--rojo); }

/* ------------------------------------- barra de avisos, arriba (F17b) */
/* EMPUJA, no tapa: el contenido baja lo que ocupa la barra. La versión
   flotante anterior escondía datos y no se podía cerrar. */
#barra-avisos {
  grid-column: 1 / -1; grid-row: 1;
  min-height: var(--barra);
  display: flex; align-items: center; gap: 10px; padding: 0 10px;
  background: linear-gradient(90deg, #3a1416, #241014);
  border-bottom: 1px solid var(--rojo);
  font-size: 13px; color: #ffd9db;
}
#barra-avisos[hidden] { display: none; }
#barra-avisos.ambar {
  background: linear-gradient(90deg, #3a2c10, #241d0f);
  border-bottom-color: var(--ambar); color: #ffeaba;
}
#barra-icono { flex: 0 0 auto; font-size: 14px; }
/* El texto se desplaza solo cuando NO cabe: si siempre se moviera, leerlo
   sería una carrera contra la animación. */
#barra-pista { flex: 1 1 auto; overflow: hidden; white-space: nowrap; }
#barra-texto { display: inline-block; will-change: transform; }
#barra-texto.desplaza { animation: correr 22s linear infinite; }
#barra-texto b { color: #fff; }
@keyframes correr {
  0%   { transform: translateX(0); }
  8%   { transform: translateX(0); }
  92%  { transform: translateX(calc(-100% + 60vw)); }
  100% { transform: translateX(calc(-100% + 60vw)); }
}
@media (prefers-reduced-motion: reduce) {
  #barra-texto.desplaza { animation: none; }
  #barra-pista { overflow-x: auto; }
}
#barra-cuenta { flex: 0 0 auto; color: var(--suave); font-size: 11px; }
#barra-ir {
  flex: 0 0 auto; color: inherit; text-decoration: underline;
  text-underline-offset: 3px; font-size: 12px;
}
#barra-cerrar {
  flex: 0 0 auto; background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 4px 6px; opacity: .65;
}
#barra-cerrar:hover { opacity: 1; }

/* --------------------- columna de oportunidad de compra (F18) */
.op { position: relative; min-width: 92px; height: 18px; }
.op-barra {
  position: absolute; inset: 0 auto 0 0; border-radius: 3px; opacity: .28;
}
.op-barra.verde { background: var(--verde); }
.op-barra.ambar { background: var(--ambar); }
.op-barra.rojo  { background: var(--rojo); }
.op span {
  position: relative; display: block; text-align: right; padding-right: 5px;
  line-height: 18px; font-variant-numeric: tabular-nums; font-weight: 600;
}

/* --------------------- veredicto de compra desglosado (F18) */
.veredicto { display: flex; align-items: center; gap: 14px; }
.veredicto-n { font-size: 40px; font-weight: 700; line-height: 1;
               font-variant-numeric: tabular-nums; }
.veredicto-n small { font-size: 15px; color: var(--suave); font-weight: 400; }
.veredicto-t { font-size: 15px; font-weight: 600; }
.criterio {
  display: grid; grid-template-columns: 90px 1fr 32px; gap: 8px;
  align-items: center; margin-bottom: 7px;
}
.criterio-k { font-size: 12px; text-transform: capitalize; }
.criterio-b { height: 6px; background: var(--fondo3); border-radius: 3px;
              overflow: hidden; }
.criterio-b > div { height: 100%; }
.criterio-b .verde { background: var(--verde); }
.criterio-b .ambar { background: var(--ambar); }
.criterio-b .rojo  { background: var(--rojo); }
.criterio-n { text-align: right; font-size: 12px;
              font-variant-numeric: tabular-nums; }
.criterio-m { grid-column: 1 / -1; font-size: 11px; margin-top: -4px;
              line-height: 1.4; }

/* ------------------------------------- suelos y techos (F23) */
.escuela {
  margin-top: 16px; background: var(--fondo2); border: 1px solid var(--borde);
  border-radius: 8px; padding: 10px 14px;
}
.escuela summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.escuela .d { margin-top: 10px; max-width: 70ch; line-height: 1.65; }
.escuela p { margin: 0 0 10px; }
.escuela ul { margin: 0 0 10px; padding-left: 18px; }
.escuela li { margin-bottom: 5px; }

.nivel {
  background: var(--fondo2); border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: 7px; margin-bottom: 7px;
}
.nivel.comprable { border-left-color: var(--verde); }
.nivel.vigilar   { border-left-color: var(--ambar); }
.nivel.roto      { border-left-color: var(--rojo); }
.nivel-cab {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  flex-wrap: wrap;
}
.nivel-sym { min-width: 150px; }
.nivel-cifras {
  display: flex; gap: 14px; font-size: 12px; margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.nivel-mas {
  background: none; border: 1px solid var(--borde); color: var(--suave);
  border-radius: 5px; padding: 3px 9px; font-size: 11px; cursor: pointer;
}
.nivel-mas:hover { color: var(--texto); border-color: var(--azul); }
.nivel-detalle {
  padding: 0 12px 12px; border-top: 1px solid var(--borde); margin-top: 2px;
  padding-top: 10px;
}
.motivos { margin: 0 0 10px; padding-left: 18px; font-size: 13px;
           line-height: 1.6; }
.plan {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px; background: var(--fondo3); border-radius: 6px; padding: 9px 11px;
  margin-bottom: 10px; font-size: 13px;
}
.niveles-lista {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 8px;
}

/* ------------------------------------- glosario y navegación (F24) */
.glos {
  background: none; border: 0; padding: 0; cursor: help; color: inherit;
  font: inherit; border-bottom: 1px dotted var(--azul);
}
.glos:hover { color: var(--azul); }
#glos-flotante { position: fixed; z-index: 200; width: 330px; max-width: 92vw; }
.glos-ficha {
  background: var(--fondo2); border: 1px solid var(--azul); border-radius: 8px;
  padding: 12px 14px; box-shadow: 0 10px 30px #000b; font-size: 13px;
  line-height: 1.6;
}
.glos-cab { display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 8px; }
.glos-cerrar { background: none; border: 0; color: var(--suave);
               cursor: pointer; font-size: 14px; }
.glos-ficha p { margin: 0 0 7px; }

#atras {
  background: none; border: 1px solid var(--borde); color: var(--suave);
  border-radius: 5px; width: 24px; height: 24px; cursor: pointer;
  margin-right: 8px; font-size: 13px; line-height: 1;
}
#atras:hover:not(:disabled) { color: var(--texto); border-color: var(--azul); }
#atras:disabled { opacity: .3; cursor: default; }

.enlace { cursor: pointer; border-bottom: 1px solid transparent; }
.enlace:hover { color: var(--azul); border-bottom-color: var(--azul); }
th.ordenada { color: var(--azul); }
th[title] { cursor: help; }
tr.sel { background: var(--fondo3); }

/* ------------------------------------- gráfico + watchlist (F25) */
.grafico-pantalla {
  display: grid;
  /* El gráfico nunca baja de 320px por muy ancho que pongas el panel. */
  grid-template-columns: minmax(320px, 1fr) 11px var(--wl-ancho, 300px);
  /* Se ESTIRA hasta abajo en vez de calcular su alto con un número a ojo. El
     `calc(100vh - 100px)` de antes no cuadraba con nada real: ni con el
     relleno, ni con la barra de avisos cuando aparece. */
  flex: 1 1 auto; min-height: 320px;
}
.grafico-pantalla.cerrado { grid-template-columns: 1fr 0 0; }
.grafico-pantalla.cerrado .watchlist,
.grafico-pantalla.cerrado .divisor { display: none; }

/* ------------------------------------------------ el borde que se arrastra */
.divisor {
  position: relative; cursor: col-resize; background: none; border: 0;
  padding: 0; touch-action: none;
}
/* La línea fina que se ve. El agarre es TODO el elemento (11px): una línea de
   2px se falla con el ratón y parece que el arrastre no funciona. */
.divisor::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 1px;
  background: var(--borde); transition: background .12s ease, width .12s ease;
}
.divisor::after {
  content: ""; position: absolute; top: 50%; left: 3px; margin-top: -18px;
  width: 5px; height: 36px; border-radius: 3px; background: var(--borde2);
  transition: background .12s ease;
}
.divisor:hover::before, .divisor.arrastrando::before {
  background: var(--azul); width: 2px; left: 4.5px;
}
.divisor:hover::after, .divisor.arrastrando::after { background: var(--azul); }
.divisor:focus-visible { outline: 2px solid var(--azul); outline-offset: -3px; }
/* El borde HORIZONTAL: reparte el alto entre la lista y la ficha. */
.divisor-h {
  position: relative; cursor: row-resize; background: none; border: 0;
  padding: 0; touch-action: none;
  border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
}
.divisor-h::before {
  content: ""; position: absolute; left: 50%; top: 3px; margin-left: -18px;
  width: 36px; height: 3px; border-radius: 2px; background: var(--borde2);
  transition: background .12s ease, width .12s ease;
}
.divisor-h:hover::before, .divisor-h.arrastrando::before {
  background: var(--azul); width: 52px; margin-left: -26px;
}
.divisor-h:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
/* El cursor correcto DURANTE el arrastre: si la capa se queda con el de
   siempre, arrastrar parece que no está pasando nada. */
body.arrastrando.fila #divisor-capa { cursor: row-resize; }
body.arrastrando.columna #divisor-capa { cursor: col-resize; }

/* Mientras se arrastra, esta capa se pone POR ENCIMA del iframe de
   TradingView. Sin ella el iframe se traga el movimiento del ratón y el
   arrastre se queda enganchado a medias. */
#divisor-capa {
  position: fixed; inset: 0; z-index: 900; cursor: col-resize; display: none;
}
body.arrastrando #divisor-capa { display: block; }
body.arrastrando { user-select: none; -webkit-user-select: none; }

.grafico-zona {
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden;
}
.grafico-barra {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--borde); flex-wrap: wrap;
  background: var(--panel2);
}
.grafico-sym { font-size: 17px; letter-spacing: .2px; }
.grafico-barra .meta { margin-left: auto; }
#wl-toggle, #tv-detalles {
  background: var(--fondo3); border: 1px solid var(--borde);
  color: var(--suave); border-radius: 6px; height: 26px;
  cursor: pointer;
}
#wl-toggle { width: 28px; }
#tv-detalles { padding: 0 9px; font-size: 12px; }
#wl-toggle:hover, #tv-detalles:hover { color: var(--texto); border-color: var(--azul); }
#tv-detalles.activo {
  background: var(--azul-fondo); border-color: var(--azul); color: var(--texto);
}
#tv-grafico { flex: 1 1 auto; min-height: 400px; background: var(--panel); }

.watchlist {
  /* Rejilla de filas para poder REPARTIR el alto: cabecera, lista, el borde
     que se arrastra, ficha y pie. Con flex el reparto lo decidía el navegador;
     así lo decide el dueño. `minmax(0,...)` es obligatorio: sin él los hijos
     no pueden encoger y el scroll de dentro no aparece nunca. */
  display: grid; background: var(--panel);
  grid-template-rows: auto minmax(0, var(--wl-lista, 240px)) 9px minmax(0, 1fr);
  border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden;
}
.wl-cab {
  padding: 6px 8px; border-bottom: 1px solid var(--borde);
  background: var(--panel2);
}
.wl-titulo { display: flex; justify-content: space-between; align-items: baseline;
             font-size: 11.5px; margin-bottom: 4px; }
.wl-resumen {
  display: flex; gap: 8px; font-size: 10.5px; margin-bottom: 5px;
  flex-wrap: wrap;
}
#wl-buscar {
  width: 100%; box-sizing: border-box; padding: 4px 7px; font-size: 12px;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 6px; color: var(--texto);
}
#wl-buscar:focus { outline: none; border-color: var(--azul); }
.wl-orden { margin-top: 5px; }
.wl-orden button { font-size: 10px; padding: 2px 7px; }


.wl-fila {
  display: grid;
  grid-template-columns: 20px minmax(58px, 1fr) 56px auto;
  gap: 6px; align-items: center; padding: 4px 8px; cursor: pointer;
  font-size: 12px; border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.wl-fila:hover { background: var(--fondo3); }
.wl-fila.sel { background: var(--azul-fondo); border-left-color: var(--azul); }
.wl-fila.cartera { border-left-color: var(--azul); }

.wl-logo { position: relative; display: inline-block; flex: 0 0 auto; }
.wl-logo img { border-radius: 50%; display: block; }
.wl-mono {
  display: none; border-radius: 50%; color: #fff; font-weight: 700;
  align-items: center; justify-content: center; letter-spacing: -.3px;
}
.wl-logo img[src=""] + .wl-mono, .wl-mono:only-child { display: flex; }

.wl-sym { font-weight: 600; display: flex; align-items: center; gap: 4px; }
.wl-punto {
  width: 5px; height: 5px; border-radius: 50%; background: var(--azul);
  flex: 0 0 auto;
}
.wl-chispa { display: block; opacity: .85; }
.wl-datos { text-align: right; line-height: 1.25; }
.wl-precio { display: block; font-variant-numeric: tabular-nums; }
.wl-cambio { display: block; font-size: 10.5px;
             font-variant-numeric: tabular-nums; }
@media (max-width: 980px) {
  /* En pantalla estrecha se apilan: ahí no hay bordes que arrastrar, y el
     scroll vuelve a ser de la vista entera porque apilado no cabe. */
  .grafico-pantalla { grid-template-columns: 1fr; flex: none; height: auto; }
  .grafico-pantalla.cerrado { grid-template-columns: 1fr; }
  .divisor, .divisor-h { display: none; }
  #contenido.lleno { overflow-y: auto; }
  .watchlist {
    max-height: 460px;
    grid-template-rows: auto minmax(0, 1fr) 0 minmax(0, 1fr);
  }
}

/* ------------------------------------------------ la ficha del activo (F28) */
/* Va debajo de la lista, dentro del mismo panel. La lista se queda con su
   propio scroll y la ficha con el suyo: si compartieran uno, buscar un activo
   te obligaría a subir por toda la ficha. */
.wl-lista { overflow-y: auto; min-height: 0; }
#wl-ficha { overflow-y: auto; min-height: 0; }
.fi { padding: 8px 9px 4px; }
.fi-vacio { padding: 14px 10px; font-size: 12px; }

.fi-cab-activo { display: flex; align-items: center; gap: 8px; }
.fi-nombre b { font-size: 15px; }
.fi-nombre span { display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .6px; }
.fi-precio { margin-top: 6px; display: flex; align-items: baseline; gap: 5px; }
.fi-precio-num { font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.fi-sub { font-size: 12px; margin-top: 1px; }
.fi-nota { font-size: 10.5px; color: var(--suave); line-height: 1.5;
  margin-top: 6px; }
.fi-nota.ambar { color: var(--ambar); }

.fi-sec { border-top: 1px solid var(--borde); margin-top: 7px; }
.fi-cab {
  width: 100%; display: flex; align-items: center; gap: 6px; padding: 6px 0 4px;
  background: none; border: 0; color: var(--texto); cursor: pointer;
  font-size: 12px; text-align: left;
}
.fi-cab:hover { color: var(--azul); }
.fi-flecha { color: var(--tenue); font-size: 10px; transition: transform .15s; }
.fi-sec.plegada .fi-flecha { transform: rotate(-90deg); }
.fi-sec.plegada .fi-cuerpo { display: none; }

/* Las seis casillas de rendimiento, como en las plataformas de verdad. */
.fi-plazos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.fi-plazo {
  padding: 6px 4px; border-radius: 5px; text-align: center;
  background: var(--fondo3); border: 1px solid var(--borde);
}
.fi-plazo b { display: block; font-size: 12.5px;
  font-variant-numeric: tabular-nums; }
.fi-plazo span { font-size: 9.5px; color: var(--suave);
  text-transform: uppercase; letter-spacing: .5px; }
.fi-plazo.verde { background: var(--verde-fondo); border-color: transparent; }
.fi-plazo.verde b { color: var(--verde2); }
.fi-plazo.rojo { background: var(--rojo-fondo); border-color: transparent; }
.fi-plazo.rojo b { color: var(--rojo2); }
.fi-plazo.vacio b { color: var(--tenue); }

/* La franja del año con el precio marcado dentro. */
.fi-rango-barra {
  position: relative; height: 5px; border-radius: 3px; margin: 8px 0 5px;
  background: linear-gradient(90deg, var(--rojo) 0%, var(--ambar) 50%,
                              var(--verde) 100%);
  opacity: .55;
}
.fi-rango-marca {
  position: absolute; top: -3px; width: 2px; height: 11px; margin-left: -1px;
  background: var(--texto); border-radius: 1px;
  box-shadow: 0 0 0 2px var(--panel);
}
.fi-rango-pies { display: flex; justify-content: space-between; font-size: 10px;
  color: var(--suave); font-variant-numeric: tabular-nums; }

.fi-fila {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding: 3px 0; font-size: 11.5px;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.fi-fila > span { color: var(--suave); }
.fi-fila b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------- el medidor (F29) */
/* Forma de TradingView, sustancia distinta: la aguja no dice "va a subir",
   dice si el sitio cumple lo que pedimos. Nunca hay banda "compra fuerte". */
.md { padding: 2px 0 4px; }
.md-svg { display: block; margin: 0 auto; width: 100%; max-width: 168px; }
.md-etiqueta {
  text-align: center; font-weight: 800; font-size: 14px; letter-spacing: .4px;
  margin-top: -4px;
}
.md-etiqueta.veto { color: var(--rojo2); }
.md-etiqueta.malo { color: var(--ambar); }
.md-etiqueta.nada { color: var(--suave); }
.md-etiqueta.aceptable { color: var(--verde); }
.md-etiqueta.bueno { color: var(--verde2); }
/* La frase honesta va SIEMPRE visible, nunca en un tooltip ni en un "ver más":
   el aviso que hay que esconder para que la pantalla quede bonita es
   exactamente el que hay que enseñar. */
.md-fija {
  font-size: 10.5px; color: var(--suave); line-height: 1.5; margin-top: 6px;
  text-align: center; border-top: 1px dashed var(--borde); padding-top: 7px;
}
.md-segunda { font-size: 11px; line-height: 1.55; margin-top: 7px; }
.md-vetos { margin-top: 8px; }
.md-veto {
  background: var(--rojo-fondo); border-left: 2px solid var(--rojo);
  border-radius: 0 5px 5px 0; padding: 7px 9px; font-size: 11px;
  line-height: 1.5; margin-bottom: 5px;
}
.md-contexto {
  margin-top: 8px; padding: 7px 9px; border-radius: 5px;
  background: var(--fondo3); font-size: 11px; line-height: 1.5;
}
.md-contexto.ambar { background: var(--ambar-fondo); }

.md-medido {
  margin-top: 9px; padding: 8px 9px; border-radius: 6px;
  background: var(--verde-fondo); border: 1px solid rgba(38,166,91,.3);
}
.md-medido-cab {
  font-size: 9.5px; letter-spacing: .9px; color: var(--verde2);
  font-weight: 700;
}
.md-medido-num { font-size: 12.5px; margin-top: 3px; }
.md-medido-num b { font-size: 15px; }
.md-medido-pie { font-size: 10px; color: var(--suave); line-height: 1.5;
  margin-top: 4px; }

.md-reqs { margin-top: 9px; }
.md-req { padding: 6px 0; border-top: 1px solid rgba(255,255,255,.04); }
.md-req-cab { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.md-req-cab b { text-transform: capitalize; }
.md-pts { margin-left: auto; font-variant-numeric: tabular-nums;
  font-size: 11px; }
/* El sello de procedencia va DELANTE del criterio, no detrás: se lee antes de
   creerse el número. */
.md-sello {
  font-size: 8.5px; letter-spacing: .5px; text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px; font-weight: 700; white-space: nowrap;
}
.md-sello.verde { background: var(--verde-fondo); color: var(--verde2); }
.md-sello.rojo  { background: var(--rojo-fondo);  color: var(--rojo2); }
.md-sello.suave { background: var(--fondo4);      color: var(--suave); }
.md-req-motivo { font-size: 10.5px; color: var(--suave); margin-top: 3px;
  line-height: 1.45; }
.md-req-fuente { font-size: 9.5px; color: var(--tenue); margin-top: 2px;
  line-height: 1.45; }

/* ------------------------------------- cuánto comprar (F30) */
.tm-campo { display: block; font-size: 11px; color: var(--suave); }
.tm-campo input {
  width: 100%; box-sizing: border-box; margin-top: 3px; padding: 6px 8px;
  background: var(--fondo2); border: 1px solid var(--borde);
  border-radius: 5px; color: var(--texto); font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tm-campo input:focus { outline: none; border-color: var(--azul); }
.tm-nota { font-size: 10px; color: var(--tenue); line-height: 1.45;
  margin: 4px 0 8px; }
.tm-grande {
  background: var(--azul-fondo); border-radius: 6px; padding: 8px 9px;
  margin-bottom: 7px;
}
.tm-grande b { display: block; font-size: 19px; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums; }
.tm-grande .suave { font-size: 10.5px; }
.tm-aviso {
  background: var(--ambar-fondo); border-left: 2px solid var(--ambar);
  border-radius: 0 5px 5px 0; padding: 7px 9px; font-size: 10.5px;
  line-height: 1.5; margin-top: 7px;
}
.tm-medido {
  margin-top: 8px; font-size: 9.5px; color: var(--suave); line-height: 1.5;
  border-top: 1px dashed var(--borde); padding-top: 6px;
}
.tm-medido b { color: var(--verde2); letter-spacing: .6px; }

/* ---------------------------------- exposición conjunta (F31) */
.ex-titular { font-size: 13px; padding: 7px 9px; border-radius: 6px;
  background: var(--fondo3); margin-bottom: 7px; }
.ex-titular.ambar { background: var(--ambar-fondo); }
.ex-titular b { font-size: 17px; }
.ex-simbolos { font-size: 10.5px; color: var(--suave); margin-bottom: 6px; }
.ex-limpio { font-size: 11.5px; color: var(--suave); padding: 8px 0;
  line-height: 1.5; }
.ex-aviso {
  background: var(--ambar-fondo); border-left: 2px solid var(--ambar);
  border-radius: 0 5px 5px 0; padding: 7px 9px; font-size: 10.5px;
  line-height: 1.5; margin-top: 7px;
}
.ex-medido { margin-top: 8px; font-size: 9.5px; color: var(--suave);
  line-height: 1.5; border-top: 1px dashed var(--borde); padding-top: 6px; }
.ex-medido b { color: var(--verde2); letter-spacing: .6px; }

.fi-cuando { font-size: 10px; margin-top: 4px; }

/* ------------------------------ la escalera de caída (F36) */
.esc { width: 100%; border-collapse: collapse; font-size: 10.5px;
  font-variant-numeric: tabular-nums; margin-top: 6px; }
.esc th { text-align: right; color: var(--tenue); font-weight: 500;
  font-size: 9px; text-transform: uppercase; letter-spacing: .5px;
  padding: 0 3px 3px; }
.esc th:last-child, .esc td:last-child { text-align: left; }
.esc td { text-align: right; padding: 3px; border-top: 1px solid
  rgba(255,255,255,.04); }
.esc tr.esc-fin { background: var(--rojo-fondo); font-weight: 700; }
.esc tr.esc-fin td { color: var(--rojo2); }
.esc tr.esc-fuera { opacity: .45; }
/* El punto que late: la señal de que la pantalla está viva y no colgada. */
.fi-cuando { font-size: 10px; margin-top: 5px; color: var(--suave);
  display: flex; align-items: center; gap: 5px; }
.fi-latido { width: 6px; height: 6px; border-radius: 50%;
  background: var(--verde2); animation: latir 1s ease-in-out infinite; }
@keyframes latir { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* El activo en la tabla de niveles: logo, sigla y nombre, a la vista. */
.niv-activo { display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; }
.niv-activo b { font-weight: 600; }
.niv-nombre { color: var(--suave); font-size: 10.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.niv-activo:hover b { color: var(--azul); }
/* El punto que late en Suelos y techos: prueba de que hay alguien mirando. */
.vig-vivo { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--verde2); animation: latir 1s ease-in-out infinite; }

/* --------------------------- los dos planes: ahora y esperando (F41) */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px; margin-top: 8px; }
.plan-col { background: var(--fondo3); border: 1px solid var(--borde);
  border-radius: 6px; padding: 9px 11px; font-size: 12px; }
.plan-col > div { display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px; padding: 2px 0; }
.plan-col b { font-variant-numeric: tabular-nums; }
/* El plan de esperar se destaca: es el que suele tener el premio bueno. */
.plan-col.destacada { background: var(--azul-fondo); border-color: var(--azul); }
.plan-tit { display: block !important; font-size: 9.5px; letter-spacing: .7px;
  text-transform: uppercase; color: var(--suave); margin-bottom: 4px;
  border-bottom: 1px solid var(--borde); padding-bottom: 4px; }
.plan-nota { display: block !important; font-size: 10px; color: var(--suave);
  line-height: 1.45; margin-top: 5px; }

/* ------------------------ dónde estás en la estructura (F42) */
.estructura { margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  background: var(--fondo3); font-size: 11.5px; line-height: 1.5;
  border-left: 3px solid var(--borde2); }
.estructura.en-base { background: var(--verde-fondo);
  border-left-color: var(--verde); }
.estructura.nadie { background: var(--ambar-fondo);
  border-left-color: var(--ambar); }

/* ------------------------------ el perfil de volumen (F43) */
.perfil { margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  background: var(--fondo3); font-size: 11.5px; line-height: 1.5;
  border-left: 3px solid var(--azul); }
.perfil-nota { font-size: 10px; color: var(--suave); line-height: 1.45;
  margin-top: 4px; }

/* ================= LOS DOS PRECIOS QUE LO DECIDEN TODO (F44) ============= */
.rt { margin-bottom: 16px; }
.rt-vacio { padding: 14px; color: var(--suave); font-size: 12.5px; }

/* La barra de avance: de la línea al objetivo, y dónde estás. */
.rt-avance { background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px 14px; margin-bottom: 12px; }
.rt-avance-cab { display: flex; justify-content: space-between;
  align-items: baseline; font-size: 12px; margin-bottom: 7px; }
.rt-avance-cab b { font-size: 15px; font-variant-numeric: tabular-nums; }
.rt-barra { position: relative; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--rojo-fondo), var(--fondo4),
                              var(--verde-fondo)); overflow: visible; }
.rt-relleno { height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--rojo), var(--ambar), var(--verde));
  opacity: .55; }
.rt-tu { position: absolute; top: -4px; width: 3px; height: 16px;
  margin-left: -1.5px; background: var(--texto); border-radius: 2px;
  box-shadow: 0 0 0 2px var(--panel); }
.rt-avance-pie { font-size: 11px; color: var(--suave); margin-top: 7px;
  line-height: 1.5; }

.rt-pos { background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 13px 15px; }
.rt-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; }
.rt-cab b { font-size: 16px; }
.rt-precio { margin-left: auto; font-size: 19px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.rt-res { font-size: 13px; font-variant-numeric: tabular-nums; }

/* Las dos cajas grandes: ganar y perder. */
.rt-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 11px; margin-bottom: 13px; }
.rt-caja { border-radius: 9px; padding: 13px 15px; border: 1px solid; }
.rt-caja.gana { border-color: var(--verde); background: var(--verde-fondo); }
.rt-caja.pierde { border-color: var(--rojo); background: var(--rojo-fondo); }
.rt-lbl { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  opacity: .9; margin-bottom: 4px; }
.rt-caja.gana .rt-lbl, .rt-caja.gana .rt-val { color: var(--verde2); }
.rt-caja.pierde .rt-lbl, .rt-caja.pierde .rt-val { color: var(--rojo2); }
.rt-val { font-size: 27px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.rt-nota { font-size: 11.5px; opacity: .85; margin-top: 5px; line-height: 1.5; }

.rt-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px 16px; margin-bottom: 13px; }
.rt-datos > div { display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px; padding: 4px 0; font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.04); }
.rt-datos span { color: var(--suave); }
.rt-datos b { font-variant-numeric: tabular-nums; }

/* Qué hay que aguantar y qué hay que superar. */
.rt-camino { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-bottom: 13px; }
.rt-sub { font-size: 10px; letter-spacing: .7px; text-transform: uppercase;
  font-weight: 700; margin-bottom: 5px; }
.rt-lista { margin: 0; padding-left: 18px; font-size: 11.5px; line-height: 1.7;
  font-variant-numeric: tabular-nums; }
.rt-lista .suave { font-size: 10.5px; }

.rt-formula { background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 7px; padding: 10px 12px; font-family: ui-monospace,
  SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--azul);
  margin-bottom: 13px; line-height: 1.7; }

.rt-tabla { width: 100%; border-collapse: collapse; font-size: 12px;
  font-variant-numeric: tabular-nums; }
.rt-tabla th { text-align: right; color: var(--tenue); font-weight: 600;
  font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase;
  padding: 0 6px 6px; border-bottom: 1px solid var(--borde); }
.rt-tabla th:first-child, .rt-tabla th:last-child { text-align: left; }
.rt-tabla td { padding: 4px 6px; text-align: right;
  border-bottom: 1px solid rgba(255,255,255,.03); }
.rt-tabla td:first-child, .rt-tabla td:last-child { text-align: left; }
.rt-tabla tr.rt-gana td { background: var(--verde-fondo); font-weight: 700; }
.rt-tabla tr.rt-pierde td { background: var(--rojo-fondo); font-weight: 700; }
.rt-tabla tr.rt-ahora td { background: var(--azul-fondo); font-weight: 700; }
.rt-tabla tr.rt-entrada td { background: var(--ambar-fondo); }
.rt-que { color: var(--suave); font-size: 10.5px; }
.rt-tag { font-size: 9px; padding: 1px 5px; border-radius: 3px;
  margin-left: 6px; font-weight: 700; vertical-align: middle;
  letter-spacing: .4px; }
.rt-tag.g { background: var(--verde); color: #fff; }
.rt-tag.p { background: var(--rojo); color: #fff; }
.rt-tag.a { background: var(--azul); color: #fff; }
.rt-tag.e { background: var(--ambar); color: #000; }
.rt-pie { font-size: 10.5px; color: var(--suave); line-height: 1.55;
  margin-top: 11px; border-top: 1px dashed var(--borde); padding-top: 8px; }
/* El saldo vivo, arriba del todo y latiendo. */
.rt-saldo { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; padding-bottom: 11px; margin-bottom: 11px;
  border-bottom: 1px solid var(--borde); }
.rt-saldo-lbl { font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--suave); display: flex; align-items: center; gap: 6px; }
.rt-saldo-val { font-size: 32px; font-weight: 800; letter-spacing: -.8px;
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.rt-saldo-val .suave { font-size: 15px; font-weight: 500; }
.rt-saldo-det { display: grid; gap: 2px; font-size: 12px; min-width: 170px; }
.rt-saldo-det > div { display: flex; justify-content: space-between; gap: 10px; }
.rt-saldo-det span { color: var(--suave); }
.rt-saldo-det b { font-variant-numeric: tabular-nums; }