/* ============================================
   EL RADAR — Capa de estilo de la marca
   ============================================
   Va la ÚLTIMA, en la aplicación (index.html) y en las páginas estáticas
   que genera scripts/build-pages.js, y se apoya en los tokens de
   variables.css. Es el estilo del radar semanal de mercados, aprobado por
   Dani sobre el prototipo (Prototipos/brujula-concepto) y llevado a la web
   el 07/10/2026.

   Regla de este fichero, pedida por Dani: la ESTRUCTURA no se toca (barra
   lateral, cabecera, anchos, rejillas, rellenos). Aquí sólo hay colores,
   superficies, bordes, sombras, radios y tipografía:

   - Rubik en títulos, botones, etiquetas y cifras (con números tabulares);
     Hind en el texto corrido.
   - Superficies opacas: tarjeta blanca con borde #efece4 y sombra suave,
     zonas crema #fdfaf3. Fuera el cristal esmerilado.
   - Ámbar #fab91b sólo de relleno (la sección activa, el botón principal,
     el filtro elegido); como texto, su versión oscura #8a5a00.
   - Rótulos rojos a rotulador (Permanent Marker): la palabra «Radar» del
     logo, los días del radar y el título del carrusel de sugerencias.
   - Verde y rojo, sólo para subir y bajar.

   Si algún día hay que volver al aspecto anterior, este fichero y
   variables.css son el grueso del cambio (ver ESTADO.md).
   ============================================ */

/* ── Base ─────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

h6 { font-weight: var(--weight-medium); }

b, strong { font-weight: var(--weight-semibold); }

::selection {
  background-color: var(--acento);
  color: #1d1e22;
}

:focus-visible { outline-color: var(--acento-texto); }

a { color: var(--acento-texto); }
a:hover { color: var(--tinta); }

/* Cifras alineadas, como en las tablas del radar semanal */
.mono, .cell-mono, .stat-value, .level-value, .insight-price-value,
.rail-levels dd, .rail-flag, .coverage-count, .hero-stat-value, .plan-amount,
.plan-was, .chip-count, .timeline-day-count, .consensus-row-count,
.etf-holding-pct, .etf-alt-meta, .podium-bar, .data-table td,
.sp-cons-stats dd, .sp-level dd, .sp-card-head strong, .sp-related-list strong,
.sp-etf-holdings em {
  font-variant-numeric: tabular-nums;
}

/* «Radar» a rotulador, girado, como el «semanal» del radar semanal. Sirve
   para el logo de la barra, el de la pantalla de carga y el de las páginas
   estáticas. */
.brocha {
  font-family: var(--fuente-rotulo);
  font-weight: 400;
  color: var(--rojo-marca);
  letter-spacing: 0.01em;
  display: inline-block;
  transform: rotate(-3deg);
  margin-left: 0.08em;
}

/* ── Barra lateral ────────────────────────────────────── */
/* Misma barra, mismo ancho. Crema, como las bandas del radar semanal, y
   la sección activa en píldora ámbar, como su índice. */

.sidebar {
  background: var(--banda);
  border-right-color: var(--borde);
}

.sidebar-brand { border-bottom-color: var(--borde); }

.sidebar-brand-icon {
  background: none;
  box-shadow: none;
  border-radius: 50%;
}

.sidebar-brand-icon img {
  width: 40px;
  height: 40px;
  display: block;
}

.sidebar-brand-name {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
  color: var(--tinta);
}

/* En el logo, el rotulador algo mayor: a 17 px se queda corto junto a «El».
   Con interlineado 1 para que no estire la cabecera de la barra. */
.sidebar-brand-name .brocha { font-size: 1.2em; line-height: 1; }

.sidebar-brand-sub,
.sidebar-section-title {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  color: var(--tinta-3);
}

.nav-item {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-medium);
  color: var(--tinta);
  border-radius: var(--pildora);
}

.nav-item:hover {
  background: var(--acento-suave);
  color: var(--tinta);
}

.nav-item.active {
  background: var(--acento);
  color: #1d1e22;
  font-weight: var(--weight-semibold);
}

/* La píldora ya marca la sección; la rayita lateral sobra. */
.nav-item.active::before { display: none; }

/* El candado de «Mi cartera», en tinta sobre el ámbar */
.nav-item.active span svg { color: #1d1e22; }

.sidebar-footer { border-top-color: var(--borde); }

.sidebar-collapse-btn { color: var(--tinta-3); }
.sidebar-collapse-btn:hover { background: var(--acento-suave); color: var(--tinta); }

/* ── Cabecera ─────────────────────────────────────────── */
/* La barra fija del radar semanal: el blanco de la página casi opaco,
   con desenfoque y una sombra de un píxel. */

.header {
  background: color-mix(in srgb, var(--pagina) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--borde);
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2);
}

.header-title {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.header-search input {
  background-color: var(--tarjeta);
  border-color: var(--borde-fuerte);
  font-family: var(--fuente-titulos);
}

.header-search input:focus {
  background-color: var(--tarjeta);
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--accent-primary-glow);
}

/* Los botones redondos de la cabecera, como el de tema del radar semanal */
.header-right .btn-icon {
  border: 1px solid var(--borde-fuerte);
  background: var(--tarjeta);
  color: var(--tinta);
}

.header-right .btn-icon:hover { background: var(--acento-suave); }

/* ── Botones ──────────────────────────────────────────── */

.btn {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-medium);
  border-radius: var(--pildora);
}

.btn-primary {
  background: var(--acento);
  color: #1d1e22;
  font-weight: var(--weight-semibold);
  box-shadow: none;
}

.btn-primary:hover {
  background: #f0ad0c;
  color: #1d1e22;
  box-shadow: 0 6px 16px rgba(250, 185, 27, 0.35);
}

.btn-secondary {
  background: var(--tarjeta);
  color: var(--tinta);
  border-color: var(--borde-fuerte);
}

.btn-secondary:hover {
  background: var(--acento-suave);
  border-color: var(--acento);
}

.btn-ghost { color: var(--tinta-2); }
.btn-ghost:hover { background: var(--acento-suave); color: var(--tinta); }

/* ── Tarjetas ─────────────────────────────────────────── */
/* La tarjeta del radar semanal: blanca, borde cálido, sombra suave. */

.card,
.stat-card,
.radar-toolbar,
.insight,
.rail-card,
.coverage-item,
.company-hero,
.plan-card,
.rev-card {
  background: var(--tarjeta);
  border-color: var(--borde);
  box-shadow: var(--sombra);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Los filos de color que se pintan en un solo lado (sesgo de la
   sugerencia, confianza de la ficha en revisión) los borra el border-color
   de arriba: se devuelven aquí. */
.rail-card { border-top-color: var(--sentiment, var(--neutral)); }
.rev-card { border-left-color: var(--conf, var(--neutral)); }

.card:hover { border-color: var(--borde-fuerte); }

.card-header { border-bottom-color: var(--borde); }

.card-title,
.chart-title {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--tinta);
}

.card-title svg,
.chart-title svg { color: var(--acento-texto); }

.chart-header,
.chart-legend { border-color: var(--borde); }

.legend-item {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-medium);
}

/* Cifras del panel */
.stat-card::before { background: var(--acento); }
.stat-card:hover { border-color: var(--borde-fuerte); box-shadow: var(--shadow-lg); }

.stat-label {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-medium);
  color: var(--tinta-2);
}

.stat-value {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
}

.stat-change { font-family: var(--fuente-titulos); }

/* ── Insignias, etiquetas, formularios ────────────────── */

.badge {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
}

.badge-success { border-color: var(--border-success); }
.badge-danger  { border-color: var(--border-danger); }
.badge-warning { border-color: rgba(250, 185, 27, 0.55); }
.badge-info    { border-color: color-mix(in srgb, var(--info) 30%, transparent); }

.badge-accent {
  background: var(--acento-suave);
  color: var(--acento-texto);
  border-color: rgba(250, 185, 27, 0.55);
}

.tag {
  font-family: var(--fuente-titulos);
  background: var(--banda);
  border-color: var(--borde-fuerte);
}

.form-label {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-medium);
}

/* background-color y no background: el atajo borraría la flecha de los
   desplegables, que es una imagen de fondo. */
.form-input {
  background-color: var(--tarjeta);
  border-color: var(--borde-fuerte);
}

.form-input:hover { border-color: var(--neutro); }

.form-input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--accent-primary-glow);
}

.form-check input[type="checkbox"] { accent-color: var(--acento); }

.toggle { background: var(--bg-tertiary); border-color: var(--borde-fuerte); }
.toggle.active { background: var(--acento); border-color: var(--acento); }
.toggle.active::after { background: #1d1e22; }

.tabs { border-bottom-color: var(--borde); }
.tab { font-family: var(--fuente-titulos); }
.tab.active { color: var(--acento-texto); border-bottom-color: var(--acento); }

.progress-bar { background: var(--borde); }

.spinner { border-color: var(--borde-fuerte); border-top-color: var(--acento); }

/* ── Tablas ───────────────────────────────────────────── */

.table-wrapper { border-color: var(--borde); }

.data-table th {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  color: var(--tinta-3);
  background: var(--banda);
  border-bottom-color: var(--borde);
}

.data-table td {
  color: var(--tinta-2);
  border-bottom-color: var(--borde);
}

.data-table tbody tr:hover { background: var(--banda); }

/* ── Avatares ─────────────────────────────────────────── */

.avatar { font-family: var(--fuente-titulos); }

/* El aro que separa el retrato del fondo: tinta en claro, blanco en oscuro */
.avatar-photo { box-shadow: inset 0 0 0 1px rgba(29, 30, 34, 0.12); }
[data-theme="dark"] .avatar-photo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }

/* ── Capas flotantes ──────────────────────────────────── */

.modal-overlay,
.nav-backdrop { background: rgba(29, 30, 34, 0.45); }

.modal {
  background: var(--tarjeta);
  border-color: var(--borde);
  box-shadow: var(--shadow-xl);
}

.modal-header,
.modal-footer { border-color: var(--borde); }

.tooltip::after,
.dropdown-menu,
.toast,
.suggest-menu {
  background: var(--tarjeta);
  border-color: var(--borde-fuerte);
  font-family: var(--fuente-titulos);
}

.dropdown-divider { background: var(--borde); }

/* ── Radar: cabecera de la sección ────────────────────── */

.section-intro-text h2 {
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.section-intro-text h2 svg { color: var(--acento-texto); }

.live-pill {
  background: var(--tarjeta);
  border-color: var(--borde-fuerte);
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-medium);
  color: var(--tinta-2);
}

/* ── Radar: filtros ───────────────────────────────────── */
/* La barra de filtros en crema, como una banda del radar semanal, con
   buscador y desplegables en píldora (su selector de semana). */

.radar-toolbar { background: var(--banda); }

.radar-search input,
.radar-filters .form-input {
  background-color: var(--tarjeta);
  border-color: var(--borde-fuerte);
  border-radius: var(--pildora);
  font-family: var(--fuente-titulos);
}

.radar-search input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--accent-primary-glow);
}

.chip {
  background: var(--tarjeta);
  border-color: var(--borde-fuerte);
  font-family: var(--fuente-titulos);
  color: var(--tinta-2);
}

.chip:hover {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--tinta);
}

/* El filtro elegido, como la sección activa del índice semanal */
.chip.active {
  background: var(--acento);
  border-color: var(--acento);
  color: #1d1e22;
  font-weight: var(--weight-semibold);
}

.chip-count {
  background: var(--banda);
  font-family: var(--fuente-titulos);
  color: var(--tinta-3);
}

.chip.active .chip-count {
  background: #1d1e22;
  color: #ffffff;
}

/* ── Radar: días ──────────────────────────────────────── */
/* Cada día del listado lleva su rótulo rojo a rotulador, como cada
   sección del radar semanal. «Hoy», además, subrayado en ámbar. */

.timeline-day-label {
  background: none;
  border: 0;
  padding-left: 0;
  font-family: var(--fuente-rotulo);
  font-weight: 400;
  font-size: 1.05rem;
  /* Interlineado justo para que el rótulo mida lo mismo que la píldora de
     antes (34,5 px) y no empuje las fichas. */
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--rojo-marca);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.timeline-day-label svg { display: none; }

.timeline-day-label.is-today {
  background: linear-gradient(transparent 58%, rgba(250, 185, 27, 0.55) 58%);
  border: 0;
  color: var(--rojo-marca);
  border-radius: 0;
}

.timeline-day-rule { background: linear-gradient(90deg, var(--borde-fuerte), transparent); }

.timeline-day-count {
  font-family: var(--fuente-titulos);
  color: var(--tinta-3);
}

/* ── Radar: tarjeta de cada ficha ─────────────────────── */

.insight:hover {
  border-color: var(--borde-fuerte);
  box-shadow: var(--shadow-lg);
}

.insight-ticker {
  background: var(--banda);
  border-color: var(--borde-fuerte);
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-bold);
  color: var(--tinta);
}

.insight-ticker:hover {
  border-color: var(--acento);
  color: var(--acento-texto);
}

.insight-company {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--tinta);
}

.insight-company:hover,
.insight-analyst-name:hover { color: var(--acento-texto); }

.insight-meta { font-family: var(--fuente-titulos); }

.insight-price-value { font-family: var(--fuente-titulos); font-weight: var(--weight-bold); }

.insight-price-value.up {
  color: var(--sube);
  background: var(--success-soft);
  border-color: var(--border-success);
}

.insight-price-value.down {
  color: var(--baja);
  background: var(--danger-soft);
  border-color: var(--border-danger);
}

.insight-price-value.flat {
  color: var(--tinta-2);
  background: var(--neutral-soft);
  border-color: var(--borde-fuerte);
}

.insight-price-label,
.level-label,
.rail-levels dt,
.hero-stat-label,
.consensus-title,
.coverage-label,
.rev-field label {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-semibold);
  color: var(--tinta-3);
}

.insight-analyst-name {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-medium);
}

.insight-summary { color: var(--tinta-2); }

/* La cita, como el «destacado» del radar semanal */
.insight-quote {
  background: var(--banda);
  color: var(--tinta-2);
}

.level {
  background: var(--banda);
  border-color: var(--borde);
}

.level-value { font-family: var(--fuente-titulos); font-weight: var(--weight-bold); }

.level-entry  { border-color: rgba(250, 185, 27, 0.6); }
.level-entry .level-value { color: var(--acento-texto); }
.level-stop   { border-color: var(--border-danger); }
.level-stop .level-value { color: var(--baja); }
.level-target { border-color: var(--border-success); }
.level-target .level-value { color: var(--sube); }
.level-weight { border-color: rgba(250, 185, 27, 0.6); }

.insight-foot { border-top-color: var(--borde); }

.insight-source,
.insight-source a { font-family: var(--fuente-titulos); }

.sentiment { font-family: var(--fuente-titulos); }

/* Seguimiento: crema y ámbar. Pendiente: el recuadro de trazos ámbar del
   radar semanal («Pendiente»). Información: neutro. */
.tracking-badge { font-family: var(--fuente-titulos); }

.tracking-badge.is-tracked {
  background: var(--acento-suave);
  border-color: rgba(250, 185, 27, 0.7);
  color: var(--acento-texto);
}

.tracking-badge.is-tracked:hover { background: rgba(250, 185, 27, 0.32); }

.tracking-badge.is-pending {
  background: var(--acento-suave);
  border: 1px dashed var(--acento);
  color: var(--tinta-2);
}

.tracking-badge.is-pending:hover { background: rgba(250, 185, 27, 0.28); }

.tracking-badge.is-info {
  background: var(--banda);
  border-color: var(--borde-fuerte);
  color: var(--tinta-3);
}

.insight.is-target {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento), var(--shadow-lg);
}

/* ── Radar: banda de analistas ────────────────────────── */

.strip {
  background: var(--banda);
  border-color: var(--borde);
}

.strip-lead {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  color: var(--tinta-3);
}

.strip-lead strong { color: var(--tinta); }

.strip-item {
  background: var(--tarjeta);
  border-color: var(--borde-fuerte);
}

.strip-item:hover { border-color: var(--acento); }

.strip-name {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-semibold);
  color: var(--tinta);
}

/* ── Radar: carrusel de sugerencias ───────────────────── */

/* «Últimas sugerencias», rótulo rojo a rotulador */
.rail-bar h3 {
  font-family: var(--fuente-rotulo);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1;   /* el mismo alto que el título de antes: no empuja nada */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rojo-marca);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.rail-bar h3 svg { color: var(--rojo-marca); }

.rail-card:hover { border-color: var(--acento); }

.rail-ticker {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-extrabold);
  color: var(--tinta);
}

.rail-flag { font-family: var(--fuente-titulos); font-weight: var(--weight-semibold); }
.rail-flag.is-up { color: var(--sube); }
.rail-flag.is-down { color: var(--baja); }
.rail-flag.is-pending { color: var(--acento-texto); background: var(--acento-suave); }

.rail-levels { border-color: var(--borde); }
.rail-levels dd { font-family: var(--fuente-titulos); font-weight: var(--weight-bold); }
.rail-levels dd.is-stop { color: var(--baja); }
.rail-levels dd.is-target { color: var(--sube); }

.rail-by span { font-family: var(--fuente-titulos); }

/* ── Radar: reparto seguimiento / información ─────────── */

.coverage-item.is-tracked { border-color: rgba(250, 185, 27, 0.7); }

.coverage-item.is-tracked:hover {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.is-tracked .coverage-icon {
  background: var(--acento-suave);
  color: var(--acento-texto);
}

.coverage-count { font-family: var(--fuente-titulos); font-weight: var(--weight-bold); }

/* Panel: últimas del radar */
.radar-strip-item {
  background: var(--banda);
  border-color: var(--borde);
  border-left-color: var(--insight-color, var(--neutral));
}

.radar-strip-item:hover {
  background: var(--tarjeta);
  border-color: var(--borde-fuerte);
  border-left-color: var(--insight-color, var(--neutral));
}

.radar-strip-ticker { font-family: var(--fuente-titulos); font-weight: var(--weight-bold); }

/* ── Radar: ficha de un valor ─────────────────────────── */
/* La cabecera del valor, como el titular del radar semanal: filo ámbar
   arriba. */

.company-hero { border-top: 4px solid var(--acento); }

.company-hero-ticker {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.11em;
  color: var(--acento-texto);
}

.company-hero-name {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
}

.hero-stat-value { font-family: var(--fuente-titulos); font-weight: var(--weight-bold); }

.consensus-verdict { font-family: var(--fuente-titulos); font-weight: var(--weight-bold); }
.consensus-bar { background: var(--borde); }
.consensus-row { font-family: var(--fuente-titulos); }

/* ── Zona privada: muro de pago y plan ────────────────── */

.paywall-pitch h2 {
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
}

/* «nada», a rotulador en rojo en lugar del degradado violeta */
.paywall-pitch h2 em {
  font-family: var(--fuente-rotulo);
  font-weight: 400;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--rojo-marca);
  display: inline-block;
  transform: rotate(-3deg);
}

.feature-icon {
  background: var(--acento-suave);
  color: var(--acento-texto);
}

.feature-title { font-family: var(--fuente-titulos); }

.plan-card { border-color: var(--acento); }

.plan-badge {
  background: var(--acento);
  color: #1d1e22;
  font-family: var(--fuente-titulos);
}

.plan-amount { font-family: var(--fuente-titulos); font-weight: var(--weight-extrabold); }
.plan-was { font-family: var(--fuente-titulos); }

.plan-launch {
  background: var(--acento-suave);
  border-color: rgba(250, 185, 27, 0.7);
  color: var(--acento-texto);
  font-family: var(--fuente-titulos);
}

.plan-slots { background: var(--banda); border-color: var(--borde); }
.plan-slots.is-low { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-texto); }
.plan-slots.is-low strong { color: var(--acento-texto); }
.plan-includes { border-bottom-color: var(--borde); }

.holding { background: var(--banda); border-color: var(--borde); }
.holding:hover { background: var(--tarjeta); border-color: var(--borde-fuerte); }
.holding-ticker { font-family: var(--fuente-titulos); }

.holding-news {
  background: var(--acento-suave);
  color: var(--acento-texto);
  font-family: var(--fuente-titulos);
}

.suggest-item strong { font-family: var(--fuente-titulos); }
.suggest-item:hover { background: var(--acento-suave); }

/* Aviso de modo demostración: el «Pendiente» de trazos del radar semanal */
.demo-banner {
  background: var(--acento-suave);
  border: 2px dashed var(--acento);
}

.demo-banner svg,
.demo-banner strong { color: var(--acento-texto); }

/* ── Administración ───────────────────────────────────── */

.ingest-dropzone:hover,
.ingest-dropzone.is-over {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.rev-note { border-color: rgba(250, 185, 27, 0.6); }
.rev-input { background-color: var(--tarjeta); border-color: var(--borde-fuerte); }
.rev-input:focus { border-color: var(--acento); }
.rev-ticker { font-family: var(--fuente-titulos); }

/* ── Fichas de ETF ────────────────────────────────────── */

.etf-chip { background: var(--banda); border-color: var(--borde); font-family: var(--fuente-titulos); }
.etf-block { background: var(--banda); border-color: var(--borde); }
.etf-block-title { font-family: var(--fuente-titulos); }
.etf-holding-bar { background: var(--borde); }
.etf-holding-pct, .etf-alt-meta { font-family: var(--fuente-titulos); }
.etf-alt-name { font-family: var(--fuente-titulos); }
.etf-roll { border-color: rgba(250, 185, 27, 0.55); }

/* ── Gráficos ─────────────────────────────────────────── */

.chart-range-selector { background: var(--banda); }
.chart-range-btn { font-family: var(--fuente-titulos); }
.chart-range-btn.active { background: var(--acento); color: #1d1e22; }

.risk-reward-bar { background: var(--borde); }

/* Podio: el oro, la plata y el bronce se quedan, pero como texto sobre
   blanco necesitan sus tonos oscuros para leerse. */
.podium-name { font-family: var(--fuente-titulos); }
.podium-bar { font-family: var(--fuente-titulos); font-weight: var(--weight-extrabold); }
.podium-place:nth-child(1) .podium-bar { color: #5c5e66; }
.podium-place:nth-child(2) .podium-bar { color: #8a5a00; }
.podium-place:nth-child(3) .podium-bar { color: #a3560f; }
[data-theme="dark"] .podium-place:nth-child(1) .podium-bar { color: #c1c3c7; }
[data-theme="dark"] .podium-place:nth-child(2) .podium-bar { color: #fab91b; }
[data-theme="dark"] .podium-place:nth-child(3) .podium-bar { color: #e08a3c; }

.heat-very-negative { background: color-mix(in srgb, var(--baja) 28%, transparent); }
.heat-negative      { background: color-mix(in srgb, var(--baja) 14%, transparent); }
.heat-positive      { background: color-mix(in srgb, var(--sube) 14%, transparent); }
.heat-very-positive { background: color-mix(in srgb, var(--sube) 28%, transparent); }

/* ── Pie legal ────────────────────────────────────────── */
/* El pie oscuro del radar semanal, en el mismo hueco que antes. */

.app-footer {
  background: var(--pie-fondo);
  border-top: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.app-footer-disclaimer { color: var(--pie-texto); }
.app-footer-disclaimer strong { color: var(--pie-titulo); }
.app-footer-links { color: var(--pie-texto); font-family: var(--fuente-titulos); }
.app-footer-links a { color: var(--pie-titulo); }
.app-footer-links a:hover { color: var(--acento); }

/* ── Móvil ────────────────────────────────────────────── */

@media (max-width: 480px) {
  .timeline-day-label { font-size: 0.92rem; padding-left: 0; }
}

/* ═════════════════════════════════════════════════════
   PÁGINAS ESTÁTICAS (valores, índice y textos legales)
   ═════════════════════════════════════════════════════
   Las genera scripts/build-pages.js con su propia hoja (static.css). Van
   siempre en claro, que es el tema por defecto: no tienen botón de tema y
   casi todas sus visitas llegan desde un buscador. */

body.sp-pagina { background: var(--pagina); }

/* Cabecera y logo */
.sp-brand-icon {
  background: none;
  box-shadow: none;
  border-radius: 50%;
}

.sp-brand-icon img {
  width: 38px;
  height: 38px;
  display: block;
}

.sp-brand-text strong {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
  color: var(--tinta);
}

.sp-brand-text strong .brocha { font-size: 1.2em; line-height: 1; }

.sp-brand-text small {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  color: var(--tinta-3);
}

.sp-nav a {
  font-family: var(--fuente-titulos);
  color: var(--tinta-2);
}

.sp-nav a:hover { color: var(--tinta); }

.sp-nav .sp-cta,
.sp-nav .sp-cta:hover {
  background: var(--acento);
  color: #1d1e22;
  border-radius: var(--pildora);
  font-weight: var(--weight-semibold);
  box-shadow: none;
}

.sp-nav .sp-cta:hover { background: #f0ad0c; }

.sp-breadcrumbs { font-family: var(--fuente-titulos); color: var(--tinta-3); }
.sp-breadcrumbs a { color: var(--tinta-3); }
.sp-breadcrumbs a:hover { color: var(--acento-texto); }

/* Portada de cada página */
.sp-hero { border-bottom-color: var(--borde); }

.sp-eyebrow {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.11em;
  color: var(--acento-texto);
}

.sp-hero h1 { font-weight: var(--weight-extrabold); letter-spacing: -0.03em; }
.sp-lede { color: var(--tinta-2); }

/* Tarjetas: consenso, opiniones y rejilla del índice */
.sp-consensus,
.sp-insight,
.sp-card {
  background: var(--tarjeta);
  border-color: var(--borde);
  box-shadow: var(--sombra);
}

.sp-insight { border-left-color: var(--sentiment, var(--neutral)); }
.sp-card,
.sp-card:hover { border-top-color: var(--sentiment, var(--neutral)); }
.sp-card:hover { border-color: var(--borde-fuerte); border-top-color: var(--sentiment, var(--neutral)); }

.sp-cons-title,
.sp-level dt,
.sp-cons-stats dt {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-semibold);
  color: var(--tinta-3);
}

.sp-cons-verdict { font-family: var(--fuente-titulos); }
.sp-cons-bar { background: var(--borde); }
.sp-cons-link { border-top-color: var(--borde); font-family: var(--fuente-titulos); }

.sp-cons-stats dd,
.sp-level dd,
.sp-card-head strong,
.sp-related-list strong,
.sp-etf-holdings em,
.sp-etf-alt-name span { font-family: var(--fuente-titulos); }

.sp-analyst,
.sp-type,
.sp-sentiment,
.sp-date,
.sp-insight-foot,
.sp-card-meta,
.sp-card-foot { font-family: var(--fuente-titulos); }

.sp-avatar { font-family: var(--fuente-titulos); }
.sp-avatar-photo { box-shadow: inset 0 0 0 1px rgba(29, 30, 34, 0.12); }

.sp-type { border-color: var(--borde-fuerte); color: var(--tinta-3); }
.sp-summary,
.sp-card-summary { color: var(--tinta-2); }

.sp-quote {
  background: var(--banda);
  color: var(--tinta-2);
}

.sp-level {
  background: var(--banda);
  border-color: var(--borde);
}

.sp-level-entry  { border-color: rgba(250, 185, 27, 0.6); }
.sp-level-entry dd { color: var(--acento-texto); }
.sp-level-stop   { border-color: var(--border-danger); }
.sp-level-stop dd { color: var(--baja); }
.sp-level-target { border-color: var(--border-success); }
.sp-level-target dd { color: var(--sube); }
.sp-level-weight { border-color: rgba(250, 185, 27, 0.6); }
.sp-level-now    { border-color: var(--borde-fuerte); }

.sp-insight-foot,
.sp-card-foot { border-top-color: var(--borde); }

.sp-pending {
  background: var(--acento-suave);
  border-left-color: var(--acento);
}

.sp-pending strong { color: var(--acento-texto); }

/* Llamadas a la avisos: el bloque del índice, como la tarjeta del plan, y
   la banda de cada valor en ámbar con texto tinta, como en la aplicación. */
.sp-cta-block {
  background: var(--tarjeta);
  border-color: var(--acento);
  box-shadow: var(--sombra);
}

.sp-cta-band {
  background: var(--acento);
  box-shadow: var(--sombra);
}

.sp-cta-band h2 { color: #1d1e22; }
.sp-cta-band p { color: rgba(29, 30, 34, 0.86); }

.sp-cta-band .btn,
.sp-cta-band .btn:hover {
  background: #1d1e22;
  color: #ffffff;
  border-color: #1d1e22;
}

.sp-cta-band .btn:hover { background: #000000; }

/* Valores relacionados */
.sp-related-list a {
  background: var(--banda);
  border-color: var(--borde);
  color: var(--tinta-2);
}

.sp-related-list a:hover {
  background: var(--tarjeta);
  border-color: var(--borde-fuerte);
}

/* ETF */
.sp-etf-chips li { background: var(--banda); border-color: var(--borde); font-family: var(--fuente-titulos); }
.sp-etf-block { background: var(--banda); border-color: var(--borde); }
.sp-etf-block h3 { font-family: var(--fuente-titulos); }
.sp-etf-holdings li { border-bottom-color: var(--borde); }
.sp-etf-alt + .sp-etf-alt { border-top-color: var(--borde); }
.sp-etf-alt-name span { background: var(--bg-tertiary); }
.sp-etf-roll { border-color: rgba(250, 185, 27, 0.55); }

/* Textos legales */
.sp-legal-page h2 { border-top-color: var(--borde); }
.sp-legal-page p,
.sp-legal-list,
.sp-legal-table td { color: var(--tinta-2); }
.sp-legal-page .sp-lead { color: var(--tinta-3); }
.sp-legal-page a { color: var(--acento-texto); }
.sp-legal-page code { background: var(--banda); }

.sp-legal-data {
  background: var(--banda);
  border-color: var(--borde);
}

.sp-legal-data dt,
.sp-legal-table th {
  font-family: var(--fuente-titulos);
  font-weight: var(--weight-semibold);
  color: var(--tinta-3);
}

.sp-legal-table th { background: var(--banda); }
.sp-legal-table th,
.sp-legal-table td { border-bottom-color: var(--borde); }

.sp-legal-list::marker,
.sp-legal-list li::marker { color: var(--acento-texto); }

.sp-legal-warning {
  background: var(--acento-suave);
  border-left-color: var(--acento);
}

.sp-legal-quote {
  border-left-color: var(--acento);
  background: var(--banda);
}

.sp-legal-updated { border-top-color: var(--borde); font-family: var(--fuente-titulos); }

/* Pie oscuro, el mismo que el de la aplicación */
.sp-footer {
  background: var(--pie-fondo);
  border-top: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sp-disclaimer,
.sp-legal { color: var(--pie-texto); }
.sp-disclaimer strong { color: var(--pie-titulo); }
.sp-legal,
.sp-legal-links { font-family: var(--fuente-titulos); }
.sp-footer a { color: var(--pie-titulo); }
.sp-footer a:hover { color: var(--acento); }
.sp-footer .sp-sep { color: var(--pie-texto); }