/* =============================================================
   HAWK desktop (SPA) — Design System.
   Tokens + clases hk-* portadas de design/styles.css (el look REAL de
   Hawk), sin los overrides de Streamlit. El chrome propio (loader,
   topbar, tabs, view) sigue la misma estética: serif wordmark,
   subrayado burdeos en la tab activa, superficies warm-near-black.
   ============================================================= */
:root {
  /* ── Marca ── */
  --brand-burgundy:#910713; --brand-burgundy-soft:rgba(145,7,19,0.20);
  --brand-burgundy-deep:#5a0008; --brand-cream:#f5e5ba; --brand-cream-deep:#d4c8b8;

  /* ── Superficies ──────────────────────────────────────────────────────
     Cinco niveles y cada uno es un paso REAL de luminancia. Antes eran tres y
     muy juntos, así que una tarjeta sobre el fondo y una tarjeta sobre otra
     tarjeta se veían igual: la jerarquía la cargaba entera el borde de 1px.
     Con la escala separada, la profundidad se lee por el material. */
  --bg-base:#0d0a0b; --bg-sunken:#090708; --bg-surface:#171214;
  --bg-elevated:#221a1d; --bg-hover:#2b2023;

  /* Los textos auxiliares eran demasiado próximos al fondo: en paneles con
     datos densos (Mapa, ETF y pie de las fichas) se convertían en decoración
     ilegible. La escala conserva la jerarquía, pero todos los niveles ya se
     sostienen contra el near-black sin exigir zoom. */
  --fg-1:#f5ecd9; --fg-2:#b8a99a; --fg-3:#897a70;
  --border-1:rgba(245,229,186,0.08); --border-2:rgba(245,229,186,0.16); --border-3:rgba(245,229,186,0.28);
  --pos:#3aa771; --neg:#d63743; --warn:#d99c44; --info:#9d4edd; --info-cool:#2f7fc2;
  --accent:var(--brand-burgundy); --accent-soft:var(--brand-burgundy-soft); --accent-deep:var(--brand-burgundy-deep);
  --accent-fg:var(--brand-cream);

  /* ── Materia ──────────────────────────────────────────────────────────
     Superficies PLANAS. No hay degradado cenital ni filo interior: la
     jerarquía la cargan la escala de superficies (cinco pasos reales de
     luminancia), el filete de 1px y la tipografía. Un relieve simulado sobre
     un fondo casi negro se lee como brillo sucio, no como volumen.
     La sombra queda para lo que de verdad flota sobre el resto — el popover —
     donde no es adorno: informa que ese plano está encima y se puede cerrar. */
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,0.80);
  --ring:0 0 0 3px rgba(245,229,186,0.13);

  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px; --radius-pill:999px;
  /* IBM Plex Sans + Frank Ruhl Libre (11-09-2026): mismo par que adoptaron los
     posts de Stockerfy el mismo día — Geist y Newsreader son, respectivamente,
     "el nuevo Inter" y una editorial genérica en el discurso de diseño de 2026,
     la huella tipográfica por defecto de sitios generados por IA. La app y el
     feed comparten marca; no tenía sentido que solo el feed se corrigiera. */
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Frank Ruhl Libre','Source Serif Pro',Georgia,serif;
  --font-mono:'JetBrains Mono','Menlo','Consolas',monospace;
  --dur-hover:120ms; --dur-base:200ms; --ease:cubic-bezier(0.2,0.8,0.2,1);
  --rail-w:84px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg-base);color:var(--fg-1);font-family:var(--font-sans);
  font-size:14px;-webkit-font-smoothing:antialiased;overflow:hidden}
.hidden{display:none!important}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(245,229,186,.13);border-radius:8px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(245,229,186,.26);background-clip:content-box}
::selection{background:var(--brand-burgundy);color:var(--brand-cream)}
kbd{font:600 9.5px/1 var(--font-mono);background:var(--bg-elevated);border:1px solid var(--border-2);
  border-bottom-width:2px;border-radius:4px;padding:3px 5px;color:var(--fg-2)}
.ico{width:20px;height:20px;flex:0 0 auto}
.ico-sm{width:15px;height:15px;flex:0 0 auto}

/* score utilities (score_color: ≥65 pos · ≥40 fg1 · <40 neg) */
.up{color:var(--pos)} .down{color:var(--neg)} .muted{color:var(--fg-2)}

/* ── Fondo: halo + grano ──────────────────────────────────────────────────
   Un near-black plano en 1440×900 se lee como un apagón, no como un material.
   El halo pone un centro de gravedad luminoso donde está la marca y el grano
   (SVG de ruido fractal, ~2% de opacidad) rompe las bandas del degradado, que
   en pantallas de 8 bits se ven a simple vista. Las dos capas van fijas, sin
   eventos y sin coste de layout. */
/* Un solo gradiente muy tenue, apenas para que el negro no se lea como un
   vacío digital. Antes eran tres radiales de acento y el resultado era un
   resplandor rojo en la esquina — decorativo, y de lo primero que Luis pidió
   sacar. */
.bg-halo{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(1400px 760px at 22% -24%, rgba(245,229,186,.028), transparent 68%)}
.bg-grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E")}

/* ── loader ── */
.loader{position:fixed;inset:0;background:var(--bg-base);display:flex;align-items:center;
  justify-content:center;z-index:100}
.loader-box{text-align:center;position:relative;z-index:2}
.loader-mark{width:54px;height:54px;display:block;margin:0 auto 18px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.7));animation:markin .7s var(--ease)}
@keyframes markin{from{transform:scale(.86)}to{transform:none}}
.loader-title{font-family:var(--font-serif);font-weight:500;font-size:38px;letter-spacing:-.015em;color:var(--fg-1)}
.loader-title span{color:var(--fg-3)}
.loader-bar{width:180px;height:2px;background:var(--border-1);border-radius:3px;margin:20px auto 12px;overflow:hidden}
.loader-bar span{display:block;height:100%;width:40%;background:var(--accent);border-radius:3px;animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.loader-msg{color:var(--fg-3);font-size:11.5px;letter-spacing:.02em}

/* ══ CHROME ═══════════════════════════════════════════════════════════════
   Raíl lateral + shell. Sustituye al encabezado con tabs centradas: la
   navegación pasa a ser persistente y vertical —el patrón de una herramienta
   de escritorio, no de una landing— y libera el encabezado, que ahora nombra
   la vista en vez de repetir la marca. Neto: ~30px verticales de vuelta para
   los datos, que en una tabla son dos filas más.
   ═══════════════════════════════════════════════════════════════════════ */
#app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);height:100vh;
  position:relative;z-index:2}
.rail{display:flex;flex-direction:column;align-items:center;padding:16px 0 14px;
  border-right:1px solid var(--border-1);
  background:linear-gradient(180deg,rgba(245,229,186,.030),rgba(245,229,186,0) 260px),
             rgba(9,7,8,.55)}
.rail-brand{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:13px;cursor:default}
.rail-mark{width:38px;height:38px;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.65))}
.rail-nav{display:flex;flex-direction:column;gap:4px;width:100%;padding:0 9px;margin-top:22px}
.nav-item{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:11px 3px 9px;background:none;border:none;border-radius:12px;color:var(--fg-3);
  font:600 9.5px/1 var(--font-sans);letter-spacing:.03em;cursor:pointer;
  transition:color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.nav-item svg{width:21px;height:21px}
.nav-item:hover{color:var(--fg-1);background:rgba(245,229,186,.045)}
.nav-item.active{color:var(--brand-cream);background:rgba(245,229,186,.065)}
/* Marcador de pestaña activa: se apoya en el borde del raíl, no dentro del
   botón — así el ojo encuentra la vista actual sin leer ningún texto. */
.nav-item.active::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  width:3px;height:24px;border-radius:0 3px 3px 0;background:var(--accent)}
.nav-item:focus-visible{outline:none;box-shadow:var(--ring)}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:12px}
.brand .dot,.rail-foot .dot{width:7px;height:7px;border-radius:50%;background:var(--fg-3);
  transition:background var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.rail-foot .dot.live{background:var(--pos);box-shadow:0 0 0 3px rgba(58,167,113,.16)}
.icon-btn{display:flex;align-items:center;justify-content:center;
  background:var(--bg-surface);border:1px solid var(--border-1);
  color:var(--fg-2);width:36px;height:36px;border-radius:11px;cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.icon-btn:hover{color:var(--fg-1);border-color:var(--border-3)}
.icon-btn svg{width:17px;height:17px}
.icon-btn.spinning{color:var(--brand-cream)}
.icon-btn.spinning svg{animation:spin .9s linear infinite}

.shell{display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;gap:26px;
  padding:15px 28px 13px}
/* Titulo y bajada comparten linea de base: apilados costaban 30px verticales
   en TODAS las vistas, y esos 30px en la tabla son una fila de datos. */
.pagehead{min-width:0;display:flex;align-items:baseline;gap:13px}
.pagehead h1{margin:0;font:500 23px/1.1 var(--font-serif);letter-spacing:-.018em;color:var(--fg-1);flex:0 0 auto}
.pagehead p{margin:0;font:400 12px/1.4 var(--font-sans);color:var(--fg-3);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-left:14px;border-left:1px solid var(--border-1)}
.topright{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.kbd-hint{display:flex;align-items:center;gap:4px;font:500 10px var(--font-sans);color:var(--fg-3);
  letter-spacing:.04em;text-transform:uppercase}
.stamp{font:400 10.5px/1.4 var(--font-sans);color:var(--fg-3);text-align:right}
.view{flex:1;overflow-y:auto;padding:4px 28px 10px;display:flex;flex-direction:column;min-height:0}
.view > .tb, .view > .tb2, .view > #scan-progress-wrap{flex:0 0 auto}
.view.scanner-view{overflow:hidden}
/* El Mapa se comporta como la tabla: alto completo, sin scroll de pagina, y el
   scroll vive dentro de cada columna. */
.view.map-view{overflow:hidden}
.view.map-view > .mp-bar{flex:0 0 auto}
.view.scanner-view > .hk-table-wrap{flex:1 1 auto;min-height:0;max-height:none}
.foot{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:9px 28px;border-top:1px solid var(--border-1);font:500 10px var(--font-sans);
  color:var(--fg-3);letter-spacing:.10em;text-transform:uppercase}
.foot-brand{color:var(--fg-2)}

/* ── inputs ─────────────────────────────────────────────────────────────── */
/* `.tb-search` lleva `flex:1 1 auto` porque en la barra de Mercado compite
   por el ancho con el conmutador y el botón de scan. Suelta como hija directa
   de `.view` —que es una COLUMNA flex— ese mismo `1 1 auto` la hace crecer en
   ALTO: la caja de ETFs medía 302px con un input de 44 dentro, y la lupa, que
   va centrada en absoluto, quedaba flotando 260px más abajo con el resto del
   contenido empujado. La guarda va acá y no en la clase para que ninguna vista
   futura repita el mismo error. */
.view > .search-wrap{flex:0 0 auto;max-width:560px}
.search-wrap{position:relative;width:100%}
.search-ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  stroke:var(--fg-3);fill:none;stroke-width:1.8;stroke-linecap:round;pointer-events:none;
  transition:stroke var(--dur-base) var(--ease)}
.search-wrap:focus-within .search-ico{stroke:var(--accent-fg)}
.search-wrap .search{padding-left:44px}
.search{width:100%;background:var(--bg-surface);
  border:1px solid var(--border-2);border-radius:var(--radius-md);color:var(--fg-1);
  padding:12px 16px;font:400 14px var(--font-sans);caret-color:var(--accent);outline:none;
  transition:border-color var(--dur-hover) var(--ease),box-shadow var(--dur-base) var(--ease)}
.search:focus{border-color:var(--border-3);box-shadow:var(--ring)}
.search::placeholder{color:var(--fg-3)}
.search-clear{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  background:none;border:none;border-radius:8px;color:var(--fg-3);cursor:pointer;
  transition:color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.search-clear:hover{color:var(--fg-1);background:rgba(245,229,186,.07)}
.meta-row{font:400 11.5px var(--font-sans);color:var(--fg-3);margin:12px 2px 16px;letter-spacing:.02em}

/* ── banners ── */
.hk-empty-banner,.empty{background:var(--bg-surface);
  border:1px solid var(--border-1);color:var(--fg-2);padding:40px 28px;border-radius:var(--radius-lg);
  text-align:center;font-size:13px;line-height:1.7;font-family:var(--font-sans)}
.hk-success-banner{background:rgba(58,167,113,.10);border:1px solid rgba(58,167,113,.40);color:var(--pos);
  padding:10px 14px;border-radius:8px;font:500 12.5px var(--font-sans)}

/* Bloque de entrada de una vista: titulo + una frase. Alineado a la izquierda
   y con medida de lectura acotada — centrado competia con el resto de la app,
   que es toda de eje izquierdo. */
.lead{max-width:620px;margin:26px 0 30px}
.lead h2{margin:0 0 9px;font:500 22px/1.25 var(--font-serif);color:var(--fg-1);letter-spacing:-.015em}
.lead p{margin:0;font:400 13px/1.7 var(--font-sans);color:var(--fg-2)}
.sec-head{font:600 10px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);margin:0 0 12px}

/* ── Portada de una vista sin datos (hero) ── */
.b-hero{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:16px;padding:64px 28px 44px}
.b-hero svg{width:34px;height:34px;color:var(--fg-3);opacity:.8}
.b-hero-t{font:500 23px/1.2 var(--font-serif);color:var(--fg-1);letter-spacing:-.015em}
.b-hero-s{font:400 13px/1.7 var(--font-sans);color:var(--fg-2);max-width:460px}

/* ══ FICHAS (modo Fichas de Mercado; la tab ETFs reusa .reslist/.resrow) ══ */
.cards{width:100%;display:flex;flex-direction:column;gap:7px;padding-bottom:16px}
.card{display:grid;grid-template-columns:38px minmax(170px,1fr) auto 92px 108px;
  align-items:center;gap:20px;padding:11px 18px;cursor:pointer;
  background-color:var(--bg-surface);
  border:1px solid var(--border-1);border-radius:var(--radius-lg);
  transition:border-color var(--dur-hover) var(--ease),background-color var(--dur-hover) var(--ease)}
.card:hover{border-color:var(--border-2);background-color:var(--bg-elevated)}
.card:focus-visible{outline:none;border-color:var(--border-3);box-shadow:var(--ring)}
.card-logo{width:34px;height:34px;border-radius:8px;object-fit:contain;background:var(--bg-elevated);
  border:1px solid var(--border-1)}
.card-id{display:flex;flex-direction:column;gap:5px;min-width:0}
.card-id-top{display:flex;align-items:baseline;gap:9px;min-width:0}
.card-tk{font:600 16px/1 var(--font-sans);color:var(--fg-1);letter-spacing:.015em;flex:0 0 auto}
.card-nm{font:400 12.5px/1 var(--font-sans);color:var(--fg-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
.card-sub{font:400 11.5px/1 var(--font-sans);color:var(--fg-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.card-dot{margin:0 7px;opacity:.5}
.card-own{font:600 8.5px/1 var(--font-sans);letter-spacing:.10em;text-transform:uppercase;
  color:var(--brand-cream);background:var(--accent-soft);border:1px solid rgba(145,7,19,.5);
  border-radius:var(--radius-pill);padding:3px 7px;flex:0 0 auto}
.card-stale{width:4px;height:4px;border-radius:50%;background:var(--fg-2);opacity:.4;
  align-self:center;flex:0 0 auto;margin-right:-3px}

/* Medidores de eje: barra de magnitud + valor. La barra es lo que permite
   comparar perfiles sin leer los cinco números uno por uno. */
.mtrs{display:flex;align-items:flex-end;gap:9px}
.mtr{display:flex;flex-direction:column;align-items:center;gap:5px;width:25px}
.mtr-k{font:600 8.5px/1 var(--font-sans);letter-spacing:.10em;color:var(--fg-3)}
.mtr-track{width:100%;height:23px;border-radius:3px;background:rgba(245,229,186,.065);
  display:flex;align-items:flex-end;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(245,229,186,.04)}
.mtr-track i{display:block;width:100%;border-radius:3px 3px 2px 2px;opacity:.9;
  transition:height var(--dur-base) var(--ease)}
.mtr-v{font:600 11.5px/1 var(--font-mono);font-variant-numeric:tabular-nums}

.card-ms{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.card-ms-lab{font:600 8.5px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.card-ms-v{font:700 26px/1 var(--font-mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;color:var(--fg-1)}
.card-ms-bar{width:100%;height:4px;border-radius:2px;background:rgba(245,229,186,.13);overflow:hidden}
.card-ms-bar i{display:block;height:100%;background:var(--fg-2);border-radius:2px;
  transition:width var(--dur-base) var(--ease)}
.card-ms.pos .card-ms-v{color:var(--pos)} .card-ms.pos .card-ms-bar i{background:var(--pos)}
.card-ms.neg .card-ms-v{color:var(--neg)} .card-ms.neg .card-ms-bar i{background:var(--neg)}
.card-ms.na  .card-ms-v{color:var(--fg-3)}
.card-px{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.card-px-v{font:500 15px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg-1)}
.card-px-d{font:500 12px/1 var(--font-mono);font-variant-numeric:tabular-nums}
/* Fila de acción (analizar en vivo un ticker fuera del scan). */
.card--action{grid-template-columns:38px 1fr auto;border-style:dashed;border-color:var(--border-2)}
.card--action .card-tk{color:var(--brand-cream)}
.card-go{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--font-sans);
  letter-spacing:.03em;color:var(--fg-2);white-space:nowrap}
.card--action:hover .card-go{color:var(--brand-cream)}
/* Ventanas angostas: primero se van los medidores, después el precio — el
   orden inverso al de utilidad. */
@media(max-width:1180px){ .card{grid-template-columns:38px minmax(150px,1fr) 92px 104px} .mtrs{display:none} }
@media(max-width:820px){  .card{grid-template-columns:38px 1fr 92px} .card-px{display:none} }

/* ── lista genérica (la usa la tab ETFs) ── */
.reslist{width:100%;display:flex;flex-direction:column;gap:8px}
.resrow{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:18px;
  background-color:var(--bg-surface);
  border:1px solid var(--border-1);border-radius:var(--radius-lg);padding:15px 20px;cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease),background-color var(--dur-hover) var(--ease)}
.resrow:hover{border-color:var(--border-2);background-color:var(--bg-elevated)}
.rlogo{width:32px;height:32px;border-radius:7px;object-fit:contain;background:var(--bg-elevated);
  border:1px solid var(--border-1)}
.r-id{display:flex;flex-direction:column;gap:4px;min-width:0}
.r-id .rtk{font:600 16px/1 var(--font-sans);color:var(--brand-cream);letter-spacing:.015em}
.r-id .rsec{font:400 12px/1.4 var(--font-sans);color:var(--fg-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.r-go{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--font-sans);
  letter-spacing:.03em;color:var(--fg-2);white-space:nowrap}
.resrow:hover .r-go{color:var(--brand-cream)}
/* ── Ticker detail (score dashboard) ── */
.back{color:var(--fg-2);cursor:pointer;font-size:13px;margin-bottom:16px;display:inline-block}
.back:hover{color:var(--fg-1)}
.detail{max-width:1500px}
.spin{width:18px;height:18px;border:2px solid var(--border-2);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* hero (hk-hero del Design System) */
.hk-hero{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:14px;
  padding:14px 22px;display:flex;align-items:center;gap:20px}
.hk-hero-left{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.hk-hero-id{display:flex;align-items:center;gap:12px}
.hk-hero-logo{width:38px;height:38px;border-radius:8px;object-fit:contain;background:var(--bg-elevated);flex-shrink:0}
.hk-hero-ticker{font:500 26px/1.15 var(--font-serif);color:var(--fg-1);letter-spacing:-.01em;
  max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hk-hero-tickersub{display:flex;align-items:baseline;gap:6px;margin-top:5px}
.hk-hero-tickersub-lab{font:600 9px/1 var(--font-sans);letter-spacing:.10em;text-transform:uppercase;color:var(--fg-3)}
.hk-hero-tickersub-val{font:600 12px/1 var(--font-mono);color:var(--fg-2);letter-spacing:.02em}
/* País del emisor: bandera + nombre. inline-flex con align-items:center porque el
   contenedor alinea por baseline y una <img> no tiene una utilizable — sin esto
   la bandera cuelga bajo el texto. El borde translúcido evita que las banderas
   con blanco al borde (Japón, Suiza) se disuelvan contra el fondo oscuro. */
.hk-country{display:inline-flex;align-items:center;gap:6px}
.hk-flag{height:11px;width:auto;border-radius:2px;display:block;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.hk-hero-sep{width:1px;height:56px;background:var(--border-2);flex-shrink:0}
/* Centrado: hasta el 12-ago-2026 el hero llevaba DOS bloques (Company + Entry)
   separados por una regla, y alineados a la izquierda llenaban el espacio. Con
   Entry fuera, el bloque único quedaba pegado al separador dejando un hueco
   muerto a la derecha. */
.hk-hero-right{flex:1;display:flex;align-items:center;justify-content:center;gap:0}
.hk-hero-num{font:700 56px/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:4px}
.hk-hero-of{font:400 16px/1 var(--font-mono);color:var(--fg-3);margin-left:4px}
.hk-ms-eyebrow{display:block;margin-bottom:4px;font:600 10px/1 var(--font-sans);
  letter-spacing:.10em;text-transform:uppercase;color:var(--fg-2)}

/* chips (hk-chip-row grid 5: Q/G/V/M/R) — eran 8 hasta el 12-ago-2026 (con T y
   MOM) y 6 hasta el 13-ago (con C). La grilla se dimensiona al número REAL de
   chips, y hay que acordarse de bajarla al retirar un eje: quedó en 6 con cinco
   chips y los dejó apiñados a la izquierda con una columna muerta a la derecha.
   Es la SEGUNDA vez que pasa lo mismo — de ahí que este comentario exista. */
.hk-chip-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0}
.hk-chip{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--radius-md);
  padding:14px 8px;text-align:center;transition:border-color var(--dur-hover) var(--ease)}
.hk-chip:hover{border-color:var(--border-3)}
.hk-chip-axis{font:600 10px/1 var(--font-sans);letter-spacing:.10em;text-transform:uppercase;color:var(--fg-2)}
.hk-chip-val{font:700 28px/1 var(--font-mono);font-variant-numeric:tabular-nums;margin:4px 0}
.hk-chip-name{font:400 10px/1 var(--font-sans);color:var(--fg-3);letter-spacing:.04em}
.hk-chip-tag{font:600 8px/1 var(--font-sans);letter-spacing:.10em;text-transform:uppercase;margin-top:6px;opacity:.85}

/* detail grid (radar+VP a la izquierda · breakdown a la derecha; chips van
   full-width ARRIBA del grid para que no se apilen en la columna estrecha) */
.detgrid{display:grid;grid-template-columns:minmax(360px,440px) 1fr;gap:24px;margin-top:16px;align-items:start}
@media(max-width:900px){.detgrid{grid-template-columns:1fr}}
.radar-card{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:8px}
.bd-col{min-width:0}  /* deja que las tablas del breakdown scrolleen sin desbordar el grid */
/* .vp/.vrow — barras de posición en el Volume Profile. Eliminadas el
   12-ago-2026 con el eje T. */

/* gráfico interactivo (lightweight-charts, motor de TradingView) */
.chart-card{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--radius-lg);
  padding:14px 16px 10px;margin:2px 0 4px}
.ch-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.ch-ranges{display:flex;gap:2px;background:var(--bg-elevated);border:1px solid var(--border-1);
  border-radius:var(--radius-pill);padding:3px}
.ch-r{background:none;border:none;color:var(--fg-2);font:600 11px var(--font-sans);
  padding:5px 12px;border-radius:var(--radius-pill);cursor:pointer;letter-spacing:.03em;
  transition:color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.ch-r:hover{color:var(--fg-1)}
.ch-r.active{background:var(--brand-burgundy);color:var(--brand-cream)}
.ch-sel{padding:6px 10px;font-size:12px}
.ch-box{position:relative;height:440px}
.ch-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--fg-3);font-size:12.5px;z-index:3;pointer-events:none}

/* cards que llenan la columna izquierda del detalle (perfil, patrón, stats) */
.side-card{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--radius-lg);
  padding:16px 18px;margin-top:14px}
.side-head{font:600 10px/1 var(--font-sans);letter-spacing:.10em;text-transform:uppercase;color:var(--fg-2);margin:0 0 10px}
.biz-meta{font:500 12px/1 var(--font-sans);color:var(--brand-cream);letter-spacing:.02em;margin-bottom:10px}
.biz-meta--sub{font:400 11.5px/1 var(--font-sans);color:var(--fg-2)}
.biz-link{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.biz-link:hover{color:var(--brand-cream)}
.biz-desc{font:400 12.5px/1.65 var(--font-sans);color:var(--fg-2);margin:0;
  display:-webkit-box;-webkit-line-clamp:14;-webkit-box-orient:vertical;overflow:hidden}
.krow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--border-1);font-size:12.5px}
.krow:last-child{border-bottom:none}
.klab{color:var(--fg-2);font-family:var(--font-sans)}
.kval{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.off-row{display:flex;flex-direction:column;gap:2px;padding:8px 0;
  border-bottom:1px solid var(--border-1)}
.off-row:last-child{border-bottom:none;padding-bottom:0}
.off-n{font:500 12.5px/1.35 var(--font-sans);color:var(--fg-1)}
.off-t{font:400 11px/1.4 var(--font-sans);color:var(--fg-2)}

/* comparación por industria (ranking de pares) */
.peer-meta{font:400 11.5px/1.5 var(--font-sans);color:var(--fg-2);margin-bottom:10px}
.peer-meta b{color:var(--fg-1);font-weight:600}
/* La comparacion dejo de ser una tarjeta de barra lateral: es la TABLA de la
   industria. Ademas del nombre y la barra del Master Score lleva las cuatro
   metricas que hacen comparables a dos empresas del mismo negocio —tamano,
   precio, crecimiento y margen— y los cinco ejes, que es lo que permite ver si
   uno gana por calidad o por estar barato. Cierra con la MEDIANA de la ventana:
   una cifra sin su referencia no dice nada. */
.peer-wrap{max-width:100%}
.peer-card{margin-top:0}
.peer-list{display:flex;flex-direction:column;gap:3px;max-height:min(54vh,600px);
  overflow-y:auto;padding-right:4px;margin-right:-4px}
.peer-row{display:grid;
  grid-template-columns:38px 62px minmax(120px,1fr) 62px 60px 66px 60px
                        repeat(5,38px) minmax(90px,150px) 40px;
  align-items:center;gap:10px;
  padding:7px 9px;border-radius:8px;border:1px solid transparent;
  transition:background var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease)}
.peer-nm{color:var(--fg-2);font:400 12px/1.3 var(--font-sans);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peer-mx{font:400 11.5px/1 var(--font-mono);font-variant-numeric:tabular-nums;
  color:var(--fg-2);text-align:right}
.peer-s{font:600 12px/1 var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
/* Cabecera y pie viven FUERA del contenedor que scrollea: con 350 filas, una
   cabecera que se va con el scroll deja de nombrar nada. */
.peer-hd,.peer-md{padding-top:2px;padding-bottom:6px;border-radius:0}
.peer-hd span,.peer-md span{font:600 9.5px/1 var(--font-sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-3);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peer-hd{border-bottom:1px solid var(--border-2);margin-bottom:4px}
.peer-hd span:nth-child(2),.peer-hd span:nth-child(3){text-align:left}
.peer-md{border-top:1px solid var(--border-2);margin-top:4px;padding-top:8px}
.peer-md span{font-family:var(--font-mono);font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--fg-2)}
.peer-md span:nth-child(2),.peer-md span:nth-child(3){font-family:var(--font-sans);
  font-weight:500;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-3);text-align:left}
.peer-bar{height:6px;border-radius:var(--radius-pill);background:var(--bg-elevated);
  border:1px solid var(--border-1);overflow:hidden}
.peer-bar i{display:block;height:100%;border-radius:var(--radius-pill);opacity:.8}
.peer-row:hover .peer-bar i,.peer-self .peer-bar i{opacity:1}
/* Los minimos suman ~950px con la tarjeta incluida, asi que la tabla entera
   entra tambien a 1280: lo unico que cede es la columna del nombre. */
.peer-row[data-tk]{cursor:pointer}
.peer-row[data-tk]:hover{background:var(--bg-elevated);border-color:var(--border-2)}
.peer-self{background:var(--brand-burgundy-soft);border-color:var(--border-2)}
.peer-rank{font:600 11px/1 var(--font-mono);color:var(--fg-3);text-align:right}
.peer-tk{font:600 13px/1 var(--font-sans);color:var(--fg-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peer-self .peer-tk{color:var(--brand-cream)}
.peer-ms{font:700 16px/1 var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;min-width:30px}

/* Desglose sin drill (fila del scan, sin análisis en vivo): cinco bloques de
   tres columnas. En una sola columna el ancho sobraba tanto que entre el
   nombre de la métrica y su valor quedaban 300px de nada. */
.bd-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:2px 30px;align-items:start}
.bd-grp{min-width:0}
.hk-table--grp{table-layout:fixed;margin-bottom:10px}
.hk-table--grp col{width:auto}
.hk-table--grp .hk-td:first-child{width:44%}
.hk-table--grp .hk-td:nth-child(2){width:28%}
.hk-table--grp .hk-td:last-child{width:28%}

/* breakdown drill-down (hk-eyebrow + hk-table--drill) */
.hk-eyebrow{font:600 10px/1 var(--font-sans);letter-spacing:.10em;text-transform:uppercase;
  color:var(--fg-2);margin:14px 0 6px;display:flex;align-items:baseline;gap:8px}

/* ── tablas (hk-table del Design System) ── */
.hk-table-wrap{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--radius-md);
  overflow:auto;max-height:calc(100vh - 250px)}
.hk-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;font-size:12.5px}
.hk-table--drill{font-size:12px;margin-bottom:8px;table-layout:fixed;width:100%}
.hk-table--drill col.col-icon{width:28px}
.hk-table--drill col.col-metric{width:29%}
.hk-table--drill col.col-valor{width:15%}
/* Mediana de la industria (08-sep-2026). Va PEGADA al valor a proposito: la
   comparacion es entre esas dos celdas, y separarlas con el peso obligaria a
   saltar la vista. */
.hk-table--drill col.col-ind{width:15%}
.hk-table--drill col.col-peso{width:10%}
.hk-table--drill col.col-frac{width:14%}
.hk-table--drill col.col-contrib{width:17%}
.hk-th{position:sticky;top:0;background:var(--bg-surface);font-family:var(--font-sans);
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);
  text-align:right;padding:10px 12px;border-bottom:1px solid var(--border-2);white-space:nowrap;
  cursor:pointer;user-select:none;z-index:2}
.hk-th:hover{color:var(--fg-1)}
.hk-th.sorted{color:var(--brand-cream)}
.hk-th--l{text-align:left}
.hk-td{padding:8px 12px;border-bottom:1px solid var(--border-1);text-align:right;color:var(--fg-1);
  white-space:nowrap;font-family:var(--font-mono);font-size:12.5px}
.hk-td--l{text-align:left}
.hk-tr:hover .hk-td{background:rgba(245,229,186,.03)}
/* Fila no-fresca: arrastrada de un scan previo o traída por búsqueda individual.
   Marca deliberadamente MUY sutil (un punto tenue antes del ticker) — entre scan
   y scan las diferencias no son grandes; el tooltip da la fecha. */
.hk-tr--carried .hk-td:first-child{position:relative}
.hk-tr--carried .hk-td:first-child::before{
  content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--fg-2);opacity:.35}
.hk-tk{font-family:var(--font-sans);font-weight:600;color:var(--fg-1);cursor:pointer}
/* Industria: abre su ficha en el Glosario. Se marca al pasar el mouse en vez de
   con subrayado permanente — son ~4.300 filas y subrayarlas todas sería ruido. */
.hk-ind{color:var(--fg-2);font-size:11px;cursor:pointer;
  transition:color var(--dur-hover) var(--ease)}
.hk-ind:hover{color:var(--brand-cream);text-decoration:underline;text-underline-offset:2px}
.hk-tk:hover{color:var(--brand-cream)}
.hk-table--drill .hk-td:first-child,.hk-table--drill .hk-th:first-child{text-align:center;padding-left:6px;padding-right:2px;cursor:default}

/* ══ BARRA DE HERRAMIENTAS DE MERCADO ═════════════════════════════════════
   Dos renglones con trabajos distintos: arriba se ESCRIBE (búsqueda + modo +
   scan), abajo se REFINA (sector, piso de score, cartera, orden) y se declara
   cuántas filas se están viendo. Antes los seis controles compartían un solo
   renglón y el que importaba —la búsqueda— quedaba del mismo tamaño que un
   selector de capitalización que se toca una vez al mes.
   ═══════════════════════════════════════════════════════════════════════ */
.tb{display:flex;align-items:center;gap:10px;position:relative;margin:2px 0 0}
.tb-search{flex:1 1 auto;min-width:200px;max-width:560px;margin-right:auto}
.tb-spacer{flex:1 1 auto}
.seg{display:flex;gap:3px;background:var(--bg-sunken);border:1px solid var(--border-1);
  border-radius:12px;padding:3px;flex:0 0 auto}
.seg-b{display:flex;align-items:center;gap:7px;background:none;border:none;color:var(--fg-2);
  font:600 12px var(--font-sans);padding:8px 14px;border-radius:9px;cursor:pointer;
  transition:color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.seg-b:hover{color:var(--fg-1)}
.seg-b.on{background:var(--bg-elevated);color:var(--brand-cream)}
.tb-scan{display:flex;align-items:center;gap:8px;flex:0 0 auto;
  background-color:var(--bg-surface);
  border:1px solid var(--border-2);border-radius:var(--radius-md);color:var(--fg-2);
  font:600 12.5px var(--font-sans);padding:10px 16px;cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.tb-scan:hover{border-color:var(--border-3);color:var(--fg-1)}
.tb-scan.on{border-color:var(--accent);color:var(--brand-cream);background-color:var(--accent-soft)}
.tb-scan.busy{color:var(--brand-cream);border-color:var(--accent)}
.tb-scan.busy svg{animation:spin 1.6s linear infinite}

/* Popover del scan: el barrido completo es una operación de 7-15 min que se
   configura una vez cada muchos días, así que no merece ocupar la barra de
   forma permanente — pero tampoco esconderse en un menú de ajustes. */
.pop{position:absolute;right:0;top:calc(100% + 9px);width:334px;z-index:40;
  background:var(--bg-elevated);
  border:1px solid var(--border-2);border-radius:var(--radius-xl);padding:16px 17px 15px;
  box-shadow:var(--shadow-lg);animation:popin .16s var(--ease)}
@keyframes popin{from{transform:translateY(-7px) scale(.985)}to{transform:none}}
.pop-head{font:600 10px var(--font-sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:13px}
.pop-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.pop-row label{font:400 12.5px var(--font-sans);color:var(--fg-2)}
.pop-row .sel{min-width:150px}
.pop-note{font:400 11.5px/1.6 var(--font-sans);color:var(--fg-3);margin:13px 0 14px;
  padding-top:12px;border-top:1px solid var(--border-1)}
.pop-actions{display:flex;gap:8px;flex-wrap:wrap}
.pop-actions .btn{flex:1 1 auto;justify-content:center}

/* Segundo renglón: refinamiento + cuenta. */
.tb2{display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:12px 0 13px;flex-wrap:wrap}
.tb2-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fsel{background:var(--bg-surface);border:1px solid var(--border-1);color:var(--fg-2);
  border-radius:var(--radius-pill);padding:6px 12px;font:500 12px var(--font-sans);cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.fsel:hover{border-color:var(--border-3);color:var(--fg-1)}
.fsel:focus{outline:none;border-color:var(--accent);color:var(--fg-1)}
.fchip{display:flex;align-items:center;gap:7px;background:var(--bg-surface);
  border:1px solid var(--border-1);color:var(--fg-2);border-radius:var(--radius-pill);
  padding:6px 13px 6px 11px;font:500 12px var(--font-sans);cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease),
             background var(--dur-hover) var(--ease)}
.fchip:hover{border-color:var(--border-3);color:var(--fg-1)}
.fchip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--brand-cream)}
.fsep{width:1px;height:18px;background:var(--border-1);margin:0 4px}
.flab{font:400 11.5px var(--font-sans);color:var(--fg-3)}
.fclear{background:none;border:none;color:var(--fg-3);font:500 12px var(--font-sans);
  cursor:pointer;padding:6px 8px;border-radius:var(--radius-sm);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--border-2)}
.fclear:hover{color:var(--brand-cream)}
.tb2-count{font:400 11.5px var(--font-sans);color:var(--fg-3);flex:0 0 auto}
.tb2-count b{color:var(--fg-1);font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums}

/* ── controles compartidos ── */
.sel{background:var(--bg-surface);border:1px solid var(--border-2);color:var(--fg-1);
  border-radius:var(--radius-sm);padding:7px 10px;font:400 12.5px var(--font-sans);cursor:pointer}
.sel:hover{border-color:var(--border-3)}
.sel:disabled{opacity:.5;cursor:default}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);border:none;
  color:var(--accent-fg);border-radius:var(--radius-md);padding:10px 18px;
  font:600 12.5px var(--font-sans);cursor:pointer;
  transition:background var(--dur-hover) var(--ease),opacity var(--dur-hover) var(--ease)}
.btn:hover{background:#a3131f}
.btn:active{opacity:.85}
.btn:disabled{opacity:.5;cursor:default;filter:none;transform:none}
.btn-danger{background:var(--neg);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--border-2);color:var(--fg-2);box-shadow:none}
.btn-ghost:hover{border-color:var(--border-3);color:var(--fg-1);filter:none}
.scan-progress{background-color:var(--bg-surface);
  border:1px solid var(--border-2);border-radius:var(--radius-md);
  padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;gap:14px;
  font-size:12.5px;color:var(--fg-1)}

/* Primer arranque: sin scan no hay nada que ordenar, así que la vista explica
   qué es lo que va a construir en vez de mostrar una tabla vacía. */
.firstrun{margin:auto;max-width:520px;text-align:center;padding:40px 32px 44px;
  background-color:var(--bg-surface);
  border:1px solid var(--border-1);border-radius:var(--radius-xl)}
.firstrun-mark{display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  margin:0 auto 18px;border-radius:15px;background:var(--accent-soft);
  border:1px solid var(--border-2);color:var(--brand-cream)}
.firstrun h2{margin:0 0 10px;font:500 22px/1.2 var(--font-serif);color:var(--fg-1);letter-spacing:-.015em}
.firstrun p{margin:0 0 22px;font:400 13px/1.7 var(--font-sans);color:var(--fg-2)}
/* ── Glosario (markdown renderizado) ── */
.gloss{line-height:1.62}
.gloss h1{font:400 24px var(--font-serif);color:var(--fg-1);letter-spacing:-.01em;margin:22px 0 10px}
.gloss h2{font:600 18px var(--font-sans);color:var(--brand-cream);margin:22px 0 8px}
.gloss h3{font:600 14px var(--font-sans);color:var(--fg-1);margin:16px 0 6px}
.gloss h6{font:600 10px var(--font-sans);color:var(--fg-2);letter-spacing:.10em;text-transform:uppercase;margin:12px 0 4px}
.gloss p{font:400 14px var(--font-sans);color:var(--fg-1);margin:9px 0}
.gloss strong{color:var(--brand-cream);font-weight:600}
.gloss code{font-family:var(--font-mono);font-size:12px;background:var(--bg-elevated);
  border:1px solid var(--border-1);border-radius:var(--radius-sm);color:var(--brand-cream);padding:1px 5px}
.gloss hr{border:none;border-top:1px solid var(--border-1);margin:18px 0}
.gloss ul{margin:8px 0;padding-left:20px}
.gloss li{margin:4px 0}
.gloss .tbl{overflow-x:auto;margin:12px 0;border:1px solid var(--border-1);border-radius:var(--radius-md)}
.gloss table{border-collapse:collapse;width:100%;font-size:13px}
.gloss th{font:600 10px var(--font-sans);letter-spacing:.10em;text-transform:uppercase;color:var(--fg-2);
  padding:9px 12px;border-bottom:1px solid var(--border-2);background:var(--bg-surface);text-align:left}
.gloss td{font-family:var(--font-mono);font-size:12.5px;color:var(--fg-1);padding:8px 12px;
  border-bottom:1px solid var(--border-1);text-align:left;line-height:1.45}
.gloss tr:last-child td{border-bottom:none}
.gloss tr:hover td{background:rgba(245,229,186,.03)}
/* Cita: nota al margen. Se usa mucho para declarar límites del modelo y
   defectos de datos conocidos, así que tiene que leerse como aparte. */
.gloss blockquote{margin:14px 0;padding:10px 16px;border-left:2px solid var(--accent);
  background:rgba(145,7,19,.07);border-radius:0 var(--radius-md) var(--radius-md) 0}
.gloss blockquote p{font-size:13px;color:var(--fg-2)}
.gloss blockquote p:first-child{margin-top:0}
.gloss blockquote p:last-child{margin-bottom:0}
.gloss blockquote strong{color:var(--brand-cream)}

/* ── Glosario: shell de 3 pestañas + índice lateral ── */
.gl{display:flex;flex-direction:column;gap:0}
.gl-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--border-1);margin-bottom:2px}
.gl-tabs{display:flex;gap:2px;flex:0 0 auto}
.gl-tab{background:transparent;border:none;border-bottom:2px solid transparent;
  color:var(--fg-2);font:500 13.5px var(--font-sans);padding:8px 14px;cursor:pointer;
  display:flex;align-items:center;gap:7px;transition:color var(--dur-hover) var(--ease)}
.gl-tab:hover{color:var(--fg-1)}
.gl-tab.active{color:var(--brand-cream);border-bottom-color:var(--accent)}
.gl-badge{font:600 10px var(--font-mono);background:var(--accent);color:var(--brand-cream);
  border-radius:var(--radius-pill);padding:1px 7px;min-width:20px;text-align:center}
.gl-badge--0{background:var(--bg-elevated);color:var(--fg-3)}
.gl-search{flex:1 1 260px;max-width:420px}

/* ── Pestañas de la ficha (08-sep-2026) ──────────────────────────────────
   Reusa el look de `.gl-tab`/`.gl-bar` del Glosario a propósito — mismo
   vocabulario visual, cero CSS nuevo para la barra en sí.

   Resumen y Comparables nacieron con `.dtab-narrow` (460px), heredado de
   cuando esas tarjetas vivían en la columna izquierda del detgrid. Sin el
   grid al lado, esa columna dejaba dos tercios de la pestaña en blanco: cada
   una tiene ahora su propia medida (09-sep-2026) y la clase se retiró. */
.dtabs-bar{margin-top:18px}
.dtab-pane{margin-top:4px}
/* Resumen: pasó por TRES columnas iguales (`repeat(auto-fit,minmax(292,410))`)
   y el resultado era un hueco muerto real, no solo asimétrico — Directiva es a
   veces un solo nombre, y con `align-items:start` esa celda terminaba con
   200-300px de vacío al lado de la descripción de la empresa, que sí llena su
   columna. El problema no era de medida sino de FORMA: tres celdas de la misma
   fila no pueden tener alturas independientes sin dejar hueco.
   Ahora son DOS columnas con roles distintos: la izquierda es la única que
   lleva prosa larga (Perfil de la empresa) y se lleva el espacio que necesita
   para leerse bien; la derecha es una COLUMNA (flex, no grid) de tarjetas
   cortas que se apilan a su propia altura — Directiva+Riesgo primero, lado a
   lado porque las dos son listas de pocas filas, y el radar cierra abajo.
   Apilar en vez de emparejar en la misma fila es lo que elimina el hueco:
   cada tarjeta corta ahora solo dejaba aire DEBAJO de sí misma, nunca al lado
   de otra cosa. */
.dsum-grid{display:grid;grid-template-columns:minmax(340px,1fr) minmax(300px,420px);
  gap:16px;align-items:start;max-width:1340px}
@media(max-width:980px){ .dsum-grid{grid-template-columns:1fr} }
.dsum-grid .side-card{margin-top:0}
.dsum-side{display:flex;flex-direction:column;gap:16px;min-width:0}
/* Directiva + Riesgo & liquidez: las dos son listas cortas (a veces una sola
   fila), así que van lado a lado en vez de una tras otra — dos tarjetas bajas
   ocupan menos alto total que dos tarjetas apiladas, y le dejan más columna al
   radar. Si falta una de las dos (sin directivos listados), la fila pasa a una
   sola columna en vez de dejar la mitad en blanco. */
.dsum-side-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dsum-side-row.single{grid-template-columns:1fr}
.dsum-side .radar-card{padding:14px 16px 4px}
.gl-search .search{padding-top:9px;padding-bottom:9px;font-size:13px}

/* Documento, no tablero: el indice y la columna de texto van juntos y
   centrados en el ancho disponible. Antes la columna de contenido se estiraba
   a todo el ancho (~1040px a 1440) mientras el texto se cortaba a 78ch (~700),
   asi que las reglas de los titulos y los bordes de las tarjetas seguian 340px
   mas alla de la ultima palabra: el hueco quedaba SIEMPRE a la derecha y se
   leia como una columna vacia. Acotando la columna a la medida de lectura, el
   aire sobrante se reparte a los dos lados y pasa a ser margen. */
.gl-body{display:grid;grid-template-columns:236px minmax(0,880px);
  column-gap:44px;align-items:start;justify-content:center}
@media (max-width:1320px){ .gl-body{justify-content:start} }
@media (max-width:900px){ .gl-body{grid-template-columns:1fr} .gl-side{display:none} }

.gl-side{position:sticky;top:0;padding-top:18px;max-height:100vh;overflow-y:auto}
.gl-side-head{font:600 10px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:10px;padding-left:10px}
.gl-side-empty{color:var(--fg-3);font-size:12.5px;padding:6px 10px}
.gl-side-foot{margin-top:14px;padding:10px;border-top:1px solid var(--border-1);
  color:var(--fg-3);font-size:11px;line-height:1.5}
.gl-idx{list-style:none;margin:0;padding:0}
.gl-idx li{margin:0}
.gl-idx-a{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:6px 10px;border-radius:var(--radius-sm);border-left:2px solid transparent;
  color:var(--fg-2);font-size:12.5px;line-height:1.35;cursor:pointer;
  transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.gl-idx-a:hover{background:var(--bg-surface);color:var(--fg-1)}
.gl-idx-a.active{background:var(--bg-surface);color:var(--brand-cream);border-left-color:var(--accent)}
.gl-idx-n{font:500 11px var(--font-mono);color:var(--fg-3);flex:0 0 auto}
.gl-idx-sub{display:block;font-size:10.5px;color:var(--fg-3);margin-top:1px}

.gl-main{min-width:0;padding-top:18px;padding-bottom:60px}
.gl-sec{margin-bottom:34px;scroll-margin-top:12px}
.gl-h2{font:400 22px var(--font-serif);color:var(--brand-cream);letter-spacing:-.01em;
  margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--border-1);
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.gl-h2-n{font:500 11px var(--font-mono);color:var(--fg-3);letter-spacing:0}
/* Medida de lectura: la columna de contenido llega a ~950px y una línea de esa
   largo se sigue mal. Las tablas quedan fuera del tope a propósito. */
.gl-sec > .gloss > p, .gl-sec > .gloss > ul, .gl-sec > .gloss > blockquote{max-width:78ch}
.gl-sec-intro{max-width:860px}
.gl-hits{font-size:12px;color:var(--fg-3);margin-bottom:14px}
.gl-about{background:var(--bg-surface);border:1px solid var(--border-1);
  border-radius:var(--radius-md);margin-bottom:26px;overflow:hidden}
.gl-about summary{cursor:pointer;padding:12px 16px;font:500 13px var(--font-sans);color:var(--brand-cream);
  list-style:none;user-select:none}
.gl-about summary::-webkit-details-marker{display:none}
.gl-about summary::before{content:"▸ ";color:var(--accent-fg);opacity:.6}
.gl-about[open] summary::before{content:"▾ "}
.gl-about[open] summary{border-bottom:1px solid var(--border-1)}
.gl-about .gloss{padding:4px 18px 14px;max-width:860px}

/* ── Hiperlinks entre entradas del glosario ── */
.gloss .gl-link{color:var(--accent-fg);border-bottom:1px dotted var(--accent-fg);
  cursor:pointer;text-decoration:none;transition:color var(--dur-hover) var(--ease),
  border-bottom-color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.gloss .gl-link:hover{color:var(--brand-cream);border-bottom-color:var(--brand-cream);
  background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:2px}
.gl-sub{scroll-margin-top:16px}
.gl-sub > strong:first-child{position:relative}
.gl-sub:target > strong:first-child::before{content:"";position:absolute;left:-14px;top:2px;bottom:2px;
  width:3px;background:var(--accent);border-radius:2px}

/* Tooltip flotante con la definición del concepto apuntado. Vive en <body>,
   no dentro de la vista, para no heredar overflow del scroll del glosario. */
.gl-tip{position:fixed;z-index:200;max-width:380px;background:var(--bg-elevated);
  border:1px solid var(--border-2);border-radius:var(--radius-md);
  box-shadow:0 8px 24px rgba(0,0,0,.5);padding:12px 14px;pointer-events:none;
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--dur-hover) var(--ease),transform var(--dur-hover) var(--ease)}
.gl-tip.show{opacity:1;transform:translateY(0)}
.gl-tip-head{font:600 12px var(--font-sans);color:var(--brand-cream);
  letter-spacing:.01em;margin-bottom:6px}
.gl-tip-body{font:400 13px var(--font-sans);color:var(--fg-1);line-height:1.5;
  max-height:200px;overflow:hidden;
  mask-image:linear-gradient(to bottom,black 75%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,black 75%,transparent)}
.gl-tip-body code{font:500 12px var(--font-mono);background:var(--bg-surface);
  padding:1px 4px;border-radius:3px}
.gl-tip-more{font:500 10px var(--font-mono);color:var(--fg-3);letter-spacing:.06em;
  text-transform:uppercase;margin-top:8px}

/* ── Ficha de industria ── */
.ind-list{display:flex;flex-direction:column;gap:16px}
.ind-card{background:var(--bg-surface);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);padding:18px 20px 16px;scroll-margin-top:12px;
  transition:border-color var(--dur-hover) var(--ease)}
.ind-card:hover{border-color:var(--border-2)}
.ind-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ind-title{font:600 16px var(--font-sans);color:var(--brand-cream);margin:0;letter-spacing:-.005em}
.ind-meta{display:flex;align-items:baseline;gap:12px;flex:0 0 auto}
.ind-n{font:500 11px var(--font-mono);color:var(--fg-2);background:var(--bg-elevated);
  border:1px solid var(--border-1);border-radius:var(--radius-pill);padding:2px 9px}
.ind-n--0{color:var(--fg-3);background:transparent}
.ind-med{font:500 11px var(--font-mono);color:var(--fg-3)}
.ind-tag{font:400 13.5px var(--font-serif);font-style:italic;color:var(--fg-2);
  margin:8px 0 0;line-height:1.5}
.ind-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ind-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-elevated);
  border:1px solid var(--border-1);border-radius:var(--radius-pill);padding:3px 10px 3px 4px;
  font:600 11px var(--font-mono);color:var(--fg-2);cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.ind-chip:hover{border-color:var(--border-3);color:var(--brand-cream)}
.ind-chip-logo{width:16px;height:16px;border-radius:4px;object-fit:contain;background:#fff}
.ind-rows{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.ind-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:640px){ .ind-row{grid-template-columns:1fr;gap:2px} }
.ind-lab{font:600 10px var(--font-sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-3);padding-top:4px;line-height:1.4}
.ind-txt{min-width:0}
.ind-txt p{font:400 13.5px var(--font-sans);color:var(--fg-1);margin:0 0 6px;line-height:1.6;max-width:74ch}
.ind-txt p:last-child{margin-bottom:0}
.ind-txt strong{color:var(--brand-cream);font-weight:600}
.ind-txt code{font-family:var(--font-mono);font-size:11.5px;background:var(--bg-elevated);
  border:1px solid var(--border-1);border-radius:var(--radius-sm);color:var(--brand-cream);padding:1px 5px}
.ind-txt ul{margin:4px 0;padding-left:18px}
.ind-txt li{font-size:13.5px;margin:3px 0;line-height:1.55}
/* La fila "Qué mirar en Hawk" es la que conecta la industria con el scoring:
   se marca para que se encuentre de un vistazo al hojear muchas fichas. */
.ind-row:last-child .ind-lab{color:var(--accent-fg);opacity:.75}
.ind-rest{margin-top:10px}
.ind-go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;background:transparent;border:1px solid var(--border-2);
  color:var(--fg-2);font:500 12px var(--font-sans);padding:6px 13px;
  border-radius:var(--radius-pill);cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.ind-go:hover{border-color:var(--accent);color:var(--brand-cream)}

/* ── Banda de confianza del hero (cobertura + frescura) ──────────────────
   Añadida 26-jul-2026. La cobertura de datos era invisible en la UI aunque
   el shrink hacia el neutro la convierte en parte del score. */
.hk-confbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:10px; padding:7px 14px;
  border-top:1px solid rgba(245,229,186,0.08);
  font-size:11.5px; letter-spacing:0.02em; color:var(--fg-2);
}
.hk-confbar b{ font-variant-numeric:tabular-nums; }
.hk-confsep{ color:var(--fg-3); opacity:0.5; }

/* ══════════════════════════════════════════════════════════════════════════
   VISTA ETFs (17-ago-2026)
   Descomposición de un fondo en sus posiciones + scores ponderados por peso.
   Reusa hk-hero, side-card, krow, hk-chip-row y radar-card del detalle de una
   acción; acá van solo los elementos que no existían.
   ══════════════════════════════════════════════════════════════════════════ */

/* Portada de la tab: los fondos más consultados como tarjetas.
   El bloque entero (frase + buscador + tarjetas) se centra en el alto
   disponible: es un estado de ENTRADA —no hay fondo analizado todavía— y
   anclado arriba dejaba media pantalla vacía debajo. El eje horizontal sigue
   siendo el izquierdo, como el resto de la app. */
.etf-home{flex:0 0 auto;display:flex;flex-direction:column;
  justify-content:flex-start;max-width:1180px;padding:26px 0 16px}
.etf-home .lead{margin:0 0 20px;max-width:680px}
.etf-home .search-wrap{max-width:560px;flex:0 0 auto}
.etf-pick-head{margin:22px 0 9px}
.etf-pick-head:first-of-type{margin-top:26px}
/* Cinco columnas FIJAS: con `auto-fill` a 1300px entraban nueve y el decimo
   fondo quedaba solo en una segunda fila. Cinco da dos filas parejas y
   tarjetas mas grandes, que es donde se lee el logotipo. */
.etf-grid{width:100%;display:grid;grid-template-columns:repeat(5,1fr);
  gap:10px;margin-top:2px;max-width:1120px}
/* Cinco es además el número real de fondos por familia. Bajar a cuatro en la
   ventana mínima de la app dejaba una quinta tarjeta aislada en cada bloque.
   Recién en un ancho realmente angosto pasamos a tres. */
@media (max-width:780px){ .etf-grid{grid-template-columns:repeat(3,1fr)} }
/* Tarjeta horizontal: con veinte fondos en cuatro filas, la version apilada
   (logo arriba, ticker debajo) pedia 100px de alto cada una y no cabian. En
   fila el logo va al lado y la tarjeta baja a ~58px sin perder legibilidad. */
.etf-card{background:var(--bg-surface);border:1px solid var(--border-1);
  border-radius:var(--radius-md);padding:11px 13px;cursor:pointer;
  display:flex;align-items:center;gap:11px;min-width:0;
  transition:border-color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.etf-card:hover{border-color:var(--border-2);background:var(--bg-elevated)}
.etf-card-logo{width:30px;height:30px;border-radius:7px;object-fit:contain;
  background:var(--bg-elevated);flex:0 0 auto}
.etf-card-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.etf-card-tk{font:600 14px/1 var(--font-sans);color:var(--fg-1);letter-spacing:.02em}
.etf-card-lab{font:400 11px/1.3 var(--font-sans);color:var(--fg-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Banda de cobertura ────────────────────────────────────────────────────
   El elemento con más peso informativo de la vista. Un Master Score de fondo
   sin decir qué fracción del fondo se está midiendo es una media verdad:
   medido, va de 99,9% (SOXX) a 46,3% (QQQ, respaldo de 10 posiciones) y 25,2%
   (IEFA, que cotiza fuera de NYSE+NASDAQ). Por eso va inmediatamente bajo el
   número, no al pie. */
.etf-cover{background:var(--bg-surface);border:1px solid var(--border-2);
  border-radius:var(--radius-md);padding:12px 14px 6px;margin-top:10px}
.etf-cover-bar{height:6px;border-radius:var(--radius-pill);background:var(--bg-elevated);
  overflow:hidden;border:1px solid var(--border-1)}
.etf-cover-bar span{display:block;height:100%;border-radius:var(--radius-pill);
  transition:width var(--dur-base) var(--ease)}
.etf-cover .hk-confbar{border-top:none;padding:0 2px}
.etf-note{font:400 11.5px/1.6 var(--font-sans);color:var(--fg-3);margin-top:9px}

/* Sectores: barra proporcional al peso. */
.etf-sec{display:grid;grid-template-columns:110px 1fr 46px;align-items:center;gap:10px;
  padding:5px 0;font-size:12px}
.etf-sec-n{color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etf-sec-bar{height:7px;background:var(--bg-elevated);border-radius:var(--radius-pill);
  overflow:hidden;border:1px solid var(--border-1)}
.etf-sec-bar i{display:block;height:100%;background:var(--accent);border-radius:var(--radius-pill)}
.etf-sec-w{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg-1);
  text-align:right;font-size:11.5px}

/* Industrias: MISMA fila de una línea que los sectores (nombre · barra · %), pero
   con el nombre mucho más ancho y la barra más corta — los nombres de industria
   son largos ("Drug Manufacturers - Specialty & Generic") y en la columna de
   110px de los sectores se truncaban todos.

   Se intentó primero a dos líneas (nombre+% arriba, barra abajo) para no truncar
   ninguno, y salió MAL por dos motivos: separaba las filas tanto que la lista
   dejaba de leerse como una distribución —que es para lo que existe—, y la barra
   se renderizaba VERTICAL, porque `.etf-sec-bar` es un <span> inline y su
   `height:7px` solo aplica cuando la grilla del padre lo convierte en ítem de
   grid. Suelta en un bloque, la altura se ignoraba y el <i> con `height:100%`
   colapsaba a una línea vertical.

   Y la premisa era falsa: medido a 1440 y a 1040 px, con `1fr` en el nombre
   (~246px contra los 110 fijos de los sectores) NINGUNO de los 111 de SPY, los
   135 de IWM ni los 81 de IEFA se trunca — incluido el más largo del universo,
   "Drug Manufacturers - Specialty & Generic". El `title` de la fila lleva el
   nombre completo igual, por si un scan futuro trae uno más largo.

   Scrollea porque SPY tiene 111 industrias e IWM 135. */
.etf-ind-list{max-height:340px;overflow-y:auto;padding-right:6px;margin-right:-6px}
.etf-ind{grid-template-columns:1fr 88px 42px;gap:9px;padding:5px 7px;
  border-radius:6px;border:1px solid transparent;cursor:pointer;
  transition:background var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease)}
.etf-ind:hover{background:var(--bg-elevated);border-color:var(--border-2)}
.etf-ind:hover .etf-sec-n{color:var(--fg-1)}

/* Contribución por eje. */
.etf-axrow{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.etf-ax{background:var(--bg-elevated);border:1px solid var(--border-1);color:var(--fg-2);
  font:500 11px var(--font-sans);padding:4px 10px;border-radius:var(--radius-pill);cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.etf-ax:hover{border-color:var(--border-3);color:var(--fg-1)}
.etf-ax.on{background:var(--accent-soft);border-color:var(--accent);color:var(--brand-cream)}
.etf-cb-h{font:600 10px/1 var(--font-sans);letter-spacing:.10em;text-transform:uppercase;
  color:var(--fg-3);margin:13px 0 5px}
.etf-cb{display:grid;grid-template-columns:52px 1fr 52px 34px 46px;align-items:center;gap:8px;
  padding:6px 8px;border-radius:7px;border:1px solid transparent;cursor:pointer;font-size:12px;
  transition:background var(--dur-hover) var(--ease),border-color var(--dur-hover) var(--ease)}
.etf-cb:hover{background:var(--bg-elevated);border-color:var(--border-2)}
.etf-cb-tk{font:600 12px/1 var(--font-sans);color:var(--fg-1)}
.etf-cb-nm{color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.etf-cb-w,.etf-cb-v,.etf-cb-i{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  text-align:right;font-size:11.5px}
.etf-cb-w{color:var(--fg-2)}
.etf-cb-i.up{color:var(--pos)}
.etf-cb-i.down{color:var(--neg)}

/* Tabla de posiciones. Scrollea DENTRO de su caja: en IWM son 1.752 filas y
   el grid del detalle no debe desbordar horizontalmente. */
.etf-tbl-wrap{margin-top:16px;max-height:620px;overflow:auto;
  background:var(--bg-surface);border:1px solid var(--border-2);
  border-radius:var(--radius-md);padding:14px 16px}
.etf-tbl{width:100%;border-collapse:collapse;font-size:12px}
.etf-tbl th{position:sticky;top:0;background:var(--bg-surface);z-index:1;
  font:600 10px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);text-align:right;padding:8px 7px;border-bottom:1px solid var(--border-2)}
.etf-tbl th:nth-child(-n+3){text-align:left}
.etf-tbl td{padding:7px;border-bottom:1px solid var(--border-1);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.etf-tbl tbody tr{cursor:pointer;transition:background var(--dur-hover) var(--ease)}
.etf-tbl tbody tr:hover{background:var(--bg-elevated)}
.etf-tbl .hk-tk{text-align:left;font:600 12px/1 var(--font-sans);color:var(--fg-1)}
.etf-h-nm{text-align:left;color:var(--fg-2);max-width:210px;overflow:hidden;
  text-overflow:ellipsis}
.etf-h-sec{text-align:left;color:var(--fg-3);font-size:11.5px}
.etf-h-w{color:var(--brand-cream)}

.etf-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 2px 4px;
  font-size:11.5px;color:var(--fg-3)}
.etf-refresh{background:transparent;border:1px solid var(--border-2);color:var(--fg-2);
  font:500 12px var(--font-sans);padding:6px 13px;border-radius:var(--radius-pill);cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.etf-refresh:hover{border-color:var(--accent);color:var(--brand-cream)}


/* ══════════════════════════════════════════════════════════════════════════
   CAPA DE ACABADO (19-ago-2026)
   Va al final a propósito: son refinamientos sobre reglas ya declaradas
   arriba, y el orden del archivo ES el mecanismo de override. Tres frentes —
   la tabla del scanner, el material de las superficies del detalle, y el
   respeto por `prefers-reduced-motion`.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tabla: cabecera de dos pisos ────────────────────────────────────────
   La fila de familia agrupa las 49 columnas en las seis que ya declara META
   (Valoración, Calidad, Crecimiento, Moat, Riesgo, Contexto) más Empresa y
   Scores. Cada familia lleva su color, y el mismo color subraya el bloque:
   con eso se puede saltar a "las de valoración" sin leer un solo encabezado. */
.hk-table-wrap{background-color:var(--bg-surface);
  border:1px solid var(--border-2);border-radius:var(--radius-lg);
  max-height:calc(100vh - 300px)}
.hk-grouprow th{position:sticky;top:0;z-index:3}
.hk-gh{position:relative;height:27px;background:var(--bg-elevated);
  font:600 9px var(--font-sans);letter-spacing:.15em;text-transform:uppercase;
  text-align:left;padding:0 12px;white-space:nowrap;color:var(--fg-3);
  border-bottom:1px solid var(--border-1);box-shadow:inset 1px 0 0 var(--border-1)}
.hk-gh::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;opacity:.30}
.gh-emp{color:var(--fg-2)}
.gh-sco{color:var(--brand-cream)}
.gh-val{color:var(--info-cool)}
.gh-cal{color:var(--pos)}
.gh-cre{color:var(--warn)}
.gh-moa{color:var(--info)}
.gh-rie{color:var(--neg)}
.gh-ctx{color:var(--fg-3)}
/* La fila de columnas se pega BAJO la de familia (27px = alto de .hk-gh). */
.hk-table-wrap .hk-th{top:27px;z-index:2;background:var(--bg-surface);
  padding:9px 12px;font-size:9.5px;letter-spacing:.13em}
.hk-ghl{position:sticky;left:78px;display:inline-block}
.hk-sortmark{margin-left:5px;font-size:8px;color:var(--accent-fg);opacity:.85;vertical-align:1px}

/* ── Tabla: la identidad no se pierde al scrollear en horizontal ─────────
   Con 49 columnas, a partir de la sexta ya no se sabe de qué empresa es la
   fila que se está leyendo. La primera columna queda fija; es la corrección
   con más efecto práctico de toda la tabla.
   Alcance acotado a .hk-table-wrap: `.hk-table` también la usa el desglose
   por eje del detalle, donde fijar una columna no tiene sentido. */
.hk-table-wrap .hk-table th:first-child,
.hk-table-wrap .hk-table td:first-child{position:sticky;left:0}
.hk-table-wrap .hk-table thead th:first-child{z-index:5;background:var(--bg-elevated)}
.hk-table-wrap .hk-table tbody td:first-child{z-index:1;background:var(--bg-surface);
  box-shadow:1px 0 0 var(--border-1)}
.hk-table-wrap .hk-tr:hover .hk-td:first-child{background:var(--bg-hover)}
.hk-table-wrap .hk-tr:hover .hk-td{background:rgba(245,229,186,.045)}
.hk-td--ms{background-repeat:no-repeat}
/* Bandera del emisor. En la ficha va inline dentro de una línea con
   ellipsis, así que NO se puede usar flex en el contenedor: el recorte del
   texto dejaría de funcionar. Inline + vertical-align resuelve las dos cosas. */
/* `display:inline-block` explicito: la regla base de .hk-flag la declara BLOCK
   (la necesita en el hero, donde va sola en su fila) y un <img> en bloque
   dentro de una linea con nowrap ABRE RENGLON — la bandera salia encima de la
   industria en vez de delante, y la ficha crecia una linea entera. */
.card-sub .hk-flag{display:inline-block;margin-right:7px;vertical-align:-1px}
.hk-td-cty{white-space:nowrap;color:var(--fg-2)}
.hk-td-cty .hk-flag{display:inline-block;margin-right:6px;vertical-align:-1px}
.hk-td-cty span{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em}
/* Punto de posición abierta en el portafolio, antes del ticker. */
.td-own{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--brand-cream);margin-right:7px;vertical-align:middle;
  box-shadow:0 0 0 2px rgba(145,7,19,.55)}

/* ── Material compartido de las superficies del detalle ──────────────────
   El hero, el radar, el gráfico y las tarjetas laterales eran cuatro cajas
   con el mismo borde de 1px y ningún relieve. Reciben el mismo tratamiento
   que las fichas para que toda la app se lea como un solo material. */
.hk-hero{border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:16px 24px}
/* La banda de confianza (cobertura + frescura) flotaba suelta bajo el hero,
   con una regla de 1px como unico vinculo. Pasa a ser el PIE de la misma
   tarjeta: es un dato sobre ese score, no una nota al margen. El selector es
   adyacente a proposito — en la tab ETFs la misma clase vive dentro de otra
   caja y ahi no debe llevar ni borde ni esquinas. */
.hk-hero + .hk-confbar{margin-top:0;padding:9px 24px;background:var(--bg-sunken);
  border:1px solid var(--border-2);border-top-color:var(--border-1);
  border-radius:0 0 var(--radius-xl) var(--radius-xl)}
.hk-chip{border-radius:var(--radius-lg)}
.hk-chip:hover{border-color:var(--border-3);background-color:var(--bg-elevated)}
.side-card,.radar-card,.chart-card{border-radius:var(--radius-xl)}
.hk-hero-num{letter-spacing:-.03em}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--fg-2);cursor:pointer;
  font:500 12.5px var(--font-sans);margin-bottom:18px;padding:7px 13px 7px 10px;
  border:1px solid var(--border-1);border-radius:var(--radius-pill);
  transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.back:hover{color:var(--brand-cream);border-color:var(--border-3)}
.etf-card{border-radius:var(--radius-lg)}

/* Logo que no existe en el proveedor: marco vacío. Mantiene la columna de la
   grilla —que es lo que se rompía— y se lee como un hueco deliberado. */
.logo-na{background:var(--bg-elevated);border:1px solid var(--border-1);
  box-shadow:inset 0 0 0 1px rgba(245,229,186,.03)}

/* Tira de hechos del hero (precio · industria · capitalización · analistas). */
.hk-facts{flex:1;display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;
  padding:0 10px}
.hk-fact{display:flex;flex-direction:column;gap:6px;min-width:0}
.hk-fact-k{font:600 8.5px/1 var(--font-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
.hk-fact-v{font:500 14px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.hk-live{font:600 8.5px/1 var(--font-sans);letter-spacing:.10em;text-transform:uppercase;
  color:var(--pos);border:1px solid rgba(58,167,113,.4);background:rgba(58,167,113,.10);
  border-radius:var(--radius-pill);padding:4px 9px}
.hk-hero-right{flex:0 0 auto;padding-left:6px}
@media (max-width:1100px){ .hk-facts{display:none} }

/* Separación entre familias de columnas, también en el cuerpo de la tabla: la
   cabecera agrupa, pero leyendo una fila de 49 celdas no había ninguna
   referencia de dónde termina un grupo y empieza el siguiente. */
.hk-table-wrap .hk-th.gstart,
.hk-table-wrap .hk-td.gstart{box-shadow:inset 1px 0 0 var(--border-1)}

/* ── Movimiento ──────────────────────────────────────────────────────────
   Todo el movimiento de la interfaz es funcional (estado de foco, progreso,
   aparición de un popover), así que apagarlo no pierde información. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
/* Ventanas angostas: el raíl se queda solo con los iconos. La etiqueta es una
   comodidad; el icono más el marcador de activa bastan para orientarse. */
@media (max-width:1000px){
  :root{--rail-w:60px}
  .nav-item span{display:none}
  .nav-item{padding:12px 3px}
  .kbd-hint{display:none}
}
/* ═══════════════ CONTEXTO HISTÓRICO DE LA FICHA (08-sep-2026) ═══════════
   Centro de datos (series financieras), Técnico y Reacción a resultados.
   Comparten la materia del resto: superficie plana, filete de 1px, cifras en
   mono con cifras tabulares. Lo único que se agrega al vocabulario visual son
   los mini-gráficos, que van SIN eje ni rejilla — a este tamaño una rejilla no
   se lee y solo ensucia; el valor exacto vive en el tooltip de cada barra. */

/* mediana de la industria en el drill-down */
.hk-td--ind{color:var(--fg-2);font-size:11.5px}
.ind-arrow{color:var(--fg-3);font-size:9px;margin-right:4px;vertical-align:1px}
.bd-indhead{font:500 9.5px/1 var(--font-sans);letter-spacing:.06em;text-transform:none;
  color:var(--fg-3);margin-left:auto}

/* contenedor común de los dos bloques nuevos */
.hk-card{background:var(--bg-surface);border:1px solid var(--border-2);
  border-radius:var(--radius-xl);padding:16px 18px 14px;margin-top:16px}
.card-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
/* Cabecera sin titulo: la pestana ya nombra el bloque (09-sep-2026). Lo que
   queda —la nota, o el conmutador Anual/Trimestral— se va a la derecha. */
.card-head--noteonly{justify-content:flex-end;margin-bottom:8px;min-height:16px}
.card-title{font:600 10px/1 var(--font-sans);letter-spacing:.10em;
  text-transform:uppercase;color:var(--fg-2)}
.card-note{font:400 10.5px/1 var(--font-sans);color:var(--fg-3);margin-left:auto}
.card-head .seg{margin-left:auto}
.blk-load,.blk-na{font:400 12px/1.5 var(--font-sans);color:var(--fg-3);padding:18px 0}

/* Centro de datos ------------------------------------------------------- */
.fin-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:10px}
@media (max-width:1180px){
  .fin-grid{grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}
}
.fin-tile{background:var(--bg-elevated);border:1px solid var(--border-1);
  border-radius:var(--radius-md);padding:11px 12px 9px;min-width:0}
.fin-tl{font:500 10.5px/1 var(--font-sans);color:var(--fg-2);letter-spacing:.02em;
  margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-tv{font:600 18px/1 var(--font-mono);font-variant-numeric:tabular-nums;
  color:var(--brand-cream);letter-spacing:-.02em}
.fin-td{font:500 11px/1 var(--font-mono);margin:4px 0 8px}
.fin-tx{font:400 9.5px/1.35 var(--font-sans);color:var(--fg-3);margin-top:6px}
.fin-tag{color:var(--fg-2)}
.spark{width:100%;height:34px;display:block;overflow:visible}
.spark-na{font:400 10px/34px var(--font-sans);color:var(--fg-3)}
.fin-note{font:400 10.5px/1.5 var(--font-sans);color:var(--fg-3);margin-top:10px;
  max-width:76ch}

/* Técnico ---------------------------------------------------------------- */
/* Ocho celdas, y el reparto es explicito por ancho: con `auto-fit` a 1280 caben
   siete y la octava —la caida media— quedaba sola en una segunda fila con siete
   huecos al lado. Mismo defecto que tenian las fichas de Financieros. */
.tk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--border-1);border:1px solid var(--border-1);
  border-radius:var(--radius-md);overflow:hidden}
@media (min-width:1300px){ .tk-grid{grid-template-columns:repeat(8,minmax(0,1fr))} }
@media (max-width:820px){ .tk-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tk-grid--4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:2px}
.tk-cell{background:var(--bg-elevated);padding:11px 13px 10px}
.tk-lab{font:500 10px/1 var(--font-sans);color:var(--fg-2);letter-spacing:.03em;
  margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-val{font:600 17px/1 var(--font-mono);font-variant-numeric:tabular-nums;
  color:var(--brand-cream);letter-spacing:-.02em}
.tk-sub{font:400 9.5px/1.3 var(--font-sans);color:var(--fg-3);margin-top:5px}
.tk-line{font:400 11.5px/1.6 var(--font-sans);color:var(--fg-2);margin-top:10px;
  max-width:82ch}
.tk-line b{color:var(--brand-cream);font-weight:600}

/* barras divergentes — año calendario y estacionalidad.
   El alto se reparte 50/50 sobre la línea base: una serie con signo se lee por
   el LADO antes que por el color, que es lo que un daltónico (y cualquiera de
   reojo) necesita. */
.dv-row{display:flex;gap:6px;align-items:stretch}
.dv-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;text-align:center;
  cursor:default}
.dv-v{font:600 9.5px/1 var(--font-mono);font-variant-numeric:tabular-nums;
  margin-bottom:5px;white-space:nowrap}
/* La barra NO llena su columna: se topa en 34px y se centra. Con seis años en
   610px cada columna mide 100px, y una barra de 100 de ancho por 30 de alto se
   ve como un bloque, no como una barra. El alto sube a 42 por lo mismo — lo que
   hace legible una serie con signo es la relación alto/ancho. */
.dv-up{height:42px;display:flex;align-items:flex-end}
.dv-dn{height:42px;display:flex;align-items:flex-start;border-top:1px solid var(--border-2)}
.dv-col i{display:block;width:72%;max-width:46px;margin-inline:auto;
  border-radius:2px 2px 0 0}
.dv-dn i{border-radius:0 0 2px 2px}
.dv-col:hover i{filter:brightness(1.25)}
.dv-l{font:400 9.5px/1 var(--font-sans);color:var(--fg-3);margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Los dos gráficos divergentes van UNO AL LADO DEL OTRO. A todo el ancho de la
   ficha (~1300px) cada columna medía 110px para una barra de 30 de alto: la
   proporción era de banner, no de gráfico, y obligaba a scrollear entre uno y
   otro para compararlos. A la mitad del ancho la barra recupera una relación
   sana y los dos entran en la misma pantalla. */
.tk-charts{display:grid;grid-template-columns:auto auto;justify-content:space-between;
  gap:18px 34px;margin-top:14px}
@media (max-width:1080px){ .tk-charts{grid-template-columns:1fr} }
/* La primera columna se dimensiona al DIBUJO (`auto`), no a media pestaña: el
   año calendario tiene tantas barras como años de historia —seis en DLO, once
   en NVDA— y fijarla en 1fr dejaba un hueco distinto en cada ficha. Lo que
   sobra se lo lleva la estacionalidad, que siempre tiene doce. */
.tk-chart{min-width:0}
.tk-chart .hk-eyebrow{margin-top:0}

/* reacción a resultados — eje cero al centro, alzas arriba y caídas abajo,
   que es como se lee de un vistazo si la empresa suele premiar o castigar.
   Acotada en ancho por lo mismo que los divergentes: 16 publicaciones
   repartidas en 1300px son barras de 75px de ancho por 35 de alto. */
/* Las cuatro cifras a la izquierda (2x2) y las barras a la derecha: el bloque
   ocupa el ancho completo sin que ninguna de las dos partes se estire de mas.
   Antes las 16 publicaciones se repartian 1300px —barras de 76 de ancho por 35
   de alto— y las cifras iban en una fila de cuatro encima. */
.er-block{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(360px,1.15fr);
  gap:26px;align-items:start;margin-top:12px}
@media (max-width:1000px){ .er-block{grid-template-columns:1fr} }
.er-block .tk-grid--4{grid-template-columns:repeat(2,1fr);margin-top:0}
.er-side{min-width:0}
.er-row{display:flex;gap:5px;align-items:stretch;height:104px}
.er-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;cursor:default}
.er-up{flex:1;display:flex;align-items:flex-end}
.er-dn{flex:1;display:flex;align-items:flex-start;
  border-top:1px solid var(--border-2)}
.er-col i{display:block;width:74%;max-width:34px;margin-inline:auto;border-radius:2px}
.er-dn i{border-radius:0 0 2px 2px}
.er-col:hover i{filter:brightness(1.25)}

/* ── Mapa de fuerza relativa (08-sep-2026) ───────────────────────────────
   Cuatro columnas fijas, no una rejilla libre: los cuadrantes son un ORDEN
   (lidera → recupera → cede → rezagado) y leerlos de izquierda a derecha es
   parte de lo que comunican. Cada columna scrollea sola para que una
   clasificación desbalanceada —lo normal en un mercado con tendencia— no
   estire la página al alto de la columna más llena. */
.mp-h1{font:400 26px var(--font-serif);color:var(--brand-cream);letter-spacing:-.01em;
  margin:0 0 14px}
.mp-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.mp-meta{font:400 11px/1.4 var(--font-sans);color:var(--fg-3);margin-left:auto}
.mp-meta b{font-family:var(--font-mono);font-weight:600}
/* La vista NO scrollea con la pagina: las cuatro columnas se estiran hasta el
   pie y cada una scrollea sola. Antes el tope era `52vh` fijo, que en 900px de
   alto dejaba un tercio de la pantalla vacio bajo las tarjetas mientras las
   listas escondian filas. `max-height:100%` sobre una fila de grilla estirada
   da las dos cosas: crece hasta donde hay sitio y se encoge al contenido
   cuando sobra (Sectores, con 11 grupos). */
.mp-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:minmax(0,1fr);
  gap:12px;align-items:start;flex:1 1 auto;min-height:0}
@media(max-width:1100px){.mp-grid{grid-template-columns:repeat(2,1fr)}}
.mp-col{background:var(--bg-surface);border:1px solid var(--border-2);
  border-radius:var(--radius-lg);padding:13px 4px 10px 14px;min-width:0;
  display:flex;flex-direction:column;max-height:100%}
.mp-head{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--font-sans);
  color:var(--fg-1);letter-spacing:.01em;padding-right:10px;flex:0 0 auto}
.mp-dot{width:7px;height:7px;border-radius:50%;background:var(--qc);flex:0 0 auto}
.mp-cnt{margin-left:auto;font:600 10px/1 var(--font-mono);color:var(--fg-3)}
.mp-desc{font:400 10px/1.35 var(--font-sans);color:var(--fg-3);margin:6px 10px 10px 15px;
  flex:0 0 auto}
.mp-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:6px}
.mp-row{position:relative;display:flex;align-items:baseline;gap:8px;padding:5px 6px 7px 0;
  border-radius:var(--radius-sm);cursor:pointer}
.mp-row:hover{background:var(--bg-hover)}
.mp-rank{font:600 10px/1 var(--font-mono);color:var(--fg-3);flex:0 0 34px;text-align:right}
.mp-of{color:var(--fg-3);opacity:.55}
.mp-name{flex:1 1 auto;min-width:0;font:500 11.5px/1.3 var(--font-sans);color:var(--fg-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-n{font:500 9px/1 var(--font-mono);color:var(--fg-3);margin-left:6px}
.mp-ret{font:600 11.5px/1 var(--font-mono);font-variant-numeric:tabular-nums;flex:0 0 auto}
/* Magnitud: la cifra sola no compara entre columnas (+115% contra +7% en dos
   tarjetas distintas). La barra va al pie de la fila, escalada al mayor |retorno|
   de la vista, para que la lista se lea como una distribucion sin robar altura. */
.mp-mag{position:absolute;left:38px;right:6px;bottom:2px;height:2px;border-radius:2px;
  background:var(--border-1);overflow:hidden}
.mp-mag i{display:block;height:100%;border-radius:2px;opacity:.55}
.mp-row:hover .mp-mag i{opacity:.9}
/* Sectores: son ONCE grupos, no 137. En cuatro columnas a lo alto de la pantalla
   quedaban cuatro tarjetas flacas arriba y dos tercios de pagina en blanco
   debajo, asi que el modo Sectores usa una rejilla 2x2 que llena el alto: mismo
   orden de lectura (lidera → recupera → cede → rezagado, ahora en Z) y tarjetas
   con superficie real. Las filas se ensanchan y suman en un segundo renglon la
   mayor empresa del grupo — el dato que `mapGroups` ya calculaba y nadie
   mostraba. En Industrias ese renglon no va: los nombres largos ya se truncan a
   4 columnas y con 137 filas la textura extra seria ruido. */
.mp-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.mp-grid--sec{grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch;
  max-width:1280px}
@media(max-width:1100px){.mp-grid--sec{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mp-grid--sec .mp-col{max-height:none}
.mp-grid--sec .mp-head{font-size:13px}
.mp-grid--sec .mp-row{padding:11px 8px 13px 0}
.mp-grid--sec .mp-name{font-size:13.5px}
.mp-grid--sec .mp-ret{font-size:13.5px}
.mp-grid--sec .mp-rank{font-size:10.5px}
.mp-grid--sec .mp-mag{height:3px;bottom:4px}
.mp-top{font:500 9.5px/1 var(--font-mono);color:var(--fg-3);letter-spacing:.03em}
.mp-empty{font:400 10.5px/1 var(--font-sans);color:var(--fg-3);padding:8px 0 4px}
.mp-grid--sec .mp-empty{height:100%;display:flex;align-items:center;justify-content:center;
  padding:0 0 24px}
.mp-note{flex:0 0 auto;margin-top:12px}

/* En el escritorio nativo el mapa usa sus cuatro columnas a alto completo.
   En una ventana angosta, conservar ese contrato junto con `overflow:hidden`
   escondía dos cuadrantes y hasta la nota metodológica. La vista pasa a
   desplazarse como un documento y las listas mantienen una altura finita: se
   ve el conjunto entero antes de decidir qué columna explorar. */
@media(max-width:1100px){
  .view.map-view{overflow-y:auto}
  .view.map-view .mp-grid{grid-template-columns:1fr;grid-template-rows:none;flex:0 0 auto}
  .view.map-view .mp-col{max-height:360px}
  .view.map-view .mp-grid--sec{grid-template-columns:1fr;grid-template-rows:none}
}