/* ============================================================
   APEX — LAS TRES SUPERFICIES DE INVERSIÓN
   Cartera (.pf-) · Seguimiento (.wl-) · Ficha de un activo (.as-)

   Se carga la ÚLTIMA y TODA regla lleva uno de esos tres prefijos, así
   que no puede tocar ninguna pantalla anterior. Es la misma garantía de
   no regresión que `max.css` consigue con `[data-tier="max"]` y
   `mode.css` con `[data-mode]`.

   ============================================================
   NI UN COLOR ESCRITO A MANO

   Todo sale de los tokens de `base.css` — `--bg`, `--surface`,
   `--text`, `--muted`, `--border`, `--green`, `--red`, `--blue`,
   `--violet` — así que las tres pantallas se ven bien en claro y en
   oscuro sin un solo bloque `[data-theme="dark"]` propio, y sin poder
   divergir de la aplicación aunque otra hoja refine un token. La única
   excepción permitida es `#fff` sobre el relleno carmesí, igual que
   `.btn` en `components.css`.

   VERDE y ROJO se usan SOLO para resultado (ganancia/pérdida), que es
   lo que significan en APEX. Nunca como color de categoría — para eso
   están `--blue` y `--violet` en el donut de `portfolio/charts.js`.

   ============================================================
   `[aria-hidden="true"]` SIGUE PROHIBIDO DE FACTO

   `base.css` trae la regla GLOBAL `[aria-hidden="true"]{display:none
   !important}`: marcar así un adorno lo borra sin error y sin aviso.
   Aquí no se usa — los adornos son elementos VACÍOS y el SVG del donut
   lleva `role="img"` con su descripción, que es lo contrario de
   esconderlo.
   ============================================================ */

/* ------------------------------------------------------------
   0 · LO COMÚN A LAS TRES
   ------------------------------------------------------------ */
/* LA MEDIDA.

   Sin un ancho máximo, una fila de la cartera se estira hasta donde dé
   la pantalla y la vista salta del ticker —pegado al borde izquierdo—
   a su cifra, a más de mil píxeles. Una columna cómoda es lo que hace
   que una lista de posiciones se lea de un vistazo; es la misma
   decisión que el documento del análisis ya toma con `--mode-measure`.

   Va en el contenedor de la vista, no en cada sección, para que el
   titular y las filas compartan el mismo borde izquierdo. */
#view-portfolio, #view-watchlist, #view-asset{ max-width:920px; }

/* En modo Inversión el ritmo lo multiplica `mode.css`: una decisión que
   se juega en meses se LEE, así que la medida se acorta un poco más. */
html[data-mode="investment"] #view-portfolio,
html[data-mode="investment"] #view-watchlist,
html[data-mode="investment"] #view-asset{ max-width:860px; }

.pf-card, .wl-card, .as-card{
  padding:34px 0 0;
  margin:34px 0 0;
  border-top:1px solid var(--border-soft);
}
.pf-card:first-of-type, .wl-card:first-of-type, .as-card:first-of-type{
  padding-top:0; margin-top:0; border-top:0;
}
/* La ÚNICA que conserva caja es la que invita a empezar: un estado
   vacío sin contorno se lee como texto perdido en la página, no como
   algo que se puede pulsar. */
.pf-card.is-panel, .wl-card.is-panel, .as-card.is-panel{
  padding:22px 24px; margin-top:26px;
  background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg);
}
.pf-h, .wl-h, .as-h{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:680;
  letter-spacing:-0.022em;
  margin:0 0 7px;
  color:var(--text);
}
/* EL TÍTULO DE UTILIDAD — cuarto nivel de la jerarquía.

   Lo que no se mide sigue DECLARADO y visible (decir que falta es
   información), pero no puede pesar lo mismo que «Movimiento». Aquí la
   diferencia la hace la tipografía, no una caja ni un color. */
.as-h.as-h-quiet{
  font-family:var(--font-body);
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:var(--space-3);
}
.pf-h4, .as-h4{
  font-size:var(--text-label-size);
  font-weight:var(--text-label-weight);
  letter-spacing:var(--text-label-ls);
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 12px;
}
.pf-sub, .wl-sub, .as-sub{
  font-size:var(--text-body-sm-size);
  line-height:var(--text-body-sm-lh);
  color:var(--muted);
  margin:0 0 16px;
  max-width:62ch;
}

/* La procedencia. Deliberadamente discreta pero SIEMPRE visible: un
   número de mercado sin fuente y sin hora no es un dato. */
.pf-pos-src, .wl-src, .as-src{
  display:block;
  font-size:11.5px;
  color:var(--muted);
  opacity:.85;
  margin:4px 0 0;
}
.as-src-warn{ opacity:1; color:var(--amber-text); }

/* APEX OPINA — se ve DISTINTO de un hecho a propósito. Lo que APEX mide
   y lo que APEX pregunta no pueden leerse igual: el filo carmesí es la
   marca de que aquí empieza una pregunta, no una afirmación. */
.pf-opina, .wl-opina, .as-opina{
  border-left:2px solid var(--blue);
  background:var(--blue-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:12px 14px;
  margin:12px 0 0;
  font-size:var(--text-body-sm-size);
  line-height:1.55;
  color:var(--text);
}
.pf-opina-k, .wl-opina-k, .as-opina-k{
  display:block;
  font-size:11px; font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:5px;
}

/* Los HUECOS. Van en la pantalla, no en una nota al pie: decir que
   falta es información. */
.pf-gap-list, .as-gap-list{ list-style:none; margin:0; padding:0; }
.pf-gap-list li, .as-gap-list li{
  padding:14px 0;
  border-top:1px solid var(--border-soft);
  font-size:var(--text-body-sm-size);
  line-height:1.5;
}
.pf-gap-list li:first-child, .as-gap-list li:first-child{ border-top:0; }
.pf-gap-list strong, .as-gap-list strong{ color:var(--text); font-weight:600; }
.pf-gap-list span, .as-gap-list span{ color:var(--muted); }

/* ------------------------------------------------------------
   1 · CARTERA
   ------------------------------------------------------------ */
/* EL TITULAR — una cifra manda, el resto acompaña.

   Antes eran TRES columnas del mismo tamaño (valor, coste, resultado):
   tres cifras compitiendo entre sí, ninguna primera. Una cartera se
   abre para saber cuánto vale y cómo va; eso son DOS cifras, y el
   coste es contexto. La jerarquía la hacen el tamaño y el aire, no una
   caja alrededor. */
.pf-hero{ padding:2px 0 0; }
.pf-hero-head{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.pf-hero-k{
  font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.pf-hero-v{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:clamp(36px, 5.4vw, 52px);
  font-weight:700;
  letter-spacing:-0.038em;
  line-height:1.02;
  color:var(--text);
}
/* La variación va PEGADA al valor y con su signo dentro del número
   (`dinero()`), no solo en el color: quien no distingue verde de rojo
   tiene que poder leerla igual. */
.pf-hero-delta{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:16.5px; font-weight:650; letter-spacing:-0.012em;
  color:var(--muted);
}
.pf-hero-delta span{ font-weight:600; opacity:.9; }
.pf-hero-delta.pf-up{ color:var(--green-text); }
.pf-hero-delta.pf-down{ color:var(--red-text); }

/* La nota de cobertura de una cifra: por qué esa cifra no se puede
   restar de la de al lado. Va bajo el número, no en una tarjeta
   aparte. */
.pf-stat-note{ margin-top:3px; font-size:12px; line-height:1.5; color:var(--muted2); max-width:52ch; }

/* Las filas tranquilas de debajo: etiqueta a la izquierda, cifra a la
   derecha, un filete de 1px entre ellas. Sin relleno, sin caja. */
.pf-hero-rows{ margin-top:26px; display:flex; flex-direction:column; }
.pf-hrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:15px 0;
  border-top:1px solid var(--border-soft);
}
.pf-hrow-k{ font-size:14.5px; font-weight:600; color:var(--text); }
.pf-hrow-v{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:16.5px; font-weight:650; letter-spacing:-0.012em; color:var(--text);
}

/* La nota de cobertura NO es letra pequeña: es lo que separa un total
   medido de uno inventado, así que va pegada a las cifras. */
.pf-cobertura{
  margin:0;
  padding:15px 0 0;
  border-top:1px solid var(--border-soft);
  font-size:12.5px;
  line-height:1.55;
  color:var(--muted);
}
.pf-cobertura-2{ margin-top:7px; padding-top:0; border-top:0; }

.pf-reparto{
  display:grid;
  grid-template-columns:minmax(0, 260px) minmax(0, 1fr);
  gap:32px;
  align-items:start;
}
.pf-donut-wrap{ display:flex; flex-direction:column; gap:16px; }
.pf-donut{ position:relative; width:196px; height:196px; max-width:100%; }
/* El SVG llena su caja. Con su tamaño intrínseco (168) dentro de una
   caja de 196, el anillo quedaba arriba a la izquierda y la cifra del
   centro —centrada en la CAJA— caía 14 px a la derecha del centro del
   anillo, montada sobre él («$5,500.00» tocando el borde interior). */
.pf-donut svg{ display:block; width:100%; height:100%; }
.pf-donut-centro{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; pointer-events:none;
}
.pf-donut-valor{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:21px; font-weight:700; letter-spacing:-0.03em; color:var(--text);
}
.pf-donut-nota{
  font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}

/* La leyenda ES la tabla: las mismas cifras en texto, para quien no
   distingue los tonos y para un lector de pantalla. */
.pf-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.pf-legend-item{
  display:flex; align-items:center; gap:11px;
  padding:13px 0; border-top:1px solid var(--border-soft);
}
.pf-legend-item:first-child{ border-top:0; padding-top:4px; }
/* Redondo, no cuadrado: es el mismo punto que marca una serie en un
   gráfico, y así se lee como parte del donut y no como una viñeta. */
.pf-swatch{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.pf-legend-label{ font-size:14.5px; font-weight:600; color:var(--text); flex:1; min-width:0; }
.pf-legend-val{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:15px; font-weight:650; letter-spacing:-0.01em; color:var(--text);
}

.pf-bars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.pf-bar-row{
  display:grid;
  grid-template-columns:minmax(58px, 88px) minmax(0, 1fr) 54px;
  gap:12px; align-items:center;
}
.pf-bar-label{
  font-family:var(--font-num);font-variant-numeric:tabular-nums; font-size:12px; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pf-bar-track{
  height:8px; border-radius:var(--r-pill);
  background:var(--border-soft); overflow:hidden;
}
.pf-bar-fill{
  display:block; height:100%; border-radius:var(--r-pill);
  /* Un solo tono para todas: aquí la identidad va en la ETIQUETA, no
     en el color. Y es el de CATEGORÍA, no el carmesí de marca, que se
     confunde con el rojo de pérdida. */
  background:var(--cat-1);
}
.pf-bar-val{
  font-family:var(--font-num);font-variant-numeric:tabular-nums; font-size:12px; color:var(--muted); text-align:right;
}

.pf-read{ padding:16px 0; border-top:1px solid var(--border-soft); }
.pf-read:first-of-type{ border-top:0; padding-top:4px; }
.pf-read-t{ font-size:14.5px; font-weight:650; margin:0 0 7px; color:var(--text); }
.pf-read-fact{ margin:0 0 9px; font-size:var(--text-body-size); line-height:1.55; color:var(--text); }
.pf-read-why{ margin:0; font-size:var(--text-body-sm-size); line-height:1.55; color:var(--muted); }
.pf-read-k{
  display:block; font-family:var(--font-num);font-variant-numeric:tabular-nums; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  opacity:.8; margin-bottom:3px;
}
.pf-read-ev{
  margin:10px 0 0; font-family:var(--font-num);font-variant-numeric:tabular-nums; font-size:11px;
  color:var(--muted); opacity:.8;
}

.pf-pos{ list-style:none; margin:0; padding:0; }
.pf-pos-row{ padding:18px 0; border-top:1px solid var(--border-soft); }
.pf-pos-row:first-child{ border-top:0; padding-top:4px; }
.pf-pos-main{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
/* El ticker es un BOTÓN (abre la ficha), pero no tiene por qué parecer
   un enlace subrayado: el subrayado aparece al apuntarlo. Una lista de
   ocho posiciones con ocho subrayados es ruido. */
.pf-asset{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:16.5px; font-weight:700; letter-spacing:-0.015em;
  color:var(--text); background:none; padding:0; cursor:pointer;
  border:0; border-bottom:1px solid transparent;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pf-asset:hover{ border-bottom-color:var(--blue); color:var(--blue); }
/* ÁREA TÁCTIL (WCAG 2.5.8, 24×24): el texto mide 21 px de alto a 390.
   Se amplía la zona pulsable con un pseudo-elemento vacío, sin tocar
   el aspecto ni el subrayado. Lo encontró la auditoría final. */
.pf-asset{ position:relative; }
.pf-asset::after{ content:''; position:absolute; inset:-4px -2px; }
@media(max-width:900px){
  .pf-asset{ min-height:44px; min-width:44px; }
  .ac-check{ min-height:44px; }
}
.pf-pos-w{ font-size:12.5px; font-weight:500; color:var(--muted); }
.pf-pos-nums{ display:flex; gap:28px; flex-wrap:wrap; margin-top:11px; }
.pf-pos-num{
  display:flex; flex-direction:column-reverse; gap:3px;
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:16px; font-weight:650; letter-spacing:-0.015em;
}
/* La etiqueta va DEBAJO de su cifra (`column-reverse`): al recorrer la
   fila con la vista se leen primero los números, que es a lo que se
   entra. */
.pf-pos-num em{
  font-style:normal; font-family:var(--font-body);
  font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.pf-old{ font-family:var(--font-body); font-size:11px; color:var(--muted); font-style:italic; }
.pf-pos-tesis{
  margin:10px 0 0; padding-left:11px; border-left:2px solid var(--border);
  font-size:var(--text-body-sm-size); line-height:1.5; color:var(--muted);
}

.pf-empty, .wl-empty, .as-empty{ text-align:left; }
/* Los CTA de los estados vacíos no se estiran de lado a lado: `.btn`
   puede venir a ancho completo según el contexto, y una barra carmesí
   de 970 px es justo el «relleno decorativo» que esta pantalla evita. */
.pf-cta{ align-self:flex-start; width:auto; display:inline-flex; }
.pf-skeleton{ min-height:120px; }
.pf-sk-l{ height:13px; border-radius:var(--r-xs); margin-bottom:11px; max-width:320px; }
.pf-sk-s{ max-width:210px; }

/* ------------------------------------------------------------
   2 · SEGUIMIENTO
   ------------------------------------------------------------ */
/* LA BARRA DE ALTA. Sin caja: un filete debajo la separa de la lista
   y ya está. Es la diferencia entre «hay un formulario y además una
   lista» y «esta es la lista, y se le pueden añadir activos». */
.wl-add{ margin:0 0 var(--space-5); padding:0 0 var(--space-4); border-bottom:1px solid var(--border-soft); }
.wl-add .wl-add-row{ margin-top:8px; align-items:center; }
.wl-add-label, .as-search-label{
  display:block; font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:9px;
}
.wl-add-row, .as-search-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
/* El botón de alta usa la talla pequeña del sistema: en una barra de
   una línea, el CTA grande volvía a hacerla el elemento dominante. */
.wl-add-row > .btn{ height:var(--ctl-h-sm); padding-inline:16px; font-size:var(--text-body-sm-size); }
/* El botón NO se estira. `.btn` de components.css puede venir a ancho
   completo según el contexto, y al envolver la fila se quedaba como una
   barra enorme debajo del campo — lo vio una captura, no una prueba. */
.wl-add-row > .btn, .as-search-row > .btn{ flex:0 0 auto; width:auto; }
.wl-add-combo, .as-search-combo{ position:relative; flex:0 0 190px; }
.wl-input, .as-input{
  width:100%; padding:10px 13px;
  background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-sm);
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:14.5px; font-weight:600; letter-spacing:-0.005em;
}
.wl-input-note{ flex:1 1 220px; font-family:var(--font-body); font-weight:400; letter-spacing:0; }
.wl-input:focus, .as-input:focus{  border-color:var(--blue); box-shadow:var(--shadow-focus); }
.wl-add-err{ margin:10px 0 0; font-size:12.5px; color:var(--red-text); }
.wl-add-err[hidden]{ display:none; }

/* ============================================================
   LA LISTA DE SEGUIMIENTO

   Una lista financiera, no una pila de tarjetas. Lo que la organiza es
   la TIPOGRAFÍA, la ALINEACIÓN y un filete de 1px entre filas — no un
   contorno por elemento. De ahí sale la densidad: se pueden recorrer
   veinte activos sin que la pantalla grite.

   TRES PRINCIPIOS, y ninguno es decorativo:

     1 · UNA COLUMNA POR DATO, y la misma en todas las filas. El ojo
         baja en vertical sin recolocarse, que es lo que hace que una
         lista se «escanee» en vez de leerse. La rejilla es la misma en
         la cabecera y en las filas, así que los rótulos caen justo
         encima de su columna.
     2 · EL COLOR SOLO DONDE SIGNIFICA. Verde y rojo son sube y baja, y
         no se usan para nada más. El acento de marca aparece en el
         filo de una fila que se movió y en el foco. Nada más lleva
         color.
     3 · CIFRAS TABULARES. `--font-num` con `tabular-nums`: sin ellas
         los dígitos bailan de fila en fila y las columnas dejan de
         estar alineadas aunque el CSS diga que lo están.
   ============================================================ */

/* EL ESTADO DE LA FUENTE Y EL RESUMEN, arriba y en tono de nota. No
   son titulares: son el contexto que permite confiar en lo de abajo. */
.wl-state{
  margin:0 0 12px; padding:10px 12px;
  background:var(--surface2); border-radius:var(--r-sm);
  font-size:var(--text-body-sm-size); line-height:1.5; color:var(--muted);
}
.wl-state.is-down{ color:var(--text); }
.wl-summary{
  margin:0 0 14px; font-size:var(--text-body-sm-size); color:var(--muted);
  letter-spacing:0.01em;
}
.wl-summary strong{ color:var(--text); font-weight:650; }
.wl-tope{
  margin:14px 0 0; font-size:var(--text-caption-size); color:var(--muted2);
}

/* LOS CONTROLES. Discretos y alineados a la izquierda, como una barra
   de herramientas de lectura — no como los filtros de un buscador. */
.wl-controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3);
  margin:0 0 6px;
}
.wl-seg{ flex:0 0 auto; }
.wl-seg-i{ white-space:nowrap; }

/* ------------------------------------------------------------
   LA REJILLA — una sola definición, compartida por la cabecera y las
   filas. Cambiarla en un sitio y no en el otro desalinearía los
   rótulos, así que se declara UNA vez con una variable.
   ------------------------------------------------------------ */
.wl-cols, .wl-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px minmax(88px,auto) minmax(78px,auto);
  align-items:center;
  gap:var(--space-4);
}

.wl-cols{
  padding:0 0 8px; border-bottom:1px solid var(--border);
  font-size:var(--text-caption-size); font-weight:650;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--muted2);
}
.wl-cols .wl-h-price, .wl-cols .wl-h-chg{ text-align:right; }
.wl-cols .wl-h-spark{ text-align:center; }
/* La cabecera reserva el sitio de los dos botones de acción para que
   las columnas de la fila caigan donde dice el rótulo. */
/* Y sangra igual que las filas, para que su filete mida lo mismo que
   el de ellas. */
.wl-cols{
  margin:0 calc(-1 * var(--space-3)); padding-left:var(--space-3);
  padding-right:calc(var(--ctl-h-sm) * 2 + var(--space-2) + var(--space-3) + var(--space-3));
}

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

/* LA FILA SANGRA HACIA EL MARGEN, y el texto se queda en su columna.
   Sin aire lateral, el velo del `:hover` empezaba justo en la primera
   letra y el filo del movimiento material (`inset 2px`) se pintaba
   ENCIMA de ella: la «N» de NVDA cortada por la raya. Con el margen
   negativo y el mismo relleno, el texto no se mueve ni un píxel y el
   velo y el filo quedan fuera de él. 12 px caben en el hueco de `main`
   en todas las anchuras (el de 14 px de móvil incluido). */
.wl-row{
  margin:0 calc(-1 * var(--space-3)); padding:0 var(--space-3);
  border-bottom:1px solid var(--border-soft);
  transition:background-color .14s ease;
}
.wl-row:last-child{ border-bottom:0; }
/* EL ESTADO DE PASO DEL RATÓN ES UN VELO, no un borde: la fila no se
   mueve ni cambia de tamaño, solo se aclara. Es la diferencia entre
   una lista que responde y una que salta. */
.wl-row:hover{ background:var(--surface2); }
.wl-row.is-open{ background:var(--surface2); }

/* Lo que se movió se distingue por un FILO, no por un relleno: el
   carmesí de APEX va en dosis mínimas y nunca como fondo. */
.wl-row.is-material{ box-shadow:inset 2px 0 0 var(--blue); }

.wl-line{ display:flex; align-items:center; gap:var(--space-2); }

/* LA FILA ENTERA ES EL BOTÓN. Antes solo lo era el ticker, un objetivo
   de doce píxeles de alto, y el resto de la fila parecía pulsable sin
   serlo. Los dos botones de acción quedan FUERA (un botón no puede
   anidar otro) pero dentro de la misma línea. */
.wl-main{
  flex:1 1 auto; min-width:0;
  padding:13px 0; border:0; background:none; cursor:pointer;
  text-align:left; font:inherit; color:inherit;
  border-radius:var(--r-xs);
}
.wl-main:focus-visible{  box-shadow:var(--shadow-focus); }

.wl-id{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.wl-tk{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:var(--text-body-size); font-weight:700; letter-spacing:-0.01em;
  color:var(--text); transition:color .14s ease;
}
.wl-name{
  font-size:var(--text-caption-size); color:var(--muted); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wl-main:hover .wl-tk{ color:var(--blue); }

/* LA MICROLÍNEA es subordinada: ni un eje, ni una etiqueta, ni un
   tamaño que compita con el precio. Ilustra el movimiento que la cifra
   de al lado ya dice. */
.wl-spark{ display:block; height:30px; }
.wl-spark-svg{ display:block; width:100%; height:100%; overflow:visible; }
.wl-spark-l{ fill:none; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.wl-spark-a{ stroke:none; opacity:.10; }
.wl-spark-up .wl-spark-l, .wl-spark-up .wl-spark-a{ stroke:var(--green); fill:var(--green); }
.wl-spark-down .wl-spark-l, .wl-spark-down .wl-spark-a{ stroke:var(--red); fill:var(--red); }
.wl-spark-flat .wl-spark-l, .wl-spark-flat .wl-spark-a{ stroke:var(--muted2); fill:var(--muted2); }
/* Sin serie: una raya fina, no un texto. El motivo está en el `title` y
   en el desplegable — escribir «sin serie» en cada fila de una lista de
   veinte es ruido que no ayuda ni a entender ni a actuar. */
.wl-spark.is-off{ position:relative; }
.wl-spark.is-off::after{
  content:''; position:absolute; left:14%; right:14%; top:50%;
  border-top:1px dashed var(--border); 
}

/* LAS CIFRAS. El precio es el dato dominante de la fila; la variación
   va a su derecha, más pequeña y con el único color de la lista. */
.wl-price{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:var(--text-body-size); font-weight:650; color:var(--text);
  text-align:right; white-space:nowrap;
}
.wl-chg{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:var(--text-body-sm-size); font-weight:650;
  text-align:right; white-space:nowrap;
}
.wl-chg.wl-up{ color:var(--green-text); }
.wl-chg.wl-down{ color:var(--red-text); }
.wl-chg.wl-flat{ color:var(--muted); }
/* No medido: apagado y en su sitio. Nunca un 0,00%, que afirmaría una
   medición que nadie hizo. */
.wl-nm{ color:var(--muted2); font-weight:500; }

/* LAS ACCIONES. Presentes siempre —un control que aparece solo al
   pasar el ratón no existe para quien usa el teclado o el dedo— pero
   apagadas hasta que la fila recibe atención. */
.wl-acts{ display:flex; align-items:center; gap:var(--space-2); flex:0 0 auto; }
/* SOLO LA PRESENCIA, NUNCA LA TINTA. El color de estos dos botones —y
   el rojo del de quitar— lo pone `.ui-icon-btn` y su variante
   `.is-danger`, que ya existen. Redefinirlo aquí es lo que
   `tests/design-system.mjs` prohíbe, y lo cazó a la primera: una hoja
   posterior ganándole al sistema es cómo dos botones «fantasma»
   acabaron pintados de carmesí en la fase anterior. */
.wl-acts .ui-icon-btn{ opacity:.55; transition:opacity .14s ease; }
.wl-row:hover .wl-acts .ui-icon-btn,
.wl-row:focus-within .wl-acts .ui-icon-btn{ opacity:1; }
.wl-acts .ui-icon-btn:focus-visible{ opacity:1; }
.wl-more svg{ transition:transform .16s ease; }
.wl-row.is-open .wl-more svg{ transform:rotate(180deg); }

/* ------------------------------------------------------------
   LA SEGUNDA LÍNEA — el contexto de APEX

   Es lo que distingue esta lista de una tabla de precios, y por eso
   existe; y es también lo que la puede arruinar, así que va acotada:
   como mucho dos marcas, en tono de nota, y solo cuando hay algo que
   decir. Una fila sin contexto no reserva el hueco.
   ------------------------------------------------------------ */
.wl-sub{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:0 0 12px; margin-top:-4px;
  font-size:var(--text-caption-size); color:var(--muted);
}
.wl-flag{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:650; letter-spacing:0.02em; color:var(--text);
}
/* El punto del movimiento material: un elemento VACÍO por
   `::before`, nunca un adorno con `aria-hidden` — esa regla global de
   `base.css` lo borraría de la pantalla sin aviso. */
.wl-flag::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--blue); flex:0 0 auto;
}
.wl-flag.is-off{ color:var(--muted2); font-weight:500; }
.wl-flag.is-off::before{ background:var(--muted2); opacity:.6; }
.wl-marks{ display:inline-flex; flex-wrap:wrap; gap:8px; }
.wl-mark{ color:var(--muted); }
.wl-mark + .wl-mark::before{ content:'· '; color:var(--muted2); }
.wl-note{ color:var(--muted2); font-style:italic; }

/* EL DESPLEGABLE: lo que no hace falta para escanear. */
.wl-detail{ padding:2px 0 16px; display:flex; flex-direction:column; gap:7px; }
.wl-detail[hidden]{ display:none; }
.wl-detail .wl-src, .wl-detail .wl-ctx{
  margin:0; font-size:var(--text-caption-size); color:var(--muted2);
}
.wl-tesis{
  margin:0; padding-left:11px; border-left:2px solid var(--border);
  font-size:var(--text-body-sm-size); line-height:1.5; color:var(--muted);
}
.wl-detail .wl-opina{ margin:0; }

/* DESHACER. El aviso de que algo se quitó, con su vuelta atrás. Vive
   en la barra de alta, que es donde el usuario ya está mirando. */
.wl-add-ok{ margin:10px 0 0; font-size:12.5px; color:var(--muted); }
.wl-add-ok[hidden]{ display:none; }
.wl-undo{
  margin-left:6px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-weight:650; color:var(--blue); text-decoration:underline;
}

/* CARGANDO. Filas del mismo alto que las reales, para que la lista no
   salte al llegar el dato — el mismo patrón que Markets. */
.wl-list.is-loading{ pointer-events:none; }
.wl-skel{
  display:grid; grid-template-columns:minmax(0,1fr) 72px minmax(88px,auto);
  align-items:center; gap:var(--space-4);
  padding:19px 0; border-bottom:1px solid var(--border-soft);
}
.wl-skel span{ height:12px; }
.wl-skel-id{ width:42%; }
.wl-skel-sp{ width:100%; }
.wl-skel-n{ width:70%; justify-self:end; }

/* ------------------------------------------------------------
   3 · FICHA DE UN ACTIVO
   ------------------------------------------------------------ */
.as-hero-top{ display:flex; align-items:flex-start; gap:var(--space-4); }
.as-hero-id{ min-width:0; }
.as-ticker{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:23px; font-weight:700; letter-spacing:-0.022em;
  margin:0; color:var(--text);
}
/* EL NOMBRE DEL INSTRUMENTO, debajo del ticker. Una sola línea: si no
   cabe se corta, nunca parte la cabecera en dos alturas. */
.as-name{
  margin:2px 0 0; font-size:var(--text-body-sm-size); color:var(--muted);
  line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.as-follow{ margin-left:auto; flex-shrink:0; }
/* SEGUIR ES UN INTERRUPTOR, y su estado se ve. `aria-pressed` es el
   selector a propósito: así el estilo no puede decir una cosa y el
   lector de pantalla otra. */
.as-follow[aria-pressed="true"]{ background:var(--surface2); color:var(--text); border-color:var(--border); }

.as-hero-nums{ display:flex; align-items:baseline; gap:var(--space-3); margin-top:var(--space-3); flex-wrap:wrap; }
/* El esqueleto de la cabecera (asset/ui.js#esqueletoFicha): las mismas
   cajas que el precio, la variación y la línea de identidad. */
.as-sk-name{ width:150px; margin-top:8px; }
.as-sk-price{ width:min(220px,48vw); align-self:center; }
.as-sk-chg{ width:120px; align-self:center; }
.as-sk-meta{ width:min(260px,60vw); margin-top:var(--space-4); }
.as-sk-brief{ display:grid; gap:10px; }
.as-price{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:clamp(34px, 5vw, 46px); font-weight:700;
  letter-spacing:-0.038em; line-height:1.02; color:var(--text);
}
.as-change{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:16.5px; font-weight:650; letter-spacing:-0.012em; color:var(--muted);
}
/* La variación en PRECIO acompaña a la porcentual: misma familia, un
   punto menos de peso. Las dos dicen lo mismo en dos unidades, así que
   ninguna de las dos manda sobre la otra. */
.as-change-abs{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:600; color:var(--muted);
}
/* El precio que no se pudo medir se DICE con palabras, no con una raya
   de 46 px: un guion gigante ocupa el sitio del dato sin informar. */
.as-price-na{
  font-size:18px; font-weight:600; color:var(--muted); letter-spacing:-0.01em;
}

/* LA META EN UNA LÍNEA, no en tres pastillas.

   Las pastillas tenían borde, fondo y relleno: tres cajas con el mismo
   peso visual que el precio que tienen encima, compitiendo con él por
   una información que es de CONTEXTO. Separadas por un punto medio son
   lo que son — el renglón que dice qué estás mirando. */
.as-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  margin:var(--space-3) 0 0;
  font-size:11.5px; font-weight:650; letter-spacing:.04em;
  color:var(--muted2);
}
/* SIN `text-transform:uppercase`, y no es un descuido. Aquí van NOMBRES
   PROPIOS que manda el proveedor: «NasdaqGS» en versalitas se convierte
   en «NASDAQGS», que es otro nombre. APEX no reescribe lo que mide, ni
   siquiera su capitalización. El peso y el tamaño ya separan esta línea
   del precio que tiene encima. */
.as-meta i{ font-style:normal; color:var(--border); }
/* El estado del mercado SÍ tiene color, porque significa algo: abierto
   es verde (como todo lo que está vivo en APEX) y lo demás es neutro.
   Cerrado NO va en rojo: rojo significa pérdida. */
.as-state{ color:var(--muted2); }
.as-state.is-regular{ color:var(--green-text); }
.as-state.is-pre, .as-state.is-post{ color:var(--amber-text); }
.as-hero .as-src{ margin-top:var(--space-2); }

/* UNA REJILLA, NO UNA LISTA. En una columna, nueve filas de
   etiqueta-a-la-izquierda / cifra-a-la-derecha ocupan media pantalla y
   obligan a recorrerlas una a una para encontrar una; en rejilla se
   barren de un vistazo, que es a lo que se entra. `auto-fit` para que
   una cifra más no obligue a tocar esta regla.

   La ETIQUETA va DEBAJO de su cifra (`column-reverse`): al recorrer la
   rejilla se leen primero los números. Es la misma decisión que ya
   tomaron las filas de posición de la Cartera. */
/* `ui-metrics` YA es la rejilla: lo único de esta pantalla es cuánto
   mide una celda, y eso se dice con la variable que el sistema expone
   —como ya hace `.as-env-grid`— en vez de repetir el `grid-template`. */
.as-metrics{ --ui-metric-min:128px; }
.as-metric{ display:flex; flex-direction:column-reverse; gap:3px; min-width:0; }
.as-metric-k{
  font-size:11px; font-weight:650; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted2);
}
.as-metric-v{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:15.5px; font-weight:650; letter-spacing:-0.012em; color:var(--text);
}
/* ============================================================
   EL ENTORNO (§17) — «¿se mueve este activo o se mueve todo?»

   Es una FILA de cifras, no una tarjeta más: tres referencias con su
   variación medida y su procedencia. Reutiliza `ui-metrics` del
   sistema —misma rejilla, misma jerarquía cifra/etiqueta— porque es
   exactamente el mismo tipo de dato que «Movimiento»; lo único suyo es
   que cabe más apretada, al ser tres columnas fijas de contexto.
   Ni un color nuevo: el verde y el rojo son los de siempre y
   significan lo de siempre.
   ============================================================ */
/* EL ENTORNO ES CONTEXTO, ASÍ QUE SUS CIFRAS NO PUEDEN SER MÁS
   GRANDES QUE LAS DEL ACTIVO. La primera versión las puso a 16 px,
   por encima de las de «Movimiento» (15 px): el índice pesaba más que
   el activo que el usuario vino a mirar. La jerarquía la dan el ORDEN
   y el tamaño, y los dos tienen que decir lo mismo. */
.as-env-grid{ --ui-metric-min:104px; gap:var(--space-4) var(--space-5); }
/* Un movimiento por debajo del umbral se queda en la tinta neutra: no
   es que no se midiera, es que no se movió lo bastante para ser un
   hecho — y pintarlo de verde diría lo contrario. */
.as-env-v{ color:var(--text); }
.as-env-v.as-up{ color:var(--green-text); }
.as-env-v.as-down{ color:var(--red-text); }
.as-env-src{ margin-top:var(--space-4); }

/* «No disponible» se lee como lo que es: una ausencia declarada, no un
   cero. Un cero afirmaría una medición que no existe. */
.as-na{ font-family:var(--font-body); font-size:12.5px; font-style:italic; color:var(--muted); opacity:.85; }


/* EL FILO VA FUERA DEL TEXTO. La tarjeta se aplanó a tramo (sin caja ni
   relleno lateral) y el filo violeta se quedó pegado a la primera letra
   de cada línea: «Tu posición…», las cifras, las insignias y el botón
   tocaban la raya. El mismo aire que ya separa `.as-opina` de su filo. */
.as-mine{ border-left:2px solid var(--violet); padding-left:var(--space-4); }
.as-mine-l{ margin:0 0 12px; font-size:var(--text-body-size); line-height:1.55; color:var(--text); }
/* Investment Mode (Fase 3): lo que se puede hacer con TU posición. */
.as-inv-acts{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-5); }
/* Lo que analizaste (Investment Mode, Fase 4): la lectura, el nombre
   del análisis y cuándo; el resumen, debajo y en una línea. */
.as-inv-an{ list-style:none; margin:0 0 var(--space-4); padding:0; border-top:1px solid var(--border); }
.as-inv-an li{
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; column-gap:10px; row-gap:3px;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.as-inv-an-t{ color:var(--text); font-size:var(--text-body-sm-size); font-weight:600; }
.as-inv-an-d{ color:var(--muted); font-size:12.5px; font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.as-inv-an-s{ grid-column:1 / -1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); font-size:13px; }
.as-tesis{
  margin:0 0 16px; padding:12px 14px;
  background:var(--bg); border-radius:var(--r-sm);
  font-size:var(--text-body-sm-size); line-height:1.55; color:var(--text);
}
.as-tesis cite{
  display:block; margin-top:7px; font-style:normal;
  font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--muted);
}
.as-decisions{ list-style:none; margin:0; padding:0; }
.as-decisions li{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:9px 0; border-top:1px solid var(--border-soft); font-size:13px;
}
.as-decisions li:first-child{ border-top:0; }
.as-dec-v{ color:var(--text); font-weight:550; }
.as-dec-d{ font-family:var(--font-num);font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--muted); }
.as-dec-t{ color:var(--muted); font-size:12.5px; }

.as-news{ list-style:none; margin:0; padding:0; }
.as-news li{ padding:15px 0; border-top:1px solid var(--border-soft); }
.as-news li:first-child{ border-top:0; padding-top:2px; }
.as-news-t{ display:block; font-size:15px; font-weight:550; line-height:1.45; color:var(--text); }

/* APEX OPINA EN LA FICHA — una capa, no un bocadillo.

   El fondo carmesí a ancho completo convertía la pregunta en el
   elemento más pesado de la pantalla, por encima del precio y del
   gráfico. Queda el FILO, que es la dosis mínima con la que este
   producto usa el color de marca, y desaparece el relleno. Sigue
   leyéndose distinta de un hecho —que es la regla que importa— sin
   mandar sobre él. */
.as-opina{
  border-left:2px solid var(--blue);
  background:transparent;
  padding:0 0 0 var(--space-4);
  margin:var(--space-7) 0 0;
  border-radius:0;
}
.as-opina .as-opina-k{ color:var(--blue); margin-bottom:var(--space-2); }
.as-opina-q{
  margin:0; font-size:var(--text-h4-size); font-weight:500;
  line-height:1.5; color:var(--text); max-width:56ch;
}
.as-from{ margin:10px 0 0; font-size:12px; color:var(--muted); }
/* EL ÚNICO HUECO CON ACCIÓN la lleva como BOTÓN del sistema, no como
   un enlace subrayado: el análisis fundamental es un análisis real de
   APEX, y un enlace en mitad de un párrafo no comunica que ahí pasa
   algo. Hereda caja, altura y los cuatro estados de `.ui-btn`. */
/* LA ACCIÓN VA EN SU PROPIA LÍNEA. Inline, cuando el texto del hueco
   envuelve —y a 390 px envuelve siempre— el botón acababa incrustado a
   mitad de un párrafo, leyéndose como una palabra subrayada. `flex`
   con `margin-right:auto` lo baja a su renglón y lo deja del ancho de
   su texto, no del de la columna. */
/* La acción de APEX opina va DEBAJO de la pregunta y a su ancho, no
   estirada: es el siguiente paso, no el remate de la pantalla. */
.as-opina-cta{ display:flex; margin:var(--space-4) auto 0 0; }

.as-gap-cta{ display:flex; margin:var(--space-3) auto 0 0; }

/* LA ZONA DE LO QUE NO SE MIDE, en tono de utilidad. El contenido no
   cambia —los tres huecos siguen declarados con su motivo— y el peso
   sí: filete arriba, texto apagado y nada que compita con una cifra. */
.as-gap{ margin-top:var(--space-8); }
.as-gap .as-gap-list li{ font-size:12.5px; color:var(--muted2); }
.as-gap .as-gap-list strong{ font-weight:650; color:var(--muted); }
.as-gap .as-gap-list span{ color:var(--muted2); }

/* ------------------------------------------------------------
   3b · APEX NEWS INTELLIGENCE — el resumen de un titular

   El titular se ve siempre; los cinco bloques se despliegan con
   `<details>` nativo: información progresiva sin una línea de
   JavaScript, el mismo patrón que la evidencia larga del briefing.

   LA CITA SE VE DISTINTA DEL TEXTO DE APEX. No es decoración: el
   titular es de un tercero y APEX no lo ha comprobado, así que no
   puede leerse con la misma voz que lo que APEX sí midió.
   ------------------------------------------------------------ */
.as-ni{ margin:0; }
.as-ni > summary{
  cursor:pointer; list-style:none;
  padding:2px 0;
}
.as-ni > summary::-webkit-details-marker{ display:none; }
.as-ni > summary::after{
  content:'Ver lo que APEX midió';
  display:inline-block; margin-top:5px;
  font-family:var(--font-num);font-variant-numeric:tabular-nums; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--blue);
}
.as-ni[open] > summary::after{ content:'Cerrar'; }
/* ============================================================
   EL RESUMEN, COMO UN DOCUMENTO

   Antes los cinco bloques colgaban del titular sin envoltura: una lista
   de trozos, y se leía como notas sueltas. Ahora es una FICHA — fondo
   propio, cabecera que declara de quién es cada cosa y los bloques
   numerados y separados por un filete.

   La numeración la lleva un CONTADOR de CSS y no un número escrito: un
   bloque sin material no se emite (esa es la regla de este formato), y
   con números a mano el resumen iría 1, 3, 4 — el mismo fallo que ya
   tuvo la pantalla «Tu evolución». El contador solo avanza sobre los
   bloques que de verdad se pintaron.
   ============================================================ */
.as-ni-body{
  margin-top:13px; padding:16px 18px;
  background:var(--bg); border:1px solid var(--border-soft); border-radius:var(--r-md);
  display:flex; flex-direction:column; gap:0;
}
.as-ni-head{
  display:flex; flex-direction:column; gap:3px; margin:0 0 14px;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
.as-ni-head span{
  font-size:12px; font-weight:400; letter-spacing:0; text-transform:none;
  color:var(--muted2); line-height:1.45;
}
/* El filete separa bloques; no hay caja dentro de la caja. */
.as-ni-body > .as-ni-b + .as-ni-b{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--border-soft);
}
.as-ni-inc{
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--border-soft);
  font-size:12px; line-height:1.45; color:var(--muted);
}
/* La cita vive DENTRO de la ficha, así que su fondo no puede ser el
   mismo (`--bg`): se quedaría invisible. Es la superficie de la
   aplicación, un escalón por encima. */
.as-ni-cita{
  margin:0; padding:12px 14px;
  background:var(--surface); border-left:2px solid var(--border);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:15px; line-height:1.55; color:var(--text); font-weight:500;
}
.as-ni-det{ display:block; margin-top:7px; color:var(--muted); }
.as-ni-cita cite{
  display:block; margin-top:8px; font-style:normal;
  font-family:var(--font-num);font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted);
}
.as-ni-b{ display:flex; flex-direction:column; gap:7px; }
.as-ni-k{
  font-family:var(--font-num);font-variant-numeric:tabular-nums; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
/* El número lo escribe el render (`asset/ui.js`), no un contador de
   CSS: se copia con el texto, ninguna regla global lo puede borrar y
   una prueba puede LEERLO — `getComputedStyle` devuelve `counter(...)`
   sin resolver, así que con un contador la comprobación de que la
   numeración no salta no podría fallar. */
.as-ni-n{ color:var(--blue); font-weight:700; margin-right:6px; }
.as-ni-t{ margin:0; font-size:var(--text-body-sm-size); line-height:1.55; color:var(--text); }
.as-ni-mov{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.as-ni-mov li{ display:flex; align-items:baseline; gap:12px; }
.as-ni-a{ font-family:var(--font-num);font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--text); min-width:56px; }
.as-ni-v{ font-family:var(--font-num);font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:600; color:var(--text); }
.as-ni-mov .as-src{ margin:0; margin-left:auto; }
/* La advertencia de coincidencia NUNCA se repliega ni se recorta. */
.as-ni-warn{
  margin:2px 0 0; font-size:12px; line-height:1.45;
  color:var(--amber-text);
}
.as-ni-obs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.as-ni-obs li{
  font-size:var(--text-body-sm-size); line-height:1.5; color:var(--text);
  padding-left:13px; position:relative;
}
.as-ni-obs li::before{
  content:''; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--blue);
}
/* Un hueco declarado se ve como lo que es: una ausencia, no un dato. */
.as-ni-gap{ color:var(--muted); }
.as-ni-gap::before{ background:var(--border); }
.as-ni-opina{
  border-left:2px solid var(--blue); background:var(--blue-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:11px 13px;
}
.as-ni-q{ margin:0; font-size:var(--text-body-sm-size); line-height:1.5; color:var(--text); }

/* ------------------------------------------------------------
   4 · RESPONSIVE — jerarquía, no una encogida

   Market y Portfolio tienen que seguir siendo ÚTILES en pantalla
   pequeña (§24), así que lo que cae es la segunda columna, no el
   contenido: el donut pasa encima de las barras y las cifras del
   titular se apilan en dos filas antes que en tres columnas
   ilegibles.
   ------------------------------------------------------------ */
@media (max-width:860px){
  .pf-reparto{ grid-template-columns:minmax(0, 1fr); gap:26px; }
  .pf-donut-wrap{ flex-direction:row; align-items:center; gap:22px; }
  .pf-legend{ flex:1; min-width:0; }
}
@media (max-width:640px){
  .pf-card, .wl-card{ padding:18px 16px; border-radius:var(--r-md); }
  .as-card:not(.is-panel):not(.as-opina){ padding:18px 0; border-radius:0; }
  .as-opina{ padding:0 0 0 var(--space-4); }
  .pf-hero-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
  .pf-stat:first-child{ grid-column:1 / -1; }
  .pf-stat-v{ font-size:23px; }
  .pf-donut-wrap{ flex-direction:column; align-items:flex-start; }
  .pf-pos-nums{ gap:16px; }
  .pf-bar-row{ grid-template-columns:minmax(52px, 72px) minmax(0, 1fr) 46px; gap:9px; }
  .wl-add-combo, .as-search-combo{ flex:1 1 100%; }
  .wl-input-note{ flex:1 1 100%; }

  /* ----------------------------------------------------------
     EL SEGUIMIENTO EN MÓVIL — una composición propia

     No es la de escritorio encogida: a 390 px las cuatro columnas
     dejaban el nombre del instrumento en dos caracteres. Aquí la fila
     se lee en DOS alturas, que es como se lee una lista financiera en
     un teléfono:

       NVDA                            $183,42
       NVIDIA Corporation   ╱╲╱         +2,41%

     La identidad manda la primera línea, las cifras se apilan a la
     derecha alineadas entre sí, y la microlínea baja a la segunda —
     donde ilustra sin robarle sitio al nombre.

     Y SIN SCROLL HORIZONTAL: la rejilla se recompone, no se desborda.
     ---------------------------------------------------------- */
  .wl-cols{ display:none; }          /* rótulos de columna sin columnas que rotular */

  .wl-main{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:'id precio' 'spark chg';
    gap:2px var(--space-3);
    padding:12px 0;
  }
  .wl-id{ grid-area:id; }
  .wl-price{ grid-area:precio; }
  .wl-spark{ grid-area:spark; height:24px; align-self:center; max-width:120px; }
  .wl-chg{ grid-area:chg; align-self:center; }

  /* EN MÓVIL LAS ACCIONES NO SE APAGAN. No hay «pasar el ratón», así
     que un control al 55% de opacidad sería un control escondido a
     todos los efectos. */
  .wl-acts .ui-icon-btn{ opacity:1; }
  /* SIN MICROLÍNEA, SIN HUECO. En escritorio la raya discontinua
     sostiene la columna; en móvil no hay columna que sostener y queda
     una raya suelta bajo el nombre, que se lee como un fallo de
     pintado. El motivo sigue estando en el desplegable. */
  .wl-spark.is-off{ display:none; }
  .wl-sub{ padding-bottom:11px; }
  .wl-skel{ grid-template-columns:minmax(0,1fr) minmax(70px,auto); }
  .wl-skel-sp{ display:none; }
  .as-price{ font-size:25px; }
  .as-ticker{ font-size:22px; }
}

/* ------------------------------------------------------------
   FASE 4 · APEX BRIEF — lo que importa, arriba del todo

   NI UN COLOR NUEVO: todo sale de los tokens de `base.css`, así que se
   ve igual de intencionado en claro y en oscuro sin una regla
   duplicada.

   Y NI UN FILO CARMESÍ. El acento de marca en esta pantalla es de
   «APEX opina» —una pregunta, no una medición—, y dos filos carmesí
   en la misma ficha dejarían de distinguir nada. Aquí la dosis mínima
   es UNA PALABRA: el rótulo «APEX». Es la misma regla con la que este
   producto usa el color de marca desde la portada.
   ------------------------------------------------------------ */
.as-brief-k{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--blue);
  margin-bottom:5px;
}
.as-brief-h{ margin-bottom:var(--space-3); }
.as-brief-list{ list-style:none; margin:0; padding:0; }

/* LA CIFRA A LA DERECHA Y SU PROCEDENCIA DEBAJO. El titular se lee de
   corrido por la izquierda y las cifras quedan en columna: con la
   procedencia intercalada, los números bailaban de línea en línea y la
   lista dejaba de escanearse. */
.as-brief-i{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:3px var(--space-4);
  padding:11px 0;
  border-top:1px solid var(--border-soft);
}
.as-brief-i:first-child{ border-top:0; padding-top:2px; }
.as-brief-t{
  font-size:var(--text-body-size); line-height:1.45;
  font-weight:550; color:var(--text); min-width:0;
}
.as-brief-v{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:16px; font-weight:600; color:var(--text); white-space:nowrap;
}
/* LA PROCEDENCIA OCUPA SU PROPIO RENGLÓN, siempre: un dato sin fuente
   no es un dato, y meterla en la misma línea la dejaba cortada en
   cuanto el titular crecía. */
.as-brief-s{ grid-column:1 / -1; font-size:11.5px; line-height:1.4; }
.as-brief-none{ margin:0; font-size:var(--text-body-sm-size); line-height:1.55; }
.as-brief-more{ margin-top:var(--space-4); }
.as-brief-det{ list-style:none; margin:var(--space-2) 0 0; padding:0; }
.as-brief-det li{
  padding:9px 0; border-top:1px solid var(--border-soft);
  font-size:12.5px; line-height:1.5;
}
.as-brief-det li:first-child{ border-top:0; }
.as-brief-det strong{ display:block; color:var(--text); font-weight:600; }
.as-brief-det span{ color:var(--muted); }

/* ------------------------------------------------------------
   FASE 4 · FUNDAMENTALES — señal, contexto y detalle

   El titular en la rejilla del sistema; el detalle, replegado. Un muro
   de cuarenta cifras financieras es exactamente lo que el encargo
   prohíbe, y lo que se lee de un vistazo son tres.
   ------------------------------------------------------------ */
.as-fund-top{ --ui-metric-min:132px; }
.as-fund-more{ margin-top:var(--space-5); }
.as-fund-g{ margin-top:var(--space-4); }
.as-fund-g:first-of-type{ margin-top:var(--space-2); }
.as-fund-rows{ list-style:none; margin:var(--space-2) 0 0; padding:0; }
.as-fund-rows li{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4);
  padding:8px 0; border-top:1px solid var(--border-soft);
  font-size:13px;
}
.as-fund-rows li:first-child{ border-top:0; }
.as-fund-rows span{ color:var(--muted); min-width:0; }
.as-fund-rows em{
  font-style:normal; color:var(--text); font-weight:600;
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* LA FECHA QUE CADUCA va fuera del repliegue: es lo único de este
   bloque que deja de ser cierto con el tiempo. */
/* UNA FILA MÁS, CON SU FILETE, y no una caja: era una caja `var(--bg)`
   sobre una tarjeta que ya es transparente, así que no se veía y lo
   único que quedaba era su relleno — la etiqueta y la fecha corridas
   12 px hacia dentro de la columna. */
.as-fund-ev{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4);
  margin:var(--space-5) 0 0; padding:10px 0;
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  font-size:var(--text-body-sm-size);
}
.as-fund-ev span{ color:var(--muted); font-weight:600; }
.as-fund-ev em{
  font-style:normal; color:var(--text); font-weight:650;
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
}
.as-fund-src{ margin-top:var(--space-4); }
/* La lectura no se da aquí, se OFRECE: botón fantasma en su renglón,
   como el del hueco. */
/* Al ras de la columna: un botón fantasma no tiene contorno que
   justifique su relleno, así que el texto se quedaba 13 px a la derecha
   de todo lo demás. El relleno sigue ahí para el velo del `:hover`. */
.as-fund-cta{ display:flex; margin:var(--space-4) auto 0 calc(-1 * var(--space-3) - 1px); }

/* ------------------------------------------------------------
   FASE 4 · TU CONTEXTO — el resultado en vivo y tus niveles
   ------------------------------------------------------------ */
.as-mine-nums{ --ui-metric-min:112px; margin:0 0 var(--space-5); }
.as-mine-lvl{ list-style:none; margin:0 0 var(--space-5); padding:0; }
.as-mine-lvl li{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:baseline; gap:var(--space-3);
  padding:8px 0; border-top:1px solid var(--border-soft);
  font-size:13px;
}
.as-mine-lvl li:first-child{ border-top:0; }
.as-lvl-k{ color:var(--muted); font-weight:600; white-space:nowrap; }
.as-lvl-p{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  color:var(--text); font-weight:600; white-space:nowrap;
}
.as-lvl-d{ color:var(--muted); text-align:right; min-width:0; }
.as-mine-gap{ margin:0 0 var(--space-4); font-size:12px; line-height:1.5; }

@media (max-width:640px){
  /* A 390 px el titular necesita el ancho entero: la cifra baja a su
     propia línea en vez de estrujarlo a una palabra por renglón — el
     mismo fallo que ya costó una captura en «Lo que hace». */
  .as-brief-i{ grid-template-columns:1fr; }
  .as-brief-v{ font-size:15px; }
  .as-mine-lvl li{ grid-template-columns:auto 1fr; }
  .as-lvl-d{ grid-column:1 / -1; text-align:left; }
}

/* ------------------------------------------------------------
   LA FICHA: VOLVER, SEGUIR Y ALERTA EN LÍNEA
   (Investment Mode, Fase 1 del rediseño)
   ------------------------------------------------------------ */
/* VOLVER. La ficha es una superficie de detalle sin pestaña: la flecha
   es su salida, y dice a dónde lleva. */
.as-back{
  display:inline-flex; align-items:center; gap:6px; align-self:center;
  margin:0 6px 0 -6px; padding:5px 10px 5px 6px;
  border:0; border-radius:var(--r-pill); background:none;
  color:var(--muted); font:inherit; font-size:var(--text-body-sm-size); font-weight:600;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.as-back:hover{ background:var(--surface2); color:var(--text); }
.as-back:focus-visible{  box-shadow:var(--shadow-focus); }
.as-back svg{ flex-shrink:0; transition:transform var(--dur-fast) var(--ease); }
.as-back:hover svg{ transform:translateX(-2px); }

.as-follow-ic{ flex-shrink:0; margin-left:-3px; }
/* La moneda del precio de la cabecera: una UNIDAD, pequeña y apagada. */
.as-price-cur{
  margin-left:8px; font-size:15px; font-weight:600; letter-spacing:0; color:var(--muted);
}
.as-follow[aria-busy="true"]{ opacity:.7; }

/* EL CREADOR DE ALERTAS EN LÍNEA: debajo de la cabecera, con el precio
   de ahora delante. Es una superficie APOYADA: filete, sin sombra. */
/* El creador de alertas EN LÍNEA es un bloque APOYADO: filete, sin
   sombra. Sin contorno, su «Cancelar / Crear alerta» y su nota caían
   pegados a las temporalidades del gráfico y se leían como un mando
   más del gráfico. */
.as-alert-inline{
  margin:var(--space-4) 0 var(--space-5); padding:16px 18px;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface);
}
.as-alert-inline[hidden]{ display:none; }

/* ------------------------------------------------------------
   4 · EL GRÁFICO DE PRECIO (.ac-)

   TODA regla de este bloque lleva el prefijo `.ac-`: es la garantía de
   que esta capa no puede tocar ninguna otra pantalla, igual que `.mkw-`
   en Markets y `.lp-` en el sitio público.

   NI UN COLOR ESCRITO A MANO. El lienzo lee los MISMOS tokens desde
   JavaScript (`--green`, `--red`, `--border-soft`, `--muted2`,
   `--text`), así que el gráfico cambia de tema con la aplicación sin
   una sola regla duplicada y sin forzar ninguno.
   ------------------------------------------------------------ */
.ac-panel{ margin:0 0 var(--space-5); }

/* EL TITULAR DEL GRÁFICO. La cifra manda; la ventana la acompaña en una
   línea tranquila debajo. Dos cifras del mismo tamaño no son una
   jerarquía — es la misma regla con la que la Cartera dejó de tener
   tres columnas iguales. */
.ac-lead{ margin:0 0 10px; display:flex; flex-direction:column; gap:1px; }
.ac-lead[hidden]{ display:none; }
.ac-lead-n{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:19px; font-weight:700; letter-spacing:-0.018em;
  color:var(--muted); white-space:pre;
}
.ac-lead-w{ font-size:12px; color:var(--muted); }
.ac-lead.is-up .ac-lead-n{ color:var(--green-text); }
.ac-lead.is-down .ac-lead-n{ color:var(--red-text); }

.ac-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:10px;
}
.ac-tfs{ display:flex; gap:4px; flex-wrap:wrap; }
.ac-tf{
  padding:5px 11px; background:none; border:1px solid transparent;
  border-radius:var(--r-pill); color:var(--muted);
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:12.5px; font-weight:650; cursor:pointer; white-space:nowrap;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ac-tf:hover{ color:var(--text); border-color:var(--border); }
.ac-tf.is-active{ background:var(--surface2); border-color:var(--text); color:var(--text); }
/* NO DISPONIBLE, y se nota: apagada pero con su subrayado punteado,
   porque SÍ se puede pulsar para reintentar. Un control que parece
   muerto y responde —o al revés— es el fallo que el encargo prohíbe. */
.ac-tf.is-unavailable{
  color:var(--muted2); text-decoration:underline; text-decoration-style:dotted;
  text-underline-offset:3px;
}
/* EL BOTÓN LO PONE EL SISTEMA. Se compone `ui-btn is-ghost is-sm`
   (chart-panel.js) y aquí quedaba la receta entera encima: fondo, filete,
   tinta y tipografía. `investment.css` se carga la vigesimocuarta contra
   la tercera de `components.css`, así que ganaba esta y el control
   componía el sistema solo de nombre. Lo único propio es que su filete
   se vea en reposo, porque acompaña al gráfico y no a un dato. */
.ac-expand{ border-color:var(--border); }

.ac-stage{ position:relative; }
.ac-canvas-host{ position:relative; height:300px; }
.ac-canvas-host #tv-attr-logo{min-height:24px;display:inline-flex;align-items:center;}
/* EL PANEL DEL INDICADOR NO SE ROBA EL PRECIO. Cuando se abre un panel
   aparte (hoy solo el RSI), el lienzo crece lo que ese panel ocupa: sin
   esto el precio pierde un cuarto de su alto por encender un
   indicador. Lo avisa `chart-tv.js#onPaneles`, que es quien sabe si el
   panel existe de verdad. */
.ac-panel.has-pane .ac-canvas-host{ height:400px; }
.ac-canvas-host[hidden]{ display:none; }
/* Cambiando de temporalidad con una serie ya pintada: la de ahora se
   queda, atenuada, mientras llega la nueva (chart-panel.js#cargar). La
   pastilla pulsada dice «pedida» con su filete punteado; la activa sigue
   siendo la de lo que se ve. */
.ac-canvas-host{ transition:opacity var(--dur-med) var(--ease-out); }
.ac-panel.is-refreshing .ac-canvas-host{ opacity:.42; }
.ac-panel.is-refreshing .ac-lead, .ac-panel.is-refreshing [data-ac-note]{ opacity:.55; transition:opacity var(--dur-med) var(--ease-out); }
.ac-tf.is-pending{ border-color:var(--muted2); border-style:dashed; color:var(--text); }
.ac-canvas{ display:block; width:100%; height:100%; touch-action:pan-y; cursor:crosshair; }
.ac-canvas:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }
.ac-panel.is-expanded .ac-canvas-host,
.ac-panel.is-expanded.has-pane .ac-canvas-host{ height:min(72vh, 620px); }

/* EL TOOLTIP. Se compone con nodos y sin `innerHTML`; aquí entran
   cifras de un tercero. */
.ac-tip{
  position:absolute; top:8px; pointer-events:none; z-index:2;
  display:flex; flex-direction:column; gap:2px;
  padding:8px 10px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); box-shadow:var(--shadow-sm);
  font-size:11.5px; min-width:120px;
}
.ac-tip[hidden]{ display:none; }
.ac-tip-d{ color:var(--muted2); font-size:11px; letter-spacing:.02em; }
.ac-tip-r{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ac-tip-r b{ font-weight:500; color:var(--muted); }
.ac-tip-r i{
  font-style:normal; font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-weight:650; color:var(--text);
}

.ac-state{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  min-height:120px; padding:16px; border:1px solid var(--border-soft);
  border-radius:var(--r-md); background:var(--surface2);
  color:var(--muted); font-size:var(--text-body-sm-size); line-height:1.5;
}
.ac-state[hidden]{ display:none; }
/* Cargando: el área del lienzo, sin caja ni texto (ver chart-panel.js).
   `:not([hidden])` NO ES UN ADORNO. Al terminar de cargar, el panel
   esconde el estado con `hidden` sin quitarle la clase, y esta regla
   pesa lo mismo que `.ac-state[hidden]` y va después: sin la negación,
   un bloque gris de 300 px se quedaba debajo de CADA gráfico ya
   pintado. «`display` suelto anula `hidden`», otra vez. */
.ac-state.is-loading:not([hidden]){ display:block; min-height:0; padding:0; border:0; background:transparent; }
.ac-sk-area{ height:300px; border-radius:var(--r-md); }
.ac-panel.has-pane .ac-sk-area{ height:400px; }
.ac-state.is-error{ background:var(--red-soft); border-color:var(--red-soft-border); color:var(--text); }
.ac-retry{
  padding:5px 11px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-pill); color:var(--text);
  font-family:var(--font-body); font-size:12px; font-weight:650; cursor:pointer;
}
.ac-retry:hover{ border-color:var(--muted2); }

.ac-note{ margin:8px 0 0; color:var(--muted2); font-size:var(--text-caption-size); line-height:1.45; }
.ac-note[hidden]{ display:none; }
/* ------------------------------------------------------------
   LAS CIFRAS DE LA VENTANA

   Rejilla que se reparte sola (`auto-fit`), no un número fijo de
   columnas: el día que haya una cifra más no hay que tocar esta regla.
   Sin cajas y sin bordes verticales — lo que separa una cifra de la
   siguiente es el aire, igual que en el resto de superficies de
   inversión.

   UNA CIFRA QUE NO SE PUDO MEDIR SE APAGA, no desaparece: un hueco en
   la rejilla se lee como un fallo de pintado, y quitarla dejaría creer
   que ese dato no existe en vez de que no se midió.
   ------------------------------------------------------------ */
.ac-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:14px 18px; margin:14px 0 0; padding:14px 0 0;
  border-top:1px solid var(--border-soft);
}
.ac-stats[hidden]{ display:none; }
.ac-stat{ display:flex; flex-direction:column-reverse; gap:2px; min-width:0; }
.ac-stat dt{
  font-size:11px; font-weight:650; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted2); margin:0;
}
.ac-stat dd{
  margin:0; font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:14.5px; font-weight:650; letter-spacing:-0.012em; color:var(--text);
}
.ac-stat.is-off dd{ font-family:var(--font-body); font-size:12px; font-weight:500; color:var(--muted2); letter-spacing:0; }

.ac-foot{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-top:10px;
}
.ac-prov{ margin:0; color:var(--muted2); font-size:var(--text-caption-size); }
.ac-opts summary{
  cursor:pointer; color:var(--muted); font-size:var(--text-caption-size);
  font-weight:600; list-style:none;
}
.ac-opts summary::-webkit-details-marker{ display:none; }
.ac-opts summary:hover{ color:var(--text); }
.ac-opts-body{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:10px; }
.ac-opt-row{ display:flex; gap:4px; }
/* MISMO CASO, y aquí además se reescribía el ESTADO ACTIVO: las
   opciones del gráfico componen `ui-seg-i`, que ya trae la caja, la
   altura y los cuatro estados. Dos recetas del mismo segmentado en la
   misma pantalla es justo lo que este rediseño vino a cerrar. */
.ac-check{ display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; cursor:pointer; }
.ac-opt-note{ flex:1 1 100%; margin:0; color:var(--muted2); font-size:var(--text-caption-size); }
.ac-opt-note[hidden]{ display:none; }

/* ------------------------------------------------------------
   LOS INDICADORES Y LO QUE EL GRÁFICO SABE DE TI

   Ni un color escrito a mano: las pastillas son `ui-seg-i` del sistema
   y lo único de esta pantalla es dónde van y cómo se marca la que no
   se puede calcular — el mismo tratamiento que ya tiene una
   temporalidad caída (`.ac-tf.is-unavailable`), para que las dos
   ausencias se lean igual.
   ------------------------------------------------------------ */
.ac-ind{ flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ac-ind[hidden]{ display:none; }
.ac-ind-t{
  color:var(--muted2); font-size:var(--text-label-size); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.ac-ind-row{ display:flex; flex-wrap:wrap; gap:4px; }
.ac-ind-b.is-unavailable{ opacity:.5; text-decoration:line-through; }
/* LA NOTA DE LO TUYO no es una tarjeta: es una frase bajo el gráfico,
   con el filo de la tinta de marca porque habla de TUS datos. */
.ac-mine{
  margin:var(--space-3) 0 0; padding-left:var(--space-3);
  border-left:2px solid var(--blue);
  color:var(--muted); font-size:var(--text-caption-size); line-height:1.55;
}
.ac-mine[hidden]{ display:none; }
/* La región viva no se ve, pero NO se esconde con `aria-hidden` ni con
   `display:none` — un lector de pantalla no anuncia lo que no está en
   el árbol. Se saca de la vista, que es lo que hace `.sr-only` en
   cualquier sitio serio. */
.ac-live{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width:640px){
  .ac-canvas-host{ height:230px; }
  .ac-panel.has-pane .ac-canvas-host{ height:310px; }
  .ac-panel.is-expanded .ac-canvas-host{ height:64vh; }
  /* Las temporalidades en una fila desplazable. NO sangra hasta el
     borde: el hueco del contenedor no se adivina desde una hoja hija
     (ver la fila de categorías de Markets, que desbordaba 2 px). */
  .ac-tfs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .ac-tfs::-webkit-scrollbar{ display:none; }
  .ac-head{ flex-wrap:nowrap; }
  .ac-tip{ font-size:11px; min-width:104px; }
}

@media (prefers-reduced-motion:reduce){
  .ac-tf, .ac-expand{ transition:none; }
}

/* LÍNEA O VELAS, a la vista junto a «Ampliar» (Investment Mode,
   Fase 1 del rediseño; lo ven los dos modos). */
.ac-tools{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.ac-type{ flex-wrap:nowrap; }
.ac-type[hidden]{ display:none; }
.ac-type .ui-seg-i{ gap:6px; }
.ac-opt-ic{ flex-shrink:0; }
@media (max-width:640px){
  /* En móvil el tipo de gráfico se queda con los glifos: «Línea» y
     «Velas» los dicen su `title` y su icono. */
  .ac-type .ui-seg-i{ font-size:0; gap:0; padding:0 9px; }
}

/* ------------------------------------------------------------
   EL SIGNO GANA — y por eso va al FINAL

   `.as-change` declara `color:var(--muted)` para la variación que NO se
   pudo medir. Con las clases de tono arriba, esa declaración ganaba por
   orden de cascada (misma especificidad, gana la última) y una subida
   del 4,8% salía GRIS: el dato estaba bien y el color decía «no se
   midió». Lo vio una captura.

   Estas tres reglas cierran la hoja para que ninguna regla de color por
   defecto que alguien añada después vuelva a taparlas. El signo va
   además DENTRO del número (`dinero()`), así que quien no distingue
   verde de rojo lo lee igual.
   ------------------------------------------------------------ */
.pf-up, .wl-up, .as-up{ color:var(--green-text); }
.pf-down, .wl-down, .as-down{ color:var(--red-text); }