/* Radar Bolsa — estilos. Oscuro por defecto, claro si el sistema lo pide. */
:root {
  --bg: #0b0f14;
  --bg2: #111821;
  --card: #151e29;
  --card2: #1b2633;
  --line: #243243;
  --txt: #e8eef5;
  --txt2: #9fb0c3;
  --txt3: #6c7f94;
  --acc: #4cc3ff;
  --acc2: #8b7bff;
  --up: #2fd480;
  --down: #ff5d6c;
  --warn: #ffb547;
  --chip: #1e2b3a;
  --sombra: 0 6px 24px rgba(0, 0, 0, .35);
  --r: 16px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3f6fa; --bg2: #e9eef5; --card: #ffffff; --card2: #f4f7fb; --line: #dbe3ec;
    --txt: #0f1b2a; --txt2: #4a5d73; --txt3: #7b8ca0; --acc: #0a84d6; --acc2: #6a5af9;
    --up: #0f9d58; --down: #e0334a; --warn: #c77700; --chip: #eaf0f7;
    --sombra: 0 6px 20px rgba(15, 27, 42, .08);
    color-scheme: light;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--txt);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  min-height: 100vh;
}
button { font: inherit; color: inherit; }
a { color: var(--acc); text-decoration: none; }

/* ── cabecera ── */
.top {
  position: sticky; top: 0; z-index: 20;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.logo { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.marca { flex: 1; min-width: 0; }
.marca b { display: block; font-size: 17px; letter-spacing: .2px; }
.marca small { color: var(--txt3); font-size: 12px; }
.icobtn {
  width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); display: grid; place-items: center; cursor: pointer; font-size: 17px;
}

main { max-width: 860px; margin: 0 auto; padding: 14px 16px 24px; }
.vista { display: none; animation: entra .25s ease; }
.vista.on { display: block; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h2 { font-size: 21px; margin: 6px 0 4px; letter-spacing: -.2px; }
h3 { font-size: 15px; margin: 22px 0 10px; color: var(--txt2); text-transform: uppercase; letter-spacing: .8px; font-weight: 650; }
.sub { color: var(--txt2); margin: 0 0 12px; font-size: 14px; }

/* ── tarjetas ── */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; box-shadow: var(--sombra);
}
.card + .card { margin-top: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 520px) { .grid3 { grid-template-columns: 1fr 1fr; } }

.hero {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--acc2) 26%, transparent), transparent 60%),
    radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 60%),
    var(--card);
  border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: var(--sombra);
}
.hero .cifra { font-size: 34px; font-weight: 750; letter-spacing: -1px; line-height: 1.1; }
.hero .lbl { color: var(--txt2); font-size: 13px; }
.kpis { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.kpi b { display: block; font-size: 17px; }
.kpi span { color: var(--txt3); font-size: 12px; }

.up { color: var(--up); }
.down { color: var(--down); }
.warn { color: var(--warn); }
.muted { color: var(--txt3); }

/* ── aviso honesto ── */
.aviso {
  border-radius: 14px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45;
  background: color-mix(in srgb, var(--warn) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  margin: 4px 0 14px;
}
.aviso b { color: var(--warn); }

/* ── chips y filtros ── */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 7px 12px; border-radius: 999px; background: var(--chip);
  border: 1px solid var(--line); font-size: 13px; cursor: pointer; white-space: nowrap; color: var(--txt2);
}
.chip.on { background: var(--acc); border-color: var(--acc); color: #04121c; font-weight: 650; }
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px;
  background: var(--chip); color: var(--txt2); border: 1px solid var(--line); margin: 2px 4px 2px 0;
}
.tag.ok { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, var(--line)); }
.tag.mal { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, var(--line)); }
.tag.ojo { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }

/* ── filas de empresa ── */
.fila {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: transform .12s, border-color .12s;
}
.fila + .fila { margin-top: 8px; }
.fila:active { transform: scale(.985); }
.fila:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }
.fila .info { flex: 1; min-width: 0; }
.fila .nom { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .det { color: var(--txt3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .der { text-align: right; flex: none; }
.fila .der b { display: block; font-size: 15px; }
.fila .der span { font-size: 12px; }
.tk {
  font: 700 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .3px;
  padding: 3px 6px; border-radius: 6px; background: var(--chip); color: var(--acc); margin-right: 6px;
}

/* anillo de puntuación */
.anillo { width: 46px; height: 46px; flex: none; position: relative; }
.anillo svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.anillo b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; }

/* ── temas ── */
.tema {
  border-radius: 16px; padding: 14px; background: var(--card); border: 1px solid var(--line); cursor: pointer;
}
.tema .ico { font-size: 22px; }
.tema .tn { font-weight: 650; margin: 4px 0 6px; font-size: 14px; line-height: 1.25; min-height: 36px; }
.tema .tl { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--txt2); }
.barra { height: 6px; border-radius: 6px; background: var(--chip); overflow: hidden; margin-top: 8px; }
.barra i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--acc), var(--acc2)); }

/* ── IPO ── */
.ipo { padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.ipo + .ipo { margin-top: 10px; }
.ipo .cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ipo .fecha { text-align: center; flex: none; background: var(--chip); border-radius: 12px; padding: 6px 10px; }
.ipo .fecha b { display: block; font-size: 18px; line-height: 1; }
.ipo .fecha span { font-size: 11px; color: var(--txt3); text-transform: uppercase; }
.ipo .stat { margin-top: 10px; font-size: 13px; color: var(--txt2); }
.fase { margin-top: 10px; height: 8px; border-radius: 8px; background: var(--chip); position: relative; }
.fase i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 8px; background: linear-gradient(90deg, var(--down), var(--warn)); }
.fase u { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--txt); text-decoration: none; }
.fase-l { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--txt3); margin-top: 6px; }

/* ── noticias ── */
.noti { display: block; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--txt); }
.noti:last-child { border-bottom: 0; }
.noti small { display: block; color: var(--txt3); font-size: 12px; margin-top: 2px; }

/* ── buscador ── */
.buscar {
  width: 100%; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); color: var(--txt); font-size: 16px; outline: none;
}
.buscar:focus { border-color: var(--acc); }

/* ── ficha (hoja inferior) ── */
.velo { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s; }
.velo.on { opacity: 1; pointer-events: auto; }
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 92vh; overflow-y: auto;
  background: var(--bg2); border-radius: 22px 22px 0 0; border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); max-width: 860px; margin: 0 auto;
}
.hoja.on { transform: none; }
.asa { width: 42px; height: 5px; border-radius: 5px; background: var(--line); margin: 4px auto 10px; }
.hoja .titulo { display: flex; gap: 10px; align-items: flex-start; }
.hoja .titulo h2 { flex: 1; margin: 0; font-size: 20px; }
.precio { font-size: 30px; font-weight: 750; letter-spacing: -.8px; margin-top: 6px; }
.grafica { width: 100%; height: 180px; display: block; margin: 8px 0 2px; }
.leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--txt3); }
.leyenda i { display: inline-block; width: 10px; height: 3px; border-radius: 3px; vertical-align: middle; margin-right: 5px; }
.met { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.met div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.met b { display: block; font-size: 16px; }
.met .et { display: block; font-size: 12px; color: var(--txt2); }
.met em { display: block; font-style: normal; font-size: 11.5px; color: var(--txt3); margin-top: 3px; line-height: 1.35; }
.comp { margin-top: 6px; }
.comp .l { display: flex; justify-content: space-between; font-size: 13px; margin-top: 8px; }
.enlaces { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.btn {
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card);
  cursor: pointer; font-size: 14px; color: var(--txt);
}
.btn.pri { background: var(--acc); border-color: var(--acc); color: #04121c; font-weight: 650; }
.estrella { font-size: 22px; background: none; border: 0; cursor: pointer; padding: 4px; }

/* ── navegación inferior ── */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.nav button {
  background: none; border: 0; cursor: pointer; padding: 6px 2px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--txt3); font-size: 11px;
}
.nav button .i { font-size: 20px; line-height: 1; filter: grayscale(1) opacity(.75); }
.nav button.on { color: var(--acc); }
.nav button.on .i { filter: none; }

/* ── precios en vivo ── */
#vivo { color: var(--up); font-size: 12px; white-space: nowrap; }
.punto {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--up);
  vertical-align: middle; margin-right: 2px; animation: late 1.6s ease-in-out infinite;
}
@keyframes late { 50% { opacity: .25; } }
.flash-up { animation: flashUp 1.2s ease; }
.flash-down { animation: flashDown 1.2s ease; }
@keyframes flashUp { 0% { background: color-mix(in srgb, var(--up) 35%, transparent); } 100% { background: transparent; } }
@keyframes flashDown { 0% { background: color-mix(in srgb, var(--down) 35%, transparent); } 100% { background: transparent; } }

/* ── Mi dinero (2026-10-05) ── */
.paso {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
}
.paso + .paso { margin-top: 8px; }
.paso input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--up); }
.paso .pd { color: var(--txt2); font-size: 13.5px; margin-top: 3px; line-height: 1.45; }
.paso.ok { border-color: color-mix(in srgb, var(--up) 45%, var(--line)); }
.paso.ok b { color: var(--up); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campos label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--txt2); }
.campos label span { display: flex; align-items: center; gap: 6px; color: var(--txt3); font-size: 14px; }
.campos input {
  width: 100%; min-width: 0; padding: 10px 11px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--card2); color: var(--txt); font-size: 16px; outline: none; font-variant-numeric: tabular-nums;
}
.campos input:focus { border-color: var(--acc); }
.res { margin-top: 12px; }
.res-g span, .res-p span { display: block; font-size: 12.5px; color: var(--txt2); }
.res-g b { display: block; font-size: 30px; font-weight: 750; letter-spacing: -.8px; line-height: 1.15; }
.res-g em, .res-p em { display: block; font-style: normal; font-size: 12px; color: var(--txt3); }
.res-p { background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.res-p b { display: block; font-size: 17px; margin: 2px 0; }
.ejex { position: relative; height: 16px; font-size: 11px; color: var(--txt3); }
.ejex span { position: absolute; transform: translateX(-50%); }
.tabla-c { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tabla-c div { background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; }
.tabla-c b { display: block; font-size: 13px; }
.tabla-c span { display: block; font-size: 20px; font-weight: 750; }
.tabla-c em { display: block; font-style: normal; font-size: 11.5px; color: var(--txt3); line-height: 1.3; }
.grupo-f { font-size: 12.5px; color: var(--txt3); text-transform: uppercase; letter-spacing: .7px; margin: 14px 0 6px; font-weight: 650; }
.chips.envolver { flex-wrap: wrap; overflow: visible; }
.fila.fondo { cursor: default; align-items: flex-start; }
.fila.fondo .det { white-space: normal; line-height: 1.4; margin-top: 2px; }
.fila.fondo:hover { border-color: var(--line); }
.fila.fondo .det b { color: inherit; font-weight: 650; }
.fila.fondo .det b.up { color: var(--up); } .fila.fondo .det b.down { color: var(--down); } .fila.fondo .det b.warn { color: var(--warn); }
.lote { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.lote .info { flex: 1; min-width: 0; }
.lote .nom { font-weight: 650; }
.lote .det { font-size: 12.5px; color: var(--txt3); }
.lote .der { text-align: right; }
.lote .der b { display: block; }
.lote .der span { font-size: 12px; }
.borrar { width: 32px; height: 32px; font-size: 13px; color: var(--txt3); flex: none; }
.borrar.confirmar { width: auto; padding: 0 8px; color: var(--down); border-color: var(--down); font-size: 12px; }
.aviso-ok { background: color-mix(in srgb, var(--up) 12%, var(--card)); border-color: color-mix(in srgb, var(--up) 40%, var(--line)); }
.aviso-ok b { color: var(--up); }
.aviso b.up { color: var(--up); }
.aviso b.down { color: var(--down); }   /* cifras con signo dentro de un aviso */
.bt { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.bt b { text-align: right; }
.empieza { background: color-mix(in srgb, var(--acc) 10%, var(--card)); border-color: color-mix(in srgb, var(--acc) 35%, var(--line)); font-size: 14px; }

/* ── ¿por qué sí y por qué no? (2026-10-06) ── */
.pq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .pq { grid-template-columns: 1fr; } }
.pq-col, .pq-graves {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
  border-top: 3px solid var(--line);
}
.pq-col.si { border-top-color: var(--up); }
.pq-col.no { border-top-color: var(--warn); }
.pq-graves {
  margin-bottom: 10px; border-top-color: var(--down);
  background: color-mix(in srgb, var(--down) 9%, var(--card));
  border-color: color-mix(in srgb, var(--down) 35%, var(--line));
}
.pq-t { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.pq-t span {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px;
  background: var(--chip); color: var(--txt2); font-size: 12px; text-align: center; font-weight: 650;
}
.pq-graves .pq-t { color: var(--down); }
.pq-i { padding: 9px 0 0; }
.pq-i + .pq-i { border-top: 1px solid var(--line); margin-top: 9px; }
.pq-i b { display: block; font-size: 14px; }
.pq-col.si .pq-i b { color: var(--up); }
.pq-col.no .pq-i b { color: var(--warn); }
.pq-graves .pq-i b { color: var(--down); }
.pq-i span { display: block; color: var(--txt2); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.pq-i a { display: inline-block; font-size: 12.5px; margin-top: 4px; }
.pq-vacio { color: var(--txt3); font-size: 13px; padding-top: 8px; }
.pq-an { font-size: 13px; color: var(--txt2); margin: 10px 0 0; line-height: 1.45; }
.pq-an b { color: var(--txt); }

/* ── el futuro y quién la dirige (2026-10-06) ── */
.fut + .fut, .fut + .met, .comp + .met, .fut + .comp { margin-top: 10px; }
.fut-t { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.fut-t small { font-weight: 400; color: var(--txt3); font-size: 12px; }
.fut blockquote {
  margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--acc); background: var(--card2);
  border-radius: 0 10px 10px 0; font-size: 13.5px; line-height: 1.45; color: var(--txt);
}
.fut-l { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; margin-top: 8px; }
.fut .tag { margin-bottom: 2px; }
.tabla-p { display: grid; grid-template-columns: 1fr auto auto; gap: 7px 16px; align-items: baseline; font-size: 14px; }
.tabla-p em { font-style: normal; font-size: 12px; color: var(--txt3); text-align: right; }
.tabla-p b { text-align: right; }
.tabla-p + .bt { margin-top: 8px; }

/* ── hallazgos (2026-10-10) ── */
.hz { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.hz + .hz { margin-top: 8px; }
.hz.imp { border-color: color-mix(in srgb, var(--up) 45%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--up) 18%, transparent); }
.hz-c { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.hz-h { margin-left: auto; font-size: 12px; }
.hz-e { margin-top: 6px; font-size: 15px; }
.hz-e .tk { margin-left: 4px; }
.hz-r { margin-top: 6px; font-size: 15px; font-weight: 650; color: var(--txt); }
.hz-t { margin-top: 6px; font-size: 13px; color: var(--txt2); line-height: 1.4; }
.hz-l { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; margin-top: 8px; align-items: baseline; }
.hz-l a { cursor: pointer; }
/* v2 (2026-10-12): número del ranking, las tres notas, la curva de 1 año y la fuente */
.hz.neg { border-color: color-mix(in srgb, var(--down) 40%, var(--line)); }
.hz-n {
  flex: none; min-width: 26px; height: 26px; padding: 0 6px; margin-right: 6px; border-radius: 8px;
  display: inline-grid; place-items: center; font-weight: 750; font-size: 13.5px; background: var(--chip); color: var(--txt);
}
.hz.imp .hz-n { background: color-mix(in srgb, var(--up) 22%, var(--chip)); color: var(--up); }
.fila > .hz-n { margin-right: 0; }
.hz-c .tag { margin-top: 0; margin-bottom: 0; }
.ver { color: var(--up); font-weight: 750; margin-left: 2px; }
.hz-mc { font-size: 13px; white-space: nowrap; }
.hz-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.nota { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px 8px; min-width: 0; }
.nota > span { display: block; font-size: 10.5px; color: var(--txt3); text-transform: uppercase; letter-spacing: .5px; }
.nota b { display: block; font-size: 18px; line-height: 1.2; margin-top: 1px; }
.nota .nb { display: block; height: 4px; border-radius: 4px; background: var(--chip); overflow: hidden; margin: 5px 0 5px; }
.nota .nb u { display: block; height: 100%; border-radius: 4px; text-decoration: none; }
.nota em { display: block; font-style: normal; font-size: 11.5px; color: var(--txt2); line-height: 1.3; overflow-wrap: anywhere; }
.hz-sp { position: relative; height: 34px; margin-top: 8px; }
.hz-sp svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hz-sp .dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--warn);
  border: 2px solid var(--card); transform: translate(-50%, -50%);
}
.hz-sp > span { position: absolute; left: 0; top: -3px; font-size: 10.5px; color: var(--txt3); }
.hz-fs { margin-top: 8px; font-size: 12.5px; }
.hz-fs summary { cursor: pointer; color: var(--txt2); }
.hz-fs a { display: inline-block; margin: 6px 14px 0 0; }
.chips .sep { flex: none; width: 1px; background: var(--line); margin: 4px 2px; }
.hz-como { margin: 2px 0 12px; font-size: 13.5px; color: var(--txt2); }
.hz-como summary { cursor: pointer; color: var(--acc); font-size: 13px; }
.hz-como p { margin: 8px 0 0; line-height: 1.45; }
.hz-como b { color: var(--txt); }

/* ── varios ── */
.vacio { text-align: center; color: var(--txt3); padding: 30px 10px; }
.cargando { display: grid; place-items: center; min-height: 50vh; color: var(--txt3); gap: 10px; }
.radar { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--line); position: relative; overflow: hidden; }
.radar::after {
  content: ""; position: absolute; inset: 0;
  background: conic-gradient(from 0deg, transparent 0 300deg, color-mix(in srgb, var(--acc) 70%, transparent));
  animation: gira 1.4s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.instalar {
  display: none; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px;
  background: color-mix(in srgb, var(--acc) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--line));
}
.instalar.on { display: flex; gap: 10px; align-items: center; }
.instalar span { flex: 1; }
.glos dt { font-weight: 650; margin-top: 12px; }
.glos dd { margin: 3px 0 0; color: var(--txt2); font-size: 14px; }
.pie { color: var(--txt3); font-size: 12px; text-align: center; margin-top: 26px; line-height: 1.5; }