/* money-lab · interfaz
   Estructura de Project Cybersecurity (suite T-Systems): paneles de 12 px, KPI con filo de
   semáforo, tabla ejecutiva, control segmentado, barra superior translúcida y barra lateral con
   grupos. Paleta por decisión del usuario (16-oct-2026): SOLO blanco, negro, verde y rojo.
   El logo es el orbe de INGO, con su aurora en verde y blanco. Sin logo de AZIRU. */

:root {
  color-scheme: light;
  --radio-control: 6px;
  --radio-tarjeta: 10px;
  --radio-panel: 12px;

  --background: #F5F5F5;
  --foreground: #0A0A0A;
  --card: #FFFFFF;
  --muted: #F0F0F0;
  --muted-foreground: #525252;
  --accent: #EBEBEB;
  --border: #E0E0E0;
  --input: #C9C9C9;
  --ring: #0A0A0A;
  --borde-fuerte: #BDBDBD;
  --encabezado-tabla: #F7F7F7;
  --fila-alterna: #FAFAFA;
  --fila-hover: #F0F0F0;
  --grafica-rejilla: #E8E8E8;
  --grafica-eje: #B5B5B5;
  --sombra-tarjeta: 0 1px 2px rgb(0 0 0 / .05);
  --sombra-panel: 0 1px 2px rgb(0 0 0 / .05), 0 1px 3px rgb(0 0 0 / .03);
  --sombra-flotante: 0 10px 24px -8px rgb(0 0 0 / .18), 0 4px 8px -4px rgb(0 0 0 / .06);

  /* «Marca» = negro (blanco en oscuro): botones principales, pestaña activa. */
  --marca: #0A0A0A;
  --marca-contraste: #FFFFFF;
  --marca-hover: #2A2A2A;
  --marca-suave: #EDEDED;
  --marca-texto: #0A0A0A;

  /* Verde = bien / sube / acento. Rojo = mal / baja / peligro. */
  --ok: #0B7D2B;        --ok-suave: #DCF8E3;   --verde: #14A83C;
  --sobregiro: #D10F0F; --sobregiro-suave: #FFE1E1; --rojo: #E01B1B;
  --riesgo: #525252;    --riesgo-suave: #EFEFEF;
  --sindato: #6B6B6B;   --sindato-suave: #EFEFEF;
  --info: #0A0A0A;      --info-suave: #EFEFEF;

  --semaforo-gris: #737373;     --semaforo-gris-suave: #F0F0F0;     --semaforo-gris-texto: #404040;
  --semaforo-verde: #14A83C;    --semaforo-verde-suave: #DCF8E3;    --semaforo-verde-texto: #0B7D2B;
  --semaforo-amarillo: #737373; --semaforo-amarillo-suave: #F0F0F0; --semaforo-amarillo-texto: #262626;
  --semaforo-rojo: #E01B1B;     --semaforo-rojo-suave: #FFE1E1;     --semaforo-rojo-texto: #C20E0E;

  /* Series de gráficas: negro, verde, rojo y gris (+ trazo discontinuo como segunda pista). */
  --serie-1: #0A0A0A; --serie-2: #14A83C; --serie-3: #E01B1B; --serie-4: #8A8A8A;

  --lateral-ancho: 272px;
  --lateral-fondo: #FFFFFF;
  --lateral-texto: #0A0A0A;
  --lateral-atenuado: #5C5C5C;
  --lateral-hover: rgb(0 0 0 / .05);
  --lateral-activo: rgb(20 168 60 / .09);
  --lateral-marca-activa: #14A83C;
  --lateral-icono-activo: #0B7D2B;
  --lateral-borde: rgb(0 0 0 / .08);
  --lateral-velo: rgb(10 10 10 / .38);

  /* Orbe de INGO: cielo perla con aurora verde y blanca. */
  --ingo-cielo-alto: #FFFFFF;
  --ingo-cielo-bajo: #DCF8E3;
  --ingo-estrella: rgb(11 125 43 / .40);
  --ingo-velo-a: rgb(20 168 60 / .92);
  --ingo-velo-b: rgb(95 230 130 / .75);
  --ingo-luz: rgb(255 255 255 / .95);
  --ingo-borde-orbe: rgb(20 168 60 / .25);
  --ingo-halo: rgb(20 168 60 / .30);

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

:root.dark {
  color-scheme: dark;
  --background: #0A0A0A;
  --foreground: #F5F5F5;
  --card: #161616;
  --muted: #1A1A1A;
  --muted-foreground: #A8A8A8;
  --accent: #232323;
  --border: #2A2A2A;
  --input: #3A3A3A;
  --ring: #F5F5F5;
  --borde-fuerte: #3A3A3A;
  --encabezado-tabla: #171717;
  --fila-alterna: #111111;
  --fila-hover: #1E1E1E;
  --grafica-rejilla: #242424;
  --grafica-eje: #4D4D4D;
  --sombra-tarjeta: 0 1px 2px rgb(0 0 0 / .5);
  --sombra-panel: 0 1px 2px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .02);
  --sombra-flotante: 0 12px 28px -8px rgb(0 0 0 / .75), 0 4px 10px -4px rgb(0 0 0 / .5);

  --marca: #F5F5F5;
  --marca-contraste: #0A0A0A;
  --marca-hover: #D4D4D4;
  --marca-suave: #262626;
  --marca-texto: #F5F5F5;

  --ok: #3BE36B;        --ok-suave: rgba(59, 227, 107, .14);  --verde: #3BE36B;
  --sobregiro: #FF5252; --sobregiro-suave: rgba(255, 82, 82, .14); --rojo: #FF4D4D;
  --riesgo: #D4D4D4;    --riesgo-suave: #1F1F1F;
  --sindato: #A3A3A3;   --sindato-suave: rgba(163, 163, 163, .14);
  --info: #F5F5F5;      --info-suave: #1F1F1F;

  --semaforo-gris: #A1A1A1;     --semaforo-gris-suave: #1F1F1F;     --semaforo-gris-texto: #D4D4D4;
  --semaforo-verde: #3BE36B;    --semaforo-verde-suave: #0D2A16;    --semaforo-verde-texto: #5CF08A;
  --semaforo-amarillo: #A1A1A1; --semaforo-amarillo-suave: #1F1F1F; --semaforo-amarillo-texto: #E5E5E5;
  --semaforo-rojo: #FF4D4D;     --semaforo-rojo-suave: #2E0F0F;     --semaforo-rojo-texto: #FF7A7A;

  --serie-1: #F5F5F5; --serie-2: #3BE36B; --serie-3: #FF5252; --serie-4: #8F8F8F;

  --lateral-fondo: #000000;
  --lateral-texto: #F5F5F5;
  --lateral-atenuado: #A3A3A3;
  --lateral-hover: rgb(255 255 255 / .06);
  --lateral-activo: rgb(59 227 107 / .12);
  --lateral-marca-activa: #3BE36B;
  --lateral-icono-activo: #5CF08A;
  --lateral-borde: rgb(255 255 255 / .08);

  --ingo-cielo-alto: #0F2416;
  --ingo-cielo-bajo: #030805;
  --ingo-estrella: rgb(255 255 255 / .85);
  --ingo-velo-a: rgb(59 227 107 / .95);
  --ingo-velo-b: rgb(150 255 180 / .7);
  --ingo-luz: rgb(255 255 255 / .9);
  --ingo-borde-orbe: rgb(255 255 255 / .12);
  --ingo-halo: rgb(59 227 107 / .40);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--borde-fuerte) transparent; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  font-family: var(--fuente); font-size: 14px; line-height: 1.5;
  background: var(--background); color: var(--foreground);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; letter-spacing: -0.011em; }
p { margin: 0; }
a { color: var(--marca-texto); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
::selection { background: var(--marca-suave); color: var(--marca-tinta); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 60; padding: .5rem 1rem; border-radius: 10px; background: var(--card); box-shadow: var(--sombra-flotante); }
.saltar:focus { left: 12px; }
svg.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Barra lateral ─────────────────────────────────────────────────────── */
.barra-lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  display: flex; flex-direction: column; gap: .25rem;
  width: var(--lateral-ancho); padding: .75rem .625rem;
  background: var(--lateral-fondo); color: var(--lateral-texto);
  border-right: 1px solid var(--lateral-borde);
}
.lateral-cabeza { display: flex; align-items: center; min-height: 48px; }
.lateral-marca { display: flex; flex: 1; min-width: 0; align-items: center; gap: .625rem; padding: 2px; border-radius: 10px; color: inherit; text-decoration: none; }
.lateral-marca b { display: block; font-size: 15px; line-height: 1.2; }
.lateral-marca small { display: block; font-size: 12px; color: var(--lateral-atenuado); }
.lateral-cuerpo {
  display: flex; flex: 1; min-height: 0; flex-direction: column; gap: .5rem;
  margin: .25rem -.625rem 0; padding: .25rem .625rem;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.lateral-grupo { display: grid; gap: 2px; }
.lateral-rotulo-boton {
  display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 40px;
  padding: 0 .75rem 0 .625rem; border: 0; border-radius: var(--radio-control);
  background: transparent; color: var(--lateral-atenuado);
  font-size: .8125rem; font-weight: 700; letter-spacing: .02em; text-align: left; cursor: pointer;
}
.lateral-rotulo-boton:hover { background: var(--lateral-hover); color: var(--lateral-texto); }
.lateral-rotulo-boton span { flex: 1; }
.lateral-chevron { width: 16px; height: 16px; transition: transform .22s cubic-bezier(.32,.72,0,1); }
.lateral-rotulo-boton[aria-expanded="false"] .lateral-chevron { transform: rotate(-90deg); }
.lateral-plegable { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s cubic-bezier(.32,.72,0,1); }
.lateral-plegable[data-abierto="no"] { grid-template-rows: 0fr; }
.lateral-plegable > div { display: grid; gap: 2px; min-height: 0; overflow: hidden; margin: 0 -.625rem; padding: 0 .625rem; }
.lateral-plegable[data-abierto="no"] > div { visibility: hidden; }
.lateral-item {
  position: relative; display: flex; align-items: center; gap: .625rem; min-height: 40px;
  padding: .375rem .75rem; border-radius: var(--radio-control);
  color: var(--lateral-texto); text-decoration: none; font-size: .9375rem; font-weight: 500;
}
.lateral-item:hover { background: var(--lateral-hover); }
.lateral-item svg { color: var(--lateral-atenuado); }
.lateral-item[aria-current="page"] { background: var(--lateral-activo); font-weight: 700; }
.lateral-item[aria-current="page"] svg { color: var(--lateral-icono-activo); }
.lateral-item[aria-current="page"]::before {
  content: ''; position: absolute; left: -.625rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--lateral-marca-activa);
}
.lateral-item .insignia { margin-left: auto; }
.lateral-pie { padding: .5rem .75rem 0; border-top: 1px solid var(--lateral-borde); font-size: 12px; color: var(--lateral-atenuado); }
.lateral-velo { display: none; }

.contenido-con-lateral { min-height: 100vh; padding-left: var(--lateral-ancho); display: flex; flex-direction: column; }
.contenedor { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }

@media (max-width: 899px) {
  .contenido-con-lateral { padding-left: 0; }
  .contenedor { padding: 0 16px; }
  .barra-lateral { width: min(300px, calc(100vw - 48px)); transform: translateX(-100%); visibility: hidden;
    transition: transform .22s cubic-bezier(.32,.72,0,1), visibility 0s .22s; }
  .barra-lateral[data-abierto-movil="si"] { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 18px 48px rgb(0 0 0 / .22); }
  .barra-lateral .lateral-item { min-height: 46px; font-size: 1rem; }
  .lateral-velo { display: block; position: fixed; inset: 0; z-index: 39; background: var(--lateral-velo); opacity: 0; visibility: hidden; transition: opacity .2s; }
  .lateral-velo[data-abierto="si"] { opacity: 1; visibility: visible; }
}
@media (min-width: 900px) { .solo-movil { display: none !important; } }

/* ── Barra superior translúcida ────────────────────────────────────────── */
.cabecera { position: sticky; top: 0; z-index: 30; padding: 12px 0 6px; }
.barra-superior {
  display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .5rem .75rem;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: var(--radio-panel);
  box-shadow: var(--sombra-panel);
}
@media (prefers-reduced-transparency: reduce) { .barra-superior { background: var(--card); backdrop-filter: none; } }
.migas { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.migas small { font-size: 12px; color: var(--muted-foreground); line-height: 1.2; }
.migas b { font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buscador { position: relative; width: min(300px, 40vw); }
.buscador svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted-foreground); pointer-events: none; }
.buscador input { width: 100%; height: 40px; padding: 0 2.5rem 0 2.25rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--input) 70%, transparent);
  background: color-mix(in srgb, var(--card) 55%, transparent); font-size: 13px; }
.buscador kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--muted);
  font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); }
.resultados-busqueda { position: absolute; top: calc(100% + 6px); right: 0; width: min(380px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto;
  padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-panel); box-shadow: var(--sombra-flotante); z-index: 50; }
.resultados-busqueda a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; color: var(--foreground); text-decoration: none; }
.resultados-busqueda a:hover, .resultados-busqueda a[aria-selected="true"] { background: var(--fila-hover); }
.resultados-busqueda small { color: var(--muted-foreground); font-size: 12px; }
@media (max-width: 599px) { .buscador { width: auto; flex: 1; } .migas { display: none; } }

/* ── Botones ───────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; padding: 0 1.125rem;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer; white-space: nowrap; text-decoration: none;
  background: var(--marca); color: var(--marca-contraste); font-weight: 700; font-size: 14px;
  box-shadow: none; transition: background-color .15s, opacity .15s;
}
.boton:hover { background: var(--marca-hover); }
.boton:disabled { opacity: .55; cursor: progress; }
.boton.sec { background: var(--card); color: var(--foreground); border-color: var(--input); box-shadow: none; }
.boton.sec:hover { background: var(--fila-hover); border-color: var(--borde-fuerte); }
.boton.fantasma { background: transparent; color: var(--foreground); box-shadow: none; }
.boton.fantasma:hover { background: var(--accent); }
.boton.peligro { background: var(--sobregiro-suave); color: var(--semaforo-rojo-texto); border-color: color-mix(in srgb, var(--semaforo-rojo) 35%, transparent); box-shadow: none; }
.boton.chico { min-height: 32px; padding: 0 .75rem; font-size: 13px; }
.boton-icono { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 50%, transparent); color: var(--foreground); cursor: pointer; }
.boton-icono:hover { background: var(--accent); }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ── Página y paneles ──────────────────────────────────────────────────── */
main { flex: 1; padding-bottom: 64px; outline: none; }
.encabezado-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin: 14px 0 16px; }
.titulo-pagina { font-size: 1.5rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.016em; }
.subtitulo-pagina { margin-top: .25rem; max-width: 72ch; font-size: .875rem; color: var(--muted-foreground); }
.titulo-seccion { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; }
.titulo-seccion svg { width: 16px; height: 16px; color: var(--muted-foreground); }
.subtitulo-seccion { margin-top: .125rem; font-size: .8125rem; color: var(--muted-foreground); }
.rotulo { font-size: .75rem; font-weight: 600; color: var(--muted-foreground); }
.panel { min-width: 0; padding: 1.125rem 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-panel); box-shadow: var(--sombra-panel); }
@media (max-width: 599px) { .panel { padding: 1rem; } }
.panel-sutil { background: var(--muted); box-shadow: none; }
.panel-encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .875rem; }
.pila { display: grid; gap: 16px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.rejilla { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .rejilla.lado { grid-template-columns: minmax(0, 1fr) 340px; }
  .rejilla.form { grid-template-columns: 360px minmax(0, 1fr); }
  .rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) { .rejilla.tarjetas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }

/* ── KPI ───────────────────────────────────────────────────────────────── */
.rejilla-kpi { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
@media (max-width: 599px) { .rejilla-kpi { gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { position: relative; display: grid; align-content: start; gap: .25rem; min-width: 0; padding: .75rem .875rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); }
.kpi-etiqueta { font-size: .75rem; font-weight: 600; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-valor { font-size: clamp(1.125rem, .95rem + 1.1vw, 1.5rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.016em;
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-valor small { margin-left: .25rem; font-size: .75rem; font-weight: 600; color: var(--muted-foreground); letter-spacing: 0; }
.kpi-sub { font-size: .75rem; color: var(--muted-foreground); }
.kpi-sub[data-semaforo] { color: var(--sem-texto); font-weight: 600; }
.sin-dato { color: var(--sindato); font-weight: 600; }
.kpi-valor .sin-dato { font-size: .875rem; letter-spacing: 0; }   /* «Sin información» cabe entero en una tarjeta angosta */

/* ── Semáforo ──────────────────────────────────────────────────────────── */
[data-semaforo], .chip { --sem-base: var(--semaforo-gris); --sem-suave: var(--semaforo-gris-suave); --sem-texto: var(--semaforo-gris-texto); }
[data-semaforo="verde"] { --sem-base: var(--semaforo-verde); --sem-suave: var(--semaforo-verde-suave); --sem-texto: var(--semaforo-verde-texto); }
[data-semaforo="amarillo"] { --sem-base: var(--semaforo-amarillo); --sem-suave: var(--semaforo-amarillo-suave); --sem-texto: var(--semaforo-amarillo-texto); }
[data-semaforo="rojo"] { --sem-base: var(--semaforo-rojo); --sem-suave: var(--semaforo-rojo-suave); --sem-texto: var(--semaforo-rojo-texto); }
[data-semaforo="marca"] { --sem-base: var(--marca); --sem-suave: var(--marca-suave); --sem-texto: var(--marca-texto); }
.chip { display: inline-flex; align-items: center; gap: .375rem; flex: none; min-height: 1.5rem; padding: 0 .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap; color: var(--sem-texto); background: var(--sem-suave);
  border: 1px solid color-mix(in srgb, var(--sem-base) 30%, transparent); }
.chip::before { content: ''; width: .4375rem; height: .4375rem; flex: none; border-radius: 999px; background: var(--sem-base); }
.chip.sin-punto::before { display: none; }
.chip.grande { min-height: 2rem; padding: 0 .75rem; font-size: .875rem; }
.insignia { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--muted); color: var(--muted-foreground); border: 1px solid var(--border); }

/* ── Tabla ejecutiva ───────────────────────────────────────────────────── */
.tabla-envoltura { overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
@media (max-width: 599px) { .tabla-envoltura { margin: 0 -1rem; padding: 0 1rem; } }
.tabla-ejecutiva { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.tabla-ejecutiva thead th { padding: .5rem .75rem; text-align: left; white-space: nowrap; font-size: .75rem; font-weight: 600; color: var(--muted-foreground);
  background: var(--encabezado-tabla); border-bottom: 1px solid var(--borde-fuerte); }
.tabla-ejecutiva tbody :is(td, th) { padding: .5rem .75rem; vertical-align: middle; border-bottom: 1px solid var(--border); }
.tabla-ejecutiva tbody th { font-weight: 600; text-align: left; }
.tabla-ejecutiva tbody tr:nth-child(even) > * { background: var(--fila-alterna); }
.tabla-ejecutiva tbody tr:hover > * { background: var(--fila-hover); }
.tabla-ejecutiva tbody tr:last-child > * { border-bottom: 0; }
.tabla-ejecutiva .num { text-align: right; white-space: nowrap; }

/* ── Control segmentado ────────────────────────────────────────────────── */
.segmentado { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; max-width: 100%; background: var(--muted); border: 1px solid var(--border); border-radius: calc(var(--radio-control) + 3px); }
.segmento { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 34px; padding: 0 .75rem; border: 0; border-radius: var(--radio-control);
  background: transparent; font-size: .8125rem; font-weight: 600; color: var(--muted-foreground); cursor: pointer; white-space: nowrap; }
.segmento:hover { color: var(--foreground); }
.segmento[aria-pressed="true"] { background: var(--card); color: var(--marca-texto); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--border); }

/* ── Formularios ───────────────────────────────────────────────────────── */
.campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.campo { display: grid; gap: 4px; min-width: 0; }
.campo > span { font-size: .8125rem; font-weight: 600; }
.campo > small { font-size: .75rem; color: var(--muted-foreground); }
.entrada { width: 100%; min-height: 40px; padding: .5rem .75rem; border: 1px solid var(--input); border-radius: var(--radio-control); background: var(--card); font-size: 14px; }
.entrada:hover { border-color: var(--borde-fuerte); }
.entrada:focus { outline: 2px solid var(--ring); outline-offset: 0; border-color: transparent; }
textarea.entrada { min-height: 84px; resize: vertical; line-height: 1.45; }
.entrada.mono, .mono { font-family: var(--mono); font-size: 12.5px; }
.mono { word-break: break-all; }
input[type="range"] { width: 100%; accent-color: var(--verde); min-height: 32px; }
.casilla { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; cursor: pointer; }
.casilla input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--verde); }

/* ── Bloques de contenido ──────────────────────────────────────────────── */
.lista-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: .625rem; }
.lista-pasos li { position: relative; padding-left: 2.25rem; counter-increment: paso; }
.lista-pasos li::before { content: counter(paso); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 999px; background: var(--ok-suave); color: var(--ok); font-size: .75rem; font-weight: 700; }
.aviso { display: flex; gap: .625rem; padding: .75rem .875rem; border-radius: var(--radio-tarjeta); background: var(--sem-suave); color: var(--sem-texto);
  border: 1px solid color-mix(in srgb, var(--sem-base) 30%, transparent); font-size: .8125rem; }
.aviso svg { margin-top: 1px; }
.nota { font-size: .75rem; color: var(--muted-foreground); }
.codigo { display: block; padding: .5rem .75rem; border-radius: var(--radio-control); background: var(--muted); border: 1px solid var(--border);
  font-family: var(--mono); font-size: 12.5px; overflow-x: auto; white-space: pre; }
.destacado { font-size: 1.0625rem; line-height: 1.5; font-weight: 500; }
.separador { height: 1px; background: var(--border); margin: .25rem 0; }
.cifra-ok { color: var(--ok); } .cifra-mal { color: var(--sobregiro); }
.dif { color: var(--ok); font-weight: 700; background: var(--ok-suave); border-radius: 2px; }

/* Barra de progreso / medidor */
.medidor { position: relative; height: 10px; border-radius: 999px; background: var(--grafica-rejilla); overflow: hidden; }
.medidor > i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--sem-base, var(--marca)); transition: width .3s; }

/* Tarjetas de acceso */
.tarjeta { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.125rem; border-radius: var(--radio-panel); background: var(--card);
  border: 1px solid var(--border); box-shadow: var(--sombra-tarjeta); color: inherit; text-decoration: none; transition: border-color .15s, background-color .15s; }
a.tarjeta:hover { border-color: var(--borde-fuerte); background: var(--fila-hover); }
.tarjeta-icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ok-suave); color: var(--ok); }
.tarjeta h3 { font-size: .9375rem; }
.tarjeta p { font-size: .8125rem; color: var(--muted-foreground); }

/* Temas de la ruta */
.lista-temas { display: grid; gap: 4px; }
.fila-tema { display: flex; align-items: center; gap: .625rem; min-height: 44px; padding: .375rem .625rem; border-radius: var(--radio-control);
  color: inherit; text-decoration: none; }
.fila-tema:hover { background: var(--fila-hover); }
.fila-tema .check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--input); flex: none; }
.fila-tema[data-visto="si"] .check { background: var(--semaforo-verde); border-color: var(--semaforo-verde); color: #fff; }
.fila-tema .check svg { width: 13px; height: 13px; stroke-width: 3; }
.fila-tema span { flex: 1; min-width: 0; }
.fila-tema small { color: var(--muted-foreground); }

/* Quiz */
.opciones { display: grid; gap: 8px; }
.opcion { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .5rem .875rem; border-radius: var(--radio-tarjeta); border: 1px solid var(--input);
  background: var(--card); text-align: left; cursor: pointer; font-size: .9375rem; }
.opcion:hover:not(:disabled) { border-color: var(--foreground); }
.opcion b { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 999px; background: var(--muted); font-size: .8125rem; }
.opcion[data-estado="bien"] { border-color: var(--semaforo-verde); background: var(--semaforo-verde-suave); }
.opcion[data-estado="mal"] { border-color: var(--semaforo-rojo); background: var(--semaforo-rojo-suave); }
.opcion:disabled { cursor: default; }

/* Hash: rejilla de bits */
.bits { display: grid; grid-template-columns: repeat(32, 1fr); gap: 2px; }
.bits i { aspect-ratio: 1; border-radius: 2px; background: var(--grafica-rejilla); }
.bits i.d { background: var(--verde); }
@media (max-width: 599px) { .bits { grid-template-columns: repeat(16, 1fr); } }

/* Formato del token cifrado */
.formato { display: flex; height: 34px; border-radius: 8px; overflow: hidden; font-size: 11px; font-weight: 700; color: var(--card); }
.formato > div { display: grid; place-items: center; padding: 0 4px; min-width: 0; white-space: nowrap; overflow: hidden; }
.formato > div + div { border-left: 2px solid var(--card); }

/* Blockchain */
.cadena { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.bloque { position: relative; display: grid; gap: .5rem; padding: .875rem; border-radius: var(--radio-panel); background: var(--card);
  border: 1px solid var(--border); box-shadow: var(--sombra-panel); }
.bloque .fila { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.bloque dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px .5rem; margin: 0; font-size: 12px; }
.bloque dt { color: var(--muted-foreground); }
.bloque dd { margin: 0; font-family: var(--mono); word-break: break-all; }
.ceros { color: var(--ok); font-weight: 700; }

/* Escalera de precios (tamaño de posición) */
.escalera { width: 100%; height: auto; }

/* Avisos flotantes */
#avisos { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; gap: .625rem; align-items: center; padding: .75rem 1rem; border-radius: 14px; background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--sombra-flotante); font-size: .875rem; animation: subir .2s ease-out; }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } }
.aparecer { animation: aparecer .22s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Cargando */
.cargando { display: flex; align-items: center; gap: .5rem; color: var(--muted-foreground); font-size: .875rem; padding: 1rem 0; }
.cargando::before { content: ''; width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--border); border-top-color: var(--verde); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ── Gráficas ──────────────────────────────────────────────────────────── */
.grafica { position: relative; width: 100%; min-width: 0; }
.grafica svg { display: block; width: 100%; overflow: visible; }
.grafica .rejilla-g line { stroke: var(--grafica-rejilla); stroke-width: 1; }
.grafica .eje-g text, .grafica .etiqueta-g { fill: var(--muted-foreground); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafica .base-g { stroke: var(--grafica-eje); stroke-width: 1; }
.grafica .cruz { stroke: var(--grafica-eje); stroke-width: 1; stroke-dasharray: 3 3; }
.grafica .ref { stroke: var(--muted-foreground); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.grafica .banda { fill: var(--muted); }
.leyenda { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .5rem; font-size: .8125rem; color: var(--muted-foreground); }
.leyenda span { display: inline-flex; align-items: center; gap: .375rem; }
.leyenda i { width: 14px; height: 3px; border-radius: 2px; }
.leyenda i.cuadro { width: 10px; height: 10px; border-radius: 3px; }
.tooltip-g { position: absolute; z-index: 5; pointer-events: none; min-width: 150px; padding: .5rem .625rem; border-radius: 10px; background: var(--card);
  border: 1px solid var(--border); box-shadow: var(--sombra-flotante); font-size: .75rem; font-variant-numeric: tabular-nums; }
.tooltip-g b { display: block; margin-bottom: 2px; font-size: .75rem; }
.tooltip-g div { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted-foreground); }
.tooltip-g div span:first-child { display: inline-flex; align-items: center; gap: .375rem; }
.tooltip-g div span:last-child { color: var(--foreground); font-weight: 600; }
.tooltip-g i { width: 8px; height: 8px; border-radius: 999px; }
details.ver-datos { margin-top: .5rem; }
details.ver-datos summary { cursor: pointer; font-size: .8125rem; color: var(--muted-foreground); min-height: 32px; display: flex; align-items: center; }

/* Pie */
.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: 16px 24px 24px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 12px; }
.credito { display: inline-flex; align-items: center; gap: .5rem; }


/* ── Orbe de INGO (logo): cielo con aurora verde y blanca. Quieto en reposo; reacciona al cursor. ── */
.ingo-orbe {
  --o: var(--orbe, 40px);
  position: relative; display: inline-block; flex: none; width: var(--o); height: var(--o); border-radius: 50%;
  overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 50% 30%, var(--ingo-cielo-alto) 0%, var(--ingo-cielo-bajo) 92%);
  box-shadow: inset 0 0 0 1px var(--ingo-borde-orbe), 0 3px 12px -5px var(--ingo-halo);
  transition: box-shadow .6s ease;
}
.ingo-orbe > span { position: absolute; pointer-events: none; }
.ingo-orbe__cielo { inset: 0; border-radius: 50%; opacity: .9;
  background: radial-gradient(circle at 22% 24%, var(--ingo-estrella) 0 1px, transparent 1.6px),
              radial-gradient(circle at 70% 18%, var(--ingo-estrella) 0 .8px, transparent 1.4px),
              radial-gradient(circle at 82% 46%, var(--ingo-estrella) 0 1px, transparent 1.6px),
              radial-gradient(circle at 38% 12%, var(--ingo-estrella) 0 .7px, transparent 1.3px),
              radial-gradient(circle at 58% 34%, var(--ingo-estrella) 0 .6px, transparent 1.2px); }
.ingo-orbe__velo { inset: -30%; border-radius: 50%;
  -webkit-mask-image: repeating-linear-gradient(94deg, #000 0 7%, rgb(0 0 0 / .62) 7% 10%, #000 10% 15%);
          mask-image: repeating-linear-gradient(94deg, #000 0 7%, rgb(0 0 0 / .62) 7% 10%, #000 10% 15%);
  filter: blur(calc(var(--o) * .045)); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), opacity .8s ease; }
.ingo-orbe__velo--a { background: radial-gradient(118% 70% at 28% 108%, transparent 46%, var(--ingo-velo-a) 55%, var(--ingo-luz) 60%, var(--ingo-velo-a) 65%, transparent 76%);
  transform: rotate(-14deg) translate(0, 2%); }
.ingo-orbe__velo--b { background: radial-gradient(110% 64% at 76% 112%, transparent 50%, var(--ingo-velo-b) 58%, var(--ingo-luz) 62%, transparent 74%);
  transform: rotate(10deg) translate(0, 6%); opacity: .75; }
.ingo-orbe__brillo { inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 30%),
              radial-gradient(circle at 50% 50%, transparent 62%, rgb(0 40 15 / .16) 100%); }
.lateral-marca:hover .ingo-orbe { box-shadow: inset 0 0 0 1px var(--ingo-borde-orbe), 0 4px 16px -4px var(--ingo-halo); }
.lateral-marca:hover .ingo-orbe__velo--a { transform: rotate(-6deg) translate(-4%, -6%); }
.lateral-marca:hover .ingo-orbe__velo--b { transform: rotate(4deg) translate(5%, -2%); opacity: .95; }
.credito .ingo-orbe { --o: 18px; }

/* Frase semilla */
.palabras { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); margin: 0; padding: 0; list-style: none; }
.palabras li { display: flex; align-items: baseline; gap: .5rem; min-height: 40px; padding: .5rem .625rem; border-radius: var(--radio-control);
  background: var(--muted); border: 1px solid var(--border); font-family: var(--mono); }
.palabras small { width: 1.5rem; color: var(--muted-foreground); text-align: right; flex: none; }
.palabras b { flex: 1; }
.palabras .nota { font-size: 10.5px; }

/* ── Portada e inicio de sesión ────────────────────────────────────────── */
body.portada { display: flex; flex-direction: column; min-height: 100vh; }
body.portada main { flex: 1; }
.portada-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.portada-barra .lateral-marca { flex: none; }
.heroe { padding: clamp(2rem, 6vw, 5rem) 0 2.5rem; max-width: 52rem; }
.heroe-rotulo { font-size: .8125rem; font-weight: 700; color: var(--ok); margin-bottom: .75rem; }
.heroe h1 { font-size: clamp(2.1rem, 1.2rem + 4vw, 3.75rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; margin-bottom: 1rem; }
.heroe-texto { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); color: var(--muted-foreground); max-width: 44rem; margin-bottom: 1.5rem; }
.heroe .aviso { margin-top: 1.25rem; }
.portada-seccion { padding: 1.75rem 0; display: grid; gap: .75rem; }
.pasos-portada { margin: 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.pasos-portada li { counter-increment: p; display: grid; gap: .375rem; padding: 1rem 1.125rem; border-radius: var(--radio-panel); background: var(--card); border: 1px solid var(--border); }
.pasos-portada li::before { content: counter(p); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--ok-suave); color: var(--ok); font-weight: 800; }
.pasos-portada span { color: var(--muted-foreground); font-size: .875rem; }
code, kbd { font-family: var(--mono); font-size: .85em; padding: 0 .3em; border-radius: 4px; background: var(--muted); border: 1px solid var(--border); }
.login-fondo { display: grid; place-items: center; padding: 24px 16px; min-height: 100vh;
  background: radial-gradient(60% 50% at 50% 0%, var(--ok-suave), transparent 70%), var(--background); }
.login-tarjeta { display: grid; gap: 14px; width: min(400px, 100%); padding: 28px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--sombra-flotante); }
.login-orbe { --orbe: 56px; justify-self: center; }
.login-tarjeta .titulo-pagina { text-align: center; }
.login-tarjeta .subtitulo-pagina { text-align: center; margin-top: -8px; }
.login-tarjeta > .boton { width: 100%; min-height: 44px; }
.con-boton .boton { flex: none; width: auto; }
.con-boton { display: flex; gap: 8px; align-items: center; }
.con-boton .entrada { flex: 1; }

/* ── Menú de cuenta, «ver como» y sin conexión ─────────────────────────── */
.cuenta-menu { position: relative; }
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--foreground); color: var(--background); font-weight: 800; font-size: 14px; }
.menu-flotante { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(300px, calc(100vw - 32px)); padding: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-panel); box-shadow: var(--sombra-flotante); }
.menu-flotante .cabeza-menu { padding: 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu-flotante .cabeza-menu small { display: block; color: var(--muted-foreground); }
.menu-flotante button, .menu-flotante a { display: flex; width: 100%; align-items: center; gap: .5rem; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--foreground); text-decoration: none; font-size: .875rem; cursor: pointer; text-align: left; }
.menu-flotante button:hover, .menu-flotante a:hover { background: var(--fila-hover); }
.menu-flotante .rotulo { padding: 8px 10px 2px; }
.menu-flotante [aria-current="true"] { font-weight: 700; color: var(--ok); }
.pastilla-vista { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 65; display: flex; gap: .75rem; align-items: center;
  padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--foreground); color: var(--background); box-shadow: var(--sombra-flotante); font-size: .875rem; font-weight: 600; }
.pastilla-vista button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--verde); color: #fff; font-weight: 700; cursor: pointer; }
.sin-conexion { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 66; display: flex; gap: .75rem; align-items: center;
  padding: .625rem .875rem; border-radius: 14px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--sombra-flotante); font-size: .875rem; }
.modulo-tarjeta { position: relative; }
.modulo-tarjeta[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.modulo-tarjeta .letra { position: absolute; right: 14px; top: 14px; }
/* Botones con títulos largos (anterior/siguiente tema): se parten en líneas en vez de salirse de la pantalla. */
.boton.boton-nav { white-space: normal; max-width: 100%; text-align: left; padding: .5rem 1rem; line-height: 1.3; }

/* ── Ruta INGO (2.1): cuestionario, cascada y rutas ─────────────────────── */
.ri-deuda { padding: .875rem; border-radius: var(--radio-tarjeta); background: var(--muted); border: 1px solid var(--border); }
.ri-cascada { margin: 0; padding: 0; list-style: none; display: grid; gap: .375rem; }
.ri-cascada li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: .625rem; align-items: start; padding: .5rem .625rem; border-radius: var(--radio-tarjeta); }
.ri-cascada li[aria-current] { background: var(--muted); }
.ri-n { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--muted); font-size: .75rem; font-weight: 700; }
.ri-cascada li[aria-current] .ri-n { background: var(--ok-suave); color: var(--ok); }
@media (max-width: 599px) {
  .ri-cascada li { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .ri-cascada li > .chip { grid-column: 2; justify-self: start; }
}
.ri-motivos { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: .8125rem; }