/*
  Radar Alpha — Pantalla de Análisis (rediseño)
  Fecha: 2026-08-03 | Versión: 1.0.0 | Estado: activo

  SOLO PRESENTACIÓN. Ni un solo valor financiero se calcula, deriva ni
  transforma aquí — todo lo que se pinta viene ya resuelto del motor.

  El problema que resuelve: la pantalla era una sucesión plana de bloques
  (dato → barra → dato → tarjeta → barra) sin jerarquía. Todo pesaba lo
  mismo, así que nada destacaba y el usuario no sabía dónde mirar primero.

  La jerarquía nueva, de mayor a menor peso visual:

    1. Identidad y precio   — lo primero que se busca al abrir un activo
    2. Gráfico              — el protagonista
    3. Lectura del sistema  — convicción, confianza, riesgo, calidad
    4. Evidencia            — por qué el sistema dice lo que dice
    5. Contribución         — cuánto pesa cada indicador
    6. Histórico            — cómo ha evolucionado
    7. Detalle técnico      — plegado, para quien quiera bajar al dato

  Móvil primero: cada bloque se diseña primero a 375px y solo después se
  reparte en columnas cuando hay ancho de sobra.
*/

/* ══════════════════════════════════════════════════════════════════
   Contenedor
   ══════════════════════════════════════════════════════════════════ */
.ra-analisis {
  display: flex;
  flex-direction: column;
  /* 20px entre bloques dejaba franjas de fondo tan anchas como el propio
     contenido de algunas tarjetas. La separación la da el borde, no el aire. */
  gap: var(--space-3);
  /* `min-width: 0` en toda la cadena de contenedores. Por defecto un ítem
     flex o grid vale `min-width: auto`, que significa "nunca más estrecho
     que mi contenido": la fila de 8 rangos medía 456 px y empujaba la
     página entera a 537 px en una pantalla de 375, provocando scroll
     horizontal. Con esto, cada contenedor puede encoger y el desbordamiento
     se resuelve donde toca — dentro de la barra de rangos, que ya tiene su
     propio scroll. */
  min-width: 0;
  /* Respeta la barra de navegación de Android y el notch: sin esto, el
     último bloque queda debajo del sistema y no se puede leer. */
  padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
}
.ra-analisis > * { min-width: 0; }

/* Bloque base: una sola capa de superficie, nunca tarjeta dentro de
   tarjeta. El borde es la separación; la sombra se reserva para lo que
   flota de verdad (modales). */
.ra-bloque {
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* Fila de dos bloques emparejados. Sustituye a la pila infinita de tarjetas
   a todo el ancho, que en escritorio dejaba media pantalla de fondo vacío a
   los lados de contenido estrecho (métricas, factores, operar). */
.ra-analisis-fila {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.ra-analisis-fila > * { min-width: 0; }
@media (min-width: 1000px) {
  .ra-analisis-fila {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
}
/* Apilada (móvil y tablet), la secuencia cambia de prioridad: primero la
   información financiera (activo y gráfico, que van antes), después la
   Cartera Virtual —la única acción real de la pantalla— y solo entonces los
   factores, que pueden ser una lista larga. Con el orden del DOM, "Qué
   sostiene la lectura" empujaba la cartera cientos de píxeles hacia abajo
   en cuanto había muchos factores. */
@media (max-width: 999px) {
  .ra-analisis-fila > .ra-operar { order: -1; }
}
.ra-bloque--plano {
  background: transparent;
  border: none;
  padding: 0;
}

.ra-bloque-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  min-width: 0;
}
.ra-bloque-cabecera > * { min-width: 0; max-width: 100%; }
.ra-bloque-titulo {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--fg-muted);
}
/* (2026-08-15) Número de bloque, mismo espíritu que "Motor N (nombre)":
   los gráficos de la lectura (anillo de convicción, evidencia, contribución
   e histórico) se numeran en orden de lectura. Es una etiqueta de
   orientación, no una jerarquía — por eso va oculta a los lectores de
   pantalla (aria-hidden en la plantilla). */
.ra-bloque-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  height: 1.7em;
  margin-right: var(--space-2);
  border: var(--border-width) solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
  letter-spacing: 0;
  vertical-align: middle;
}
.ra-bloque-nota {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin: 0;
}

/* Subtítulo estático bajo el título de cada bloque numerado de la ficha
   (Lectura del sistema, Evidencia, Contribución, Histórico, Validación):
   mismo lenguaje visual que los subtítulos de los motores
   (.ra-motor-descripcion). Vive al final de la cabecera flex y ocupa su
   propia fila completa. */
.ra-bloque-descripcion {
  font-size: var(--text-sm);
  flex-basis: 100%;
}

/* ── Validación histórica (backtesting, DMA v2.0 §7.3) ─────────────── */
.ra-backtest-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.ra-backtest-objetivo,
.ra-backtest-supuesto {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.ra-backtest-objetivo select,
.ra-backtest-supuesto input {
  font: inherit;
  color: var(--fg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
}

.ra-backtest-supuesto input {
  width: 5.5em;
}

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

.ra-backtest-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ra-backtest-item dt {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.ra-backtest-item dt .ra-ind-info-btn {
  width: 16px;
  height: 16px;
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.ra-backtest-item dd {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

/* Desglose auditable de cada operación simulada del backtest: filas con
   dirección, señal, fechas y precios de relleno y retorno neto de costes.
   Los colores de retorno reutilizan los tonos del producto (ra-tone-*). */
.ra-backtest-operaciones {
  margin-top: var(--space-4);
}

.ra-backtest-operaciones {
  margin-top: var(--space-4);
  overflow-x: auto;
}

.ra-backtest-tabla {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-width: 720px;
}

.ra-backtest-tabla-fila {
  display: grid;
  grid-template-columns: 90px 80px 1.2fr 1.2fr 1fr 1fr 110px;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
  border-top: 1px solid var(--border);
}

.ra-backtest-tabla-fila:first-child {
  border-top: none;
}

.ra-backtest-tabla-cabecera {
  background: var(--bg-elevated);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Cada cabecera de columna: el rótulo y su botón "?" en la misma línea,
   con el botón encogido para no ensanchar la columna (2026-08-15). */
.ra-backtest-tabla-titulo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.ra-backtest-tabla-titulo .ra-ind-info-btn {
  width: 16px;
  height: 16px;
  flex: none;
}

.ra-backtest-tabla-fila span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   1. Identidad del activo — ticker y precio
   ══════════════════════════════════════════════════════════════════ */
/* La cabecera del activo es UNA TIRA, no una columna (rediseño 2026-08-19).
   Identidad · precio+variación · lectura del sistema comparten fila cuando
   hay ancho, con separadores verticales como en un terminal de mercado. La
   versión anterior apilaba ticker, sector, precio, variación y fecha en
   cinco líneas y consumía casi media pantalla antes del gráfico. */
.ra-activo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  /* Línea de acento a la izquierda: marca esta tira como la cabecera del
     activo y no como una tarjeta más de la pila. */
  border-left: 3px solid var(--accent);
  min-width: 0;
}
.ra-activo > * { min-width: 0; }

.ra-activo-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 1 auto;
}

.ra-activo-fila {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* La estrella de seguimiento mide 44px por el mínimo táctil, y dentro de la
   tira ese cuadrado era lo que fijaba su alto. Con ratón el objetivo puede
   ser menor; en móvil conserva los 44px. */
@media (min-width: 720px) {
  .ra-activo-fila .ra-favorite-btn {
    min-width: 30px;
    min-height: 30px;
  }
}
.ra-activo-ticker {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1;
}
/* Contexto real del activo (sector, mercado…). Se rellena solo con lo que
   el motor entrega de verdad; si no hay dato, no se pinta la fila. */
.ra-activo-contexto {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  /* Es un <p>: sin resetear el margen del navegador, dentro de la tira
     añadía 16px arriba y abajo y la columna de identidad medía el doble. */
  margin: 0;
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.ra-activo-contexto-sep {
  opacity: 0.4;
}

/* El precio es el elemento con más peso de toda la pantalla, junto al
   gráfico. Cifras tabulares para que no "bailen" al actualizarse. */
/* Precio y variación: el elemento con más peso de la tira. Van juntos en
   una columna estrecha, separados del resto por una línea vertical. */
.ra-activo-precio-fila {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  flex: 0 0 auto;
  padding-left: var(--space-4);
  border-left: var(--border-width) solid var(--border);
}
.ra-activo-precio {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}
.ra-activo-variacion {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.ra-activo-fecha {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin: 0;
}

/* Lectura del sistema dentro de la tira: anillo de convicción + celdas
   compactas (confianza, riesgo, calidad, evidencias). Ocupa el ancho
   sobrante y se alinea a la derecha, como el bloque de estado de un
   terminal. Antes vivía tres tarjetas más abajo, en cuatro cajas de
   120px con relleno propio. */
.ra-activo-lectura {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  /* Base flexible y encogible: con `auto` la base era el ancho natural de
     las cinco celdas y la tira partía en dos líneas en cuanto el ticker o
     el precio crecían un poco. */
  flex: 1 1 300px;
  justify-content: flex-end;
  min-width: 0;
}
.ra-celda {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ra-celda-etiqueta {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--fg-muted);
  /* Hereda el criterio de la antigua `.ra-metrica-etiqueta`, a la que
     sustituye: la etiqueta convive con su botón "?" en la misma línea y
     una etiqueta larga sin espacios desbordaría la celda a 390px. Se parte
     antes que desbordar — `white-space: nowrap` hacía justo lo contrario. */
  overflow-wrap: anywhere;
}
/* "?" del conjunto de la lectura: mismo botón que los de cada métrica, al
   final del grupo y sin competir con ellos. Se cualifica con `.ra-activo`
   porque la regla base de `.ra-ind-info-btn` (20px) vive más abajo en este
   archivo y, a igual especificidad, ganaría por orden. */
.ra-activo .ra-lectura-ayuda {
  flex: none;
  align-self: center;
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
}
.ra-celda-etiqueta .ra-ind-info-btn {
  width: 15px;
  height: 15px;
  font-size: 0.6rem;
  flex: none;
}
.ra-celda-valor {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .ra-activo-ticker { font-size: 32px; }
  .ra-activo-precio { font-size: 32px; }
}
/* ── Cabecera del activo en MÓVIL ──────────────────────────────────────
   La tira horizontal de escritorio no se copia aquí: a 375px se plegaba en
   cuatro líneas y medía 290px (medido), más que la tarjeta vertical que
   vino a sustituir. En móvil es una rejilla de cuatro columnas con una
   composición propia:

     ┌─────────────────────────────────────────────┐
     │ TICKER ★                     ◍  57,9        │
     │ sector                          Convicción  │
     │ 484,70 $   +3,4 %                           │
     ├─────────────┬────────┬─────────┬────────────┤
     │ Confianza   │ Riesgo │ Calidad │ Evidencias │
     ├─────────────┴────────┴─────────┴────────────┤
     │ Actualizado …                               │
     └─────────────────────────────────────────────┘

   `display: contents` en `.ra-activo-id` y en `.ra-activo-lectura` disuelve
   esos dos contenedores para que sus hijos sean celdas de la misma rejilla
   y se puedan colocar uno a uno. Ningún dato se pierde ni cambia de origen:
   son los mismos nodos con los mismos ids. */
@media (max-width: 719px) {
  .ra-activo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 5px var(--space-2);
    padding: 10px var(--space-3);
  }
  .ra-activo-id,
  .ra-activo-lectura { display: contents; }

  .ra-activo-fila {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .ra-activo-ticker { font-size: var(--text-xl); }
  /* El sector es contexto, no titular: con su propia interlínea ajustada
     baja de 21px a 15 sin perder legibilidad. */
  .ra-activo-contexto {
    grid-column: 1 / 3;
    grid-row: 2;
    font-size: 0.65rem;
    line-height: 1.2;
  }

  /* El anillo y su cifra ocupan la mitad derecha de las dos primeras
     filas: la conclusión del sistema se lee a la altura del ticker, sin
     gastar una fila propia. */
  .ra-conviccion {
    grid-column: 3 / -1;
    grid-row: 1 / 3;
    justify-self: end;
    gap: var(--space-2);
    padding-right: 0;
    border-right: none;
  }
  /* Se cualifica con `.ra-activo` a propósito: la regla base de 64px vive
     más abajo en este archivo y, a igual especificidad, ganaría por orden.
     A 64px el anillo era lo que fijaba el alto de las dos primeras filas de
     la cabecera; a 42 lo fijan el ticker y el sector, que es lo correcto. */
  .ra-activo .ra-conviccion-anillo { width: 42px; }
  .ra-activo .ra-conviccion-valor { font-size: var(--text-lg); }
  /* La clasificación bajo la convicción es EXACTAMENTE el mismo dato que la
     celda "Riesgo" dos filas más abajo (ambas las pinta `renderStatus` con
     `data.risk`). En escritorio caben las dos; en móvil el duplicado costaba
     24px de la primera pantalla, que es donde menos sobran. El dato sigue
     visible en su celda. */
  #conviccion-clase { display: none; }

  /* El precio es el elemento principal de la pantalla: ocupa su propia fila
     a todo el ancho para que no parta de línea y pueda crecer. */
  .ra-activo-precio-fila {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-wrap: nowrap;
    align-items: baseline;
    padding-left: 0;
    border-left: none;
  }
  .ra-activo-precio { font-size: 30px; }
  .ra-activo-variacion { font-size: var(--text-base); }

  /* Las cuatro celdas forman su propia franja de cuatro columnas: a 360px
     de ancho siguen cabiendo (4 × 72px + 3 huecos de 8). */
  /* Cada celda medía 48-50px: 6 de relleno + 15 de etiqueta + 24 de valor
     con la interlínea por defecto. El valor no necesita 24px de caja para
     una cifra de 16 — con interlínea ajustada la celda baja a ~39 sin tocar
     ni el tamaño de la etiqueta ni el del dato. */
  .ra-celda {
    grid-row: 4;
    gap: 1px;
    padding-top: 4px;
    border-top: var(--border-width) solid var(--border);
  }
  /* El valor de Riesgo/Calidad va dentro de un <span> contenedor que el JS
     rellena con una píldora de estado. Ese contenedor es de línea, así que
     heredaba una caja de 24px para un contenido de 20. Como caja flex se
     ajusta a lo que hay dentro. */
  .ra-celda > span {
    display: flex;
    align-items: center;
    line-height: 1.25;
  }
  /* A 71px de columna, "EVIDENCIAS" + su botón "?" no cabían en una línea.
     Ya no se fuerza con `nowrap` —eso convertía el problema en
     desbordamiento— sino que se le hace sitio: sin el interletrado ancho y
     con el "?" a 13px, las cuatro etiquetas caben enteras. Si alguna vez no
     cupiera, parte de línea, que es el comportamiento correcto. */
  .ra-celda-etiqueta {
    font-size: 0.6rem;
    letter-spacing: normal;
    gap: 2px;
  }
  .ra-celda-etiqueta .ra-ind-info-btn {
    width: 13px;
    height: 13px;
  }
  .ra-celda-valor { font-size: var(--text-sm); }

  /* "Actualizado …" es metadato: se pega a la franja de celdas como su pie,
     sin hueco de rejilla propio, en vez de ocupar una fila con aire arriba y
     abajo. El dato no cambia ni desaparece. */
  /* La fila del pie tenía la mitad derecha libre: el "?" de la lectura del
     sistema se coloca ahí en vez de gastar hueco en la fila de celdas. */
  /* 0,6rem eran 9,6px: el texto más pequeño de la pantalla y el único sin
     una cifra grande al lado que lo sostenga. Sube al mismo cuerpo que el
     sector (10,4px), que es su hermano en jerarquía — sigue siendo metadato
     y sigue costando una sola línea. */
  .ra-activo-fecha {
    grid-column: 1 / 4;
    grid-row: 5;
    margin-top: -3px;
    font-size: 0.65rem;
    line-height: 1.2;
  }
  .ra-activo .ra-lectura-ayuda {
    grid-column: 4 / -1;
    grid-row: 5;
    justify-self: end;
    margin-top: -3px;
    width: 16px;
    height: 16px;
  }

  /* La estrella conserva un objetivo táctil holgado sin ser lo que fija el
     alto de la primera fila. */
  .ra-activo-fila .ra-favorite-btn {
    min-width: 34px;
    min-height: 34px;
  }

}

/* ══════════════════════════════════════════════════════════════════
   2. Gráfico — barra de rangos
   ══════════════════════════════════════════════════════════════════ */
/* Barra única sobre el lienzo: temporalidad a la izquierda, herramientas a
   la derecha. El acceso a indicadores estaba DEBAJO del gráfico, en una
   cabecera propia con dos botones grandes — otra franja de alto entre el
   gráfico y lo que venía después. */
.ra-grafico-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  min-width: 0;
}
.ra-grafico-barra > * { min-width: 0; }
.ra-grafico-herramientas {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
/* El botón de indicadores es ahora una ficha como las de al lado, no un
   botón de acción principal: abre un panel, no ejecuta nada. */
.ra-grafico-herramientas .ra-btn-indicadores {
  padding: 5px 11px;
  font-size: var(--text-xs);
}

/* El gráfico es la pieza protagonista de la pantalla: su tarjeta usa el
   ancho completo con el mínimo relleno que permite leer los ejes. */
.ra-grafico {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

/* En móvil los 8 rangos no caben: se deslizan en horizontal DENTRO de su
   propia barra, nunca provocando scroll lateral de la página. */
.ra-rangos {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 3px;
  background: var(--bg);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-full);
}
.ra-rangos::-webkit-scrollbar { display: none; }

.ra-rango {
  flex: 0 0 auto;
  padding: 4px var(--space-3);
  border: none;
  background: none;
  border-radius: var(--radius-full);
  color: var(--fg-muted);
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.ra-rango:hover:not([disabled]) { color: var(--fg); }
/* El periodo activo se marca con superficie sólida, no solo con color de
   texto: a simple vista tiene que verse cuál está elegido. */
.ra-rango[aria-selected="true"] {
  background: var(--bg-elevated);
  color: var(--accent);
  font-weight: var(--font-weight-medium);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ra-rango[disabled] { opacity: 0.35; cursor: not-allowed; }
.ra-rango:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Móvil: los dos niveles de la barra del gráfico se aprietan y los bloques
   pierden 4px de relleno por lado. Va aquí, después de las reglas base de
   `.ra-grafico`/`.ra-bloque`, porque comparten especificidad y gana la
   última declarada — puesto antes, no tenía ningún efecto. */
@media (max-width: 719px) {
  /* El hueco de error reserva 1,2em de alto SIEMPRE para que el mensaje no
     desplace la página al aparecer. En móvil eso son ~31px (con su hueco)
     de la primera pantalla gastados en un elemento vacío el 99% del tiempo:
     aquí solo ocupa sitio cuando de verdad hay algo que decir. */
  .ra-analisis > .error:empty { display: none; }
  .ra-grafico-barra {
    gap: 6px;
    margin-bottom: var(--space-2);
  }
  .ra-grafico { padding: var(--space-3); }
  .ra-bloque { padding: var(--space-3); }
  /* Los rangos son el control que más se toca del gráfico: mantienen un
     alto cómodo aunque el resto se comprima. */
  .ra-rango { padding: 7px var(--space-3); }
}

/* ══════════════════════════════════════════════════════════════════
   3. Lectura del sistema — convicción y métricas de cabecera
   ══════════════════════════════════════════════════════════════════ */
/* La convicción es una LECTURA del sistema, no una nota: por eso la cifra
   manda visualmente y la etiqueta y la clasificación la acompañan sin
   competir. El anillo lo dibuja el motor de gráficos existente. */
.ra-conviccion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
  padding-right: var(--space-4);
  border-right: var(--border-width) solid var(--border);
}
@media (max-width: 719px) {
  .ra-conviccion { padding-right: 0; border-right: none; }
}
/* El motor de gráficos dibuja el anillo a 140px y, DENTRO de él, un bloque
   centrado (`.ra-scale-center`, posicionado `inset: 0`) con el valor, la
   etiqueta y la clasificación.

   Aquí el anillo mide 92px, así que hay que decírselo al renderer por su
   propia variable (`--ra-scale-size`) en vez de encoger el SVG por fuera:
   encogerlo por fuera dejaba ese bloque centrado a su tamaño original,
   montado encima del dibujo del anillo.

   Y el bloque centrado se oculta porque REPITE lo que ya está a su lado a
   mayor tamaño: la cifra, la palabra "Convicción" y la clasificación. Dos
   veces el mismo dato, uno de ellos apretado dentro de un anillo de 92px,
   no informa más: estorba. El renderer no se toca. */
.ra-conviccion-anillo {
  flex: 0 0 auto;
  /* 92px en su propia tarjeta; 64px ahora que vive dentro de la tira de
     cabecera, donde tiene que convivir con precio y celdas sin dominarlas. */
  width: 64px;
  min-width: 0;
}
/* El renderer fija `--ra-scale-size` como estilo EN LÍNEA sobre `.ra-scale`,
   así que declararla en el contenedor no sirve: gana la de línea. Se
   dimensionan el bloque y el SVG directamente. Ahora es seguro encogerlos
   porque el bloque centrado ya no está: era lo único que no escalaba. */
.ra-conviccion-anillo .ra-scale,
.ra-conviccion-anillo svg {
  display: block;
  width: 100%;
  height: auto;
}
.ra-conviccion-anillo .ra-scale-center {
  display: none;
}
.ra-conviccion-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ra-conviccion-valor {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ra-conviccion-etiqueta {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--fg-muted);
  white-space: nowrap;
}
.ra-conviccion-etiqueta .ra-ind-info-btn {
  width: 15px;
  height: 15px;
  font-size: 0.6rem;
  flex: none;
}

/* Motivo principal: es la frase que el propio motor devuelve, no un texto
   redactado en la interfaz. */
.ra-motivo {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
  border-left: 2px solid var(--accent);
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  color: var(--fg);
}
.ra-motivo:empty { display: none; }

/* ══════════════════════════════════════════════════════════════════
   4. Factores a favor / en contra
   ══════════════════════════════════════════════════════════════════ */
.ra-factores {
  display: grid;
  gap: var(--space-4);
}
/* El contenedor pasó de <section> a <div> con display:grid al fusionarse
   con "Qué sostiene la lectura": `display` gana a `hidden`, así que hay que
   devolverle el efecto o el bloque vacío se pintaría igual. */
.ra-factores[hidden] { display: none; }
@media (min-width: 720px) {
  .ra-factores { grid-template-columns: 1fr 1fr; }
}
.ra-factores-grupo h4 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--fg-muted);
}
.ra-factores-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ra-factores-lista li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  color: var(--fg-muted);
}
.ra-factores-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: 0.5;
}
.ra-factores-grupo--favor li::before { background: var(--accent); opacity: 1; }
.ra-factores-grupo--contra li::before { background: var(--danger); opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   4-bis. Cartera Virtual junto al análisis
   ══════════════════════════════════════════════════════════════════
   Estaba al final de la página, tras seis bloques de análisis: había que
   recorrer la pantalla entera para llegar a la única acción real de la
   pantalla. Ahora comparte fila con la lectura del sistema. */
.ra-operar {
  display: flex;
  flex-direction: column;
}
.ra-operar .ra-portfolio-integration {
  margin: 0;
}
.ra-operar-alerta {
  width: 100%;
  margin-top: var(--space-3);
}

/* ══════════════════════════════════════════════════════════════════
   Puente hacia Tesis (Radar Alpha Plataforma) — reparación forense
   2026-08-31. Fila texto + CTA, no un banner: mismo `.ra-bloque` que el
   resto de secciones de la ficha, solo cambia la disposición interna.
   ══════════════════════════════════════════════════════════════════ */
.ra-puente-tesis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.ra-puente-tesis-texto {
  min-width: 0;
  flex: 1 1 320px;
}
.ra-puente-tesis-titulo {
  text-transform: none;
  font-size: var(--text-base);
  letter-spacing: normal;
}
.ra-puente-tesis-btn {
  flex: none;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .ra-puente-tesis-btn { width: 100%; text-align: center; }
}
/* Ronda 3 (2026-08-31, Bloque M): aviso de cambio de dominio, siempre
   visible (nunca solo un `title`, invisible en móvil). `flex-basis: 100%`
   lo empuja a su propia fila bajo el texto + botón. */
.ra-puente-tesis-aviso-dominio {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-foreground-muted);
}

/* ══════════════════════════════════════════════════════════════════
   Estado de carga y error de /api/analyze — reparación forense
   2026-08-31 (hallazgo P1: sin esto, un clic no daba ninguna señal de
   que el sistema estuviera trabajando).
   ══════════════════════════════════════════════════════════════════ */
.ra-cargando-fila {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ra-cargando-titulo {
  margin: 0 0 2px;
  font-weight: var(--font-weight-semibold);
}
.ra-spinner {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: ra-spinner-girar 0.8s linear infinite;
}
@keyframes ra-spinner-girar {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ra-spinner { animation-duration: 2.4s; }
}

/* Deshabilita visualmente los disparadores de análisis mientras hay uno en
   marcha (impide doble envío en cualquiera de los cuatro caminos que
   llaman a runAnalysis, ver workspace.html). */
.ra-analizando .ra-inicio-chips .chip {
  pointer-events: none;
  opacity: 0.55;
}

.ra-error-analisis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.ra-error-analisis p { margin: 0; min-height: 0; }
.ra-error-analisis[hidden] { display: none; }

/* Aviso legal de la pantalla de análisis — reparación forense 2026-08-31.
   `.ra-activo` es flex en escritorio y grid en móvil (@719px abajo);
   `flex-basis: 100%` fuerza una línea propia en el primero, `grid-column`
   la fuerza en el segundo. */
.ra-activo-aviso-legal {
  flex: 1 0 100%;
  grid-column: 1 / -1;
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.ra-activo-aviso-legal a {
  color: inherit;
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════
   5. Evidencia — feed cronológico
   ══════════════════════════════════════════════════════════════════ */
/* Filtro por dirección. No altera ni recalcula nada: solo oculta filas. */
.ra-evidencia-filtros {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ra-filtro {
  padding: 5px var(--space-3);
  border: var(--border-width) solid var(--border);
  background: none;
  border-radius: var(--radius-full);
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.ra-filtro[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.ra-filtro:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ra-evidencia-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Cada evidencia es una fila con una barra lateral de color: verde
   alcista, rojo bajista, gris neutro. El color va SOLO en esa barra y en
   la etiqueta de dirección — no se tiñe el texto ni el fondo, que
   convertiría la lista en un semáforo ilegible. */
.ra-evidencia {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}
.ra-evidencia:last-child { border-bottom: none; }
.ra-evidencia::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-3);
  bottom: var(--space-3);
  width: 3px;
  border-radius: var(--radius-full);
  background: var(--fg-muted);
  opacity: 0.35;
}
.ra-evidencia--alcista::before { background: var(--accent); opacity: 1; }
.ra-evidencia--bajista::before { background: var(--danger); opacity: 1; }

/* (2026-08-20) Cada evidencia es un <details>: la cabecera es su resumen y
   la explicación con su procedencia se pliegan. En pantalla ancha se
   renderiza abierto, así que el escritorio se ve exactamente igual que
   antes; lo único que gana es poder plegarse. */
.ra-evidencia-caja { min-width: 0; }
.ra-evidencia-cuerpo { min-width: 0; }
.ra-evidencia-cabecera {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
  cursor: pointer;
  /* Sin esto el navegador pinta su propio triángulo delante del resumen y
     rompe el alineado con la barra de dirección. */
  list-style: none;
}
.ra-evidencia-cabecera::-webkit-details-marker { display: none; }
.ra-evidencia-cabecera:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.ra-evidencia-nombre {
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
}
.ra-evidencia-direccion {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  font-weight: var(--font-weight-semibold);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  color: var(--fg-muted);
  background: color-mix(in srgb, var(--fg-muted) 14%, transparent);
}
.ra-evidencia--alcista .ra-evidencia-direccion {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.ra-evidencia--bajista .ra-evidencia-direccion {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}
.ra-evidencia-meta {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin-left: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ra-evidencia-explicacion {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  color: var(--fg-muted);
}
.ra-evidencia-origen {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

/* ── Evidencia en MÓVIL: lista de datos, no pila de fichas ──────────────
   Con las 31 filas abiertas el bloque medía 5.184px a 375px (medido): la
   explicación de cada motor es texto libre de varias líneas y convertía la
   evidencia en un informe de scroll interminable. Plegada, cada fila deja a
   la vista lo que hace falta para recorrerla —qué es, en qué dirección y con
   cuánta intensidad— separada de la siguiente por una línea, con la barra de
   color del lado izquierdo intacta. Nada de tarjetas: densidad, alineación y
   filetes, como el resto del terminal. */
@media (max-width: 719px) {
  .ra-evidencia {
    padding: 0 0 0 var(--space-3);
  }
  .ra-evidencia::before {
    top: 8px;
    bottom: 8px;
  }
  /* Resumen en rejilla explícita de dos líneas: el nombre puede ocupar todo
     el ancho y NUNCA se recorta (puede tener varias palabras); debajo, la
     dirección a la izquierda y la intensidad a la derecha. */
  .ra-evidencia-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: 2px;
    margin-bottom: 0;
    padding: 8px 0;
  }
  .ra-evidencia-nombre {
    grid-column: 1;
    grid-row: 1;
  }
  .ra-evidencia-nombre .ra-ind-info-btn {
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
    flex: none;
  }
  .ra-evidencia-direccion {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    line-height: 1.15;
  }
  .ra-evidencia-meta {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
  }
  /* Marca de plegado propia, alineada al extremo derecho — el mismo
     triángulo que ya usan los motores y el detalle técnico. */
  .ra-evidencia-cabecera::after {
    content: "▸";
    grid-column: 3;
    grid-row: 1 / -1;
    color: var(--fg-muted);
    font-size: var(--text-xs);
    transition: transform var(--duration-fast) var(--ease-standard);
  }
  .ra-evidencia-caja[open] > .ra-evidencia-cabecera::after {
    transform: rotate(90deg);
  }
  .ra-evidencia-cuerpo {
    padding-bottom: var(--space-3);
  }
}

/* ══════════════════════════════════════════════════════════════════
   6. Contribución por indicador
   ══════════════════════════════════════════════════════════════════ */
.ra-contrib-grupo + .ra-contrib-grupo { margin-top: var(--space-5); }
.ra-contrib-grupo-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--fg-muted);
}
.ra-contrib-grupo-cuenta {
  font-family: var(--font-mono);
}

.ra-contrib-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* El nombre va ARRIBA, a lo ancho, y la barra debajo. La versión anterior
   metía el nombre en una columna de 110px con recorte por puntos suspensivos
   ("riesgo_est…"), que a la vez ocultaba el dato y quedaba mal. Con el
   nombre en su propia línea no hay nada que recortar. */
/* La fila es una rejilla con cuatro celdas —nombre, id, peso y barra— para
   que cada anchura decida dónde cae el id sin cambiar el marcado. En
   escritorio va pegado al nombre, como siempre; en móvil baja a la segunda
   línea (ver el bloque responsive más abajo). */
.ra-contrib {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}
.ra-contrib-nombre-y-ayuda {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.ra-contrib-nombre {
  font-size: var(--text-sm);
  color: var(--fg);
}
.ra-contrib-id {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}
.ra-contrib-peso {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* Barra centrada en cero: a la derecha empuja a favor, a la izquierda en
   contra. Una barra que siempre crece hacia la derecha no distingue
   ambas cosas, y esa distinción es el dato. */
.ra-contrib-barra {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  height: 6px;
  background: var(--bg);
  border-radius: var(--radius-full);
  overflow: hidden;
}

/* Móvil: el id deja de competir por el ancho con el nombre y baja a la
   segunda línea, delante de la barra. Es el cambio que elimina el salto de
   línea accidental: el nombre recupera todo el ancho útil menos el peso, y
   la barra cede la parte que ocupa el id. Ninguna anchura fija, ningún
   recorte: los nombres siguen enteros. */
@media (max-width: 719px) {
  .ra-contrib {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-2);
  }
  .ra-contrib-nombre-y-ayuda {
    grid-column: 1 / 2;
    grid-row: 1;
  }
  .ra-contrib-peso {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .ra-contrib-id {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }
  .ra-contrib-barra {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
}
.ra-contrib-barra::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.ra-contrib-relleno {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--ra-contrib-ancho, 0%);
  border-radius: var(--radius-full);
  transition: width var(--duration-base) var(--ease-standard);
}
.ra-contrib-relleno--positive { left: 50%; background: var(--accent); }
.ra-contrib-relleno--negative { right: 50%; background: var(--danger); }
.ra-contrib-relleno--neutral {
  left: 50%;
  transform: translateX(-50%);
  background: var(--fg-muted);
  opacity: 0.5;
}

/* ══════════════════════════════════════════════════════════════════
   7. Panel de indicadores técnicos
   ══════════════════════════════════════════════════════════════════ */
.ra-ind-panel {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}
.ra-ind-categoria + .ra-ind-categoria { margin-top: var(--space-4); }
.ra-ind-categoria-titulo {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--fg-muted);
}
.ra-ind-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ra-ind-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border: var(--border-width) solid var(--border);
  background: none;
  border-radius: var(--radius-full);
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.ra-ind-chip[aria-pressed="true"] {
  border-color: var(--ind-color, var(--accent));
  background: color-mix(in srgb, var(--ind-color, var(--accent)) 12%, transparent);
  color: var(--fg);
}
.ra-ind-chip[disabled] { opacity: 0.35; cursor: not-allowed; }
.ra-ind-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Botón "?" de ayuda junto a cada indicador (2026-08-09, zona de prácticas
   de la Academia): botón SEPARADO del toggle — el chip sigue activando el
   overlay del gráfico, este abre la explicación en el modal informativo. */
.ra-ind-chip-y-info {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.ra-ind-info-btn {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-full);
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--text-xs);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.ra-ind-info-btn:hover {
  color: var(--fg);
  border-color: var(--fg-muted);
}
.ra-ind-info-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ra-ind-punto {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--border);
  flex: none;
}
.ra-ind-chip[aria-pressed="true"] .ra-ind-punto {
  background: var(--ind-color, var(--accent));
}

/* ══════════════════════════════════════════════════════════════════
   8. Detalle técnico plegable
   ══════════════════════════════════════════════════════════════════ */
/* Progresivo: la lectura ejecutiva primero, el dato crudo solo si se pide.
   Nada se elimina, solo deja de competir por la atención. */
/* Mismo radio que `.ra-bloque`: se quedó en `--radius-lg` (14px) cuando los
   bloques pasaron a `--radius-md` (10px), y al ser el último elemento de la
   página su esquina notablemente más redonda rompía la lectura de "todas las
   superficies son la misma superficie". */
.ra-detalle {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.ra-detalle > summary {
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ra-detalle > summary::-webkit-details-marker { display: none; }
.ra-detalle > summary::before {
  content: "▸";
  transition: transform var(--duration-fast) var(--ease-standard);
  display: inline-block;
}
.ra-detalle[open] > summary::before { transform: rotate(90deg); }
.ra-detalle > summary:hover { color: var(--fg); }
.ra-detalle-cuerpo {
  padding: 0 var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Lista de pares dato/valor para la ficha técnica. */
.ra-ficha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
}
.ra-ficha dt { color: var(--fg-muted); }
.ra-ficha dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════════════════════════════
   Estado inicial (sin activo analizado)
   ══════════════════════════════════════════════════════════════════ */
.ra-inicio {
  text-align: center;
  padding: var(--space-5) var(--space-4);
}
.ra-inicio h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
}
.ra-inicio p {
  margin: 0 0 var(--space-3);
  color: var(--fg-muted);
  font-size: var(--text-sm);
}
.ra-inicio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════
   9. Motores y sus métricas
   ══════════════════════════════════════════════════════════════════
   Censo de motores + las cifras crudas que publica cada uno. Un motor
   que corre y calla se ve DISTINTO de uno que falla y de uno que no
   ha intervenido: son tres cosas distintas y confundirlas es lo que
   dejaba la cuenta de motores sin explicación.

   Las barras son la lectura normalizada del propio motor (0-1), no una
   escala derivada aquí. Los motores solo publican escalares finales,
   así que no hay curvas: dibujarlas exigiría recalcular en el
   navegador lo que hace el motor.
   ══════════════════════════════════════════════════════════════════ */
.ra-motores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
/* (2026-08-15) Cada motor en su propio marco numerado ("Motor 1
   (Técnico)", ver pintarMotores en workspace.html): caja con borde,
   fondo elevado y radio, separada de las demás por el gap de la grilla.
   Se usa `--border`/`--border-width`, los tokens definidos en el tema —
   antes este bloque dependía de `--border-subtle`, que no existe en
   ningún token y dejaba la separación sin pintar. */
.ra-motor {
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}

/* Móvil: el censo de motores es una LISTA, no quince tarjetas sueltas.
   Marcos unidos por una línea, relleno mínimo y cabecera de una sola línea
   — así los 15 se recorren de un vistazo y el detalle se abre a demanda. */
@media (max-width: 719px) {
  .ra-motores { gap: 0; }
  .ra-motor {
    padding: 0;
    border-radius: 0;
    border-width: 0 0 var(--border-width);
    background: transparent;
  }
  .ra-motor:last-child { border-bottom: none; }

  /* Resumen del motor: rejilla explícita de dos líneas, no un flex que
     decide solo. Como flex se repartía así — nombre, "?" y estado cabían en
     la primera línea, y "3 lecturas" se quedaba huérfana en una segunda con
     12px de hueco: 78px por motor, con la cuenta flotando sin relación
     visible con nada. (Las reglas móviles anteriores no llegaban a aplicarse:
     las declaraciones base de `.ra-motor-cabecera` viven más abajo en el
     archivo y ganaban por orden a igual especificidad. De ahí el `.ra-motores`
     delante.)

       Motor 10 (Estructura de mercado) ?              ▸
       [Activo]                              6 lecturas

     La primera línea es la identidad y se lleva todo el ancho: con el estado
     compartiéndola, cinco de los quince nombres se recortaban a 360px
     ("Motor 10 (Estructura de merc…"), que es justo el dato que permite
     distinguir un motor de otro. La segunda es el estado del motor, con las
     lecturas alineadas al extremo opuesto.

     Los cuatro datos que pide un resumen escaneable —qué motor, su estado,
     cuántas lecturas y que hay más al desplegar— siguen todos ahí. */
  .ra-motores .ra-motor-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: 2px;
    padding: 8px 0;
    font-size: var(--text-sm);
  }
  /* El nombre del motor NUNCA se recorta — es la regla que ya declara la
     definición base de `.ra-motor-nombre`, y recortarlo con puntos la
     rompía: "Motor 10 (Estructura de merc…" deja de identificar al motor,
     que es justo para lo que está. Si no cabe, parte de línea (esa fila
     queda más alta y las demás no).*/
  .ra-motores .ra-motor-nombre {
    grid-column: 1;
    grid-row: 1;
  }
  .ra-motores .ra-motor-cabecera > .ra-ind-info-btn {
    grid-column: 2;
    grid-row: 1;
    flex: none;
  }
  .ra-motores .ra-motor-cabecera::after {
    grid-column: 3;
    grid-row: 1;
    margin-left: 0;
  }
  /* La insignia traía la interlínea por defecto (27px de caja para 14px de
     texto): en una lista de quince filas eso son 90px de aire repartido. */
  .ra-motores .ra-motor-estado {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    line-height: 1.15;
  }
  .ra-motores .ra-motor-cuenta {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: end;
  }
  .ra-motor-cuerpo { padding-bottom: var(--space-3); }
}

/* (2026-08-19) Cada motor es un <details>: la cabecera es su resumen y el
   cuerpo se pliega. En pantalla ancha se renderiza abierto, así que la
   experiencia de escritorio no cambia. */
.ra-motor-caja {
  min-width: 0;
}
.ra-motor-cabecera {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
  cursor: pointer;
  /* Sin esto el navegador dibuja su propio triángulo delante del resumen y
     rompe el alineado del nombre con el resto de la lista. */
  list-style: none;
}
.ra-motor-cabecera::-webkit-details-marker { display: none; }
.ra-motor-cabecera:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Marca de plegado propia, alineada a la derecha del todo — el mismo
   triángulo que ya usa el bloque "Detalle técnico" (.ra-detalle). */
.ra-motor-cabecera::after {
  content: "▸";
  margin-left: auto;
  color: var(--fg-muted);
  font-size: var(--text-xs);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.ra-motor-caja[open] > .ra-motor-cabecera::after { transform: rotate(90deg); }

/* Cuántas lecturas publicó el motor: el dato que permite decidir si merece
   la pena abrirlo, visible sin abrirlo. */
.ra-motor-cuenta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  white-space: nowrap;
}

.ra-motor-cuerpo {
  min-width: 0;
}
.ra-motor-nombre {
  font-weight: var(--font-weight-semibold);
  min-width: 0;
  /* El nombre del motor nunca se recorta: si un id largo (sin espacios)
     no cabe en 320px, parte de línea igual que los nombres de métrica. */
  overflow-wrap: anywhere;
}
.ra-motor-estado {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.ra-motor-estado--ok { color: var(--accent); }
.ra-motor-estado--error { color: var(--danger); }
.ra-motor-estado--off,
.ra-motor-estado--mudo { color: var(--fg-muted); }

.ra-motor-descripcion {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  /* El texto puede contener ids internos con guiones bajos (p. ej. el
     nombre del motor que describe) — se parte igual que el nombre. */
  overflow-wrap: anywhere;
}

.ra-motor-nota,
.ra-motor-error {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  /* Igual que la descripción: texto variable del motor, se parte. */
  overflow-wrap: anywhere;
}
.ra-motor-error { color: var(--danger); }

.ra-motor-metricas {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.ra-motor-metrica { min-width: 0; }

.ra-motor-metrica-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}
/* El nombre nunca se recorta: si no cabe, parte de línea. Truncar un
   nombre de métrica lo vuelve indescifrable ("riesgo_est…"). */
.ra-motor-metrica-nombre {
  font-size: var(--text-sm);
  min-width: 0;
  overflow-wrap: anywhere;
}
.ra-motor-metrica-valor {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ra-motor-barra {
  margin-top: var(--space-2);
  height: 6px;
  border-radius: 999px;
  background: var(--surface-raised);
  overflow: hidden;
}
.ra-motor-barra-relleno {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--fg-muted);
}
.ra-motor-metrica--bullish .ra-motor-barra-relleno { background: var(--accent); }
.ra-motor-metrica--bearish .ra-motor-barra-relleno { background: var(--danger); }

/* Cifras crudas del motor, en dos columnas de etiqueta/valor. */
.ra-motor-crudas {
  margin: var(--space-2) 0 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--space-3);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  min-width: 0;
}
.ra-motor-crudas dt {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ra-motor-crudas dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}