/* FinTrack · la app (frontend/app/).
 *
 * Un solo fichero de estilos, ordenado de lo general a lo concreto:
 * fuente → tokens (claro, oscuro, azul/naranja) → base → armazón (pantallas,
 * barra de abajo, cabeceras) → componentes → pantallas → utilidades.
 *
 * Reglas del sistema de diseño (docs/app-sistema-de-diseno.md):
 * - El código solo usa NOMBRES de token, nunca un color escrito a mano: así el
 *   modo oscuro y el tema para daltonismo son cambiar los valores, no el CSS.
 * - Ganar/perder nunca solo por color: signo y flecha siempre (.cifra-sube…).
 * - Nada de emojis ni gradientes; iconos de trazo (js/iconos.js).
 * - Zonas táctiles de 44 px como mínimo.
 */

/* ------------------------------------------------------------------ Fuente */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ Tokens */
:root {
  color-scheme: light;

  /* Base */
  --fondo: #F4F5F7;
  --tarjeta: #FFFFFF;
  --tarjeta-2: #EEF0F3;          /* relleno de controles sobre tarjeta */
  --texto: #16181D;
  --texto-2: #5B6270;            /* secundario, ≥ 4,5:1 sobre fondo y tarjeta */
  --texto-3: #8C93A1;            /* solo iconos y chevrons, nunca texto que haya que leer */
  --linea: #EEF0F3;              /* separadores dentro de una tarjeta */
  --borde: #E3E5EA;              /* bordes de controles */
  --acento: #2B4ACB;
  --acento-suave: #EAEDFA;
  --sobre-acento: #FFFFFF;

  /* La tarjeta del patrimonio: oscura en claro, elevada en oscuro */
  --hero: #16181D;
  --hero-texto: #FFFFFF;
  --hero-texto-2: #A9AFBB;
  --hero-linea: #2A2D35;

  /* Semánticos */
  --sube: #1B7A4B;
  --sube-suave: #E6F3EC;
  --sube-hero: #7FE0A8;
  --sube-hero-fondo: #1E3A2B;
  --baja: #C24A1C;
  --baja-suave: #FBEFE8;
  --baja-hero: #F6A37E;
  --baja-hero-fondo: #3D2419;
  --aviso: #8A5A22;
  --aviso-suave: #F7EEDF;

  /* Series de los gráficos de reparto (de más a menos peso). La 3 y la 5
     eran negro y gris pizarra: junto al gris claro de la 4, en un anillo no
     se distinguían. Ahora ocre (el cálido de la marca) y verde azulado, con
     contraste de 4:1 o más sobre la tarjeta. */
  --serie-1: #2B4ACB;
  --serie-2: #8A9BE8;
  --serie-3: #B0701F;
  --serie-4: #C9CDD6;
  --serie-5: #1F7F78;

  /* Tonos de los iconos sin logo (iconos.js, tonoIcono): trazo y fondo suave.
     No son el color de la categoría del servidor: lo que es (deporte, comida,
     Bizum…). Todos con 4,5:1 o más del trazo sobre su fondo. */
  --tono-verde: #1E7A47;
  --tono-verde-fondo: #E3F2E8;
  --tono-rosa: #B23A5B;
  --tono-rosa-fondo: #FBE7EC;
  --tono-azul: #2B4ACB;
  --tono-azul-fondo: #E5ECFB;
  --tono-ambar: #8F5410;
  --tono-ambar-fondo: #FBEFD9;
  --tono-violeta: #6B3FB5;
  --tono-violeta-fondo: #EFE7FA;
  --tono-turquesa: #17706A;
  --tono-turquesa-fondo: #DFF2F1;

  /* Lino, la mascota: sus tres colores no cambian con el tema */
  --lino-pelo: #C9893A;
  --lino-crema: #F3E3C8;
  --lino-tinta: #16181D;

  --velo: rgba(15, 17, 20, 0.42);  /* detrás de una hoja */
  /* Sin sombras (#162): la elevación la da el tono, --tarjeta sobre --fondo.
     Solo flotan la hoja y el aviso efímero; --sombra-control, el segmento activo. */
  --sombra: none;
  --sombra-control: 0 1px 2px rgba(22, 24, 29, 0.10);
  --sombra-hoja: 0 -8px 40px rgba(22, 24, 29, 0.18);

  /* Medidas */
  --radio: 16px;
  --radio-sm: 12px;
  --radio-xs: 8px;
  --hueco: 20px;                 /* margen lateral de pantalla */
  --barra-alto: 64px;            /* barra de abajo, sin contar el área segura */
  --arriba: env(safe-area-inset-top, 0px);
  --abajo: env(safe-area-inset-bottom, 0px);

  --fuente: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Modo oscuro: opción en Ajustes (Claro · Oscuro · Como el móvil), no por
 * defecto. Los dos bloques llevan los mismos valores: uno para «Oscuro», otro
 * para «Como el móvil» cuando el sistema está en oscuro. */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0F1114;
  --tarjeta: #1A1D23;
  --tarjeta-2: #242830;
  --texto: #F2F3F5;
  --texto-2: #A3AAB8;
  --texto-3: #6B7280;
  --linea: #262A31;
  --borde: #30343C;
  --acento: #7D93F0;
  --acento-suave: #232A45;
  --sobre-acento: #0F1114;
  --hero: #1A1D23;
  --hero-texto: #F2F3F5;
  --hero-texto-2: #A3AAB8;
  --hero-linea: #2C3038;
  --sube: #5FCB8E;
  --sube-suave: #17291F;
  --sube-hero: #5FCB8E;
  --sube-hero-fondo: #17291F;
  --baja: #F08A5B;
  --baja-suave: #33201A;
  --baja-hero: #F08A5B;
  --baja-hero-fondo: #33201A;
  --aviso: #D9A05B;
  --aviso-suave: #30261A;
  --serie-1: #7D93F0;
  --serie-2: #4A5BA8;
  --serie-3: #E0A458;
  --serie-4: #4B5160;
  --serie-5: #4DB6AC;
  --tono-verde: #6FD39A;
  --tono-verde-fondo: #17291F;
  --tono-rosa: #F08FAA;
  --tono-rosa-fondo: #35202A;
  --tono-azul: #8FA4F2;
  --tono-azul-fondo: #1F2742;
  --tono-ambar: #E2AE62;
  --tono-ambar-fondo: #33281A;
  --tono-violeta: #B99AF0;
  --tono-violeta-fondo: #2A2140;
  --tono-turquesa: #5FC9C0;
  --tono-turquesa-fondo: #142C2B;
  --velo: rgba(0, 0, 0, 0.6);
  --sombra: none;
  --sombra-control: none;
  --sombra-hoja: 0 -8px 40px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
    color-scheme: dark;
    --fondo: #0F1114;
    --tarjeta: #1A1D23;
    --tarjeta-2: #242830;
    --texto: #F2F3F5;
    --texto-2: #A3AAB8;
    --texto-3: #6B7280;
    --linea: #262A31;
    --borde: #30343C;
    --acento: #7D93F0;
    --acento-suave: #232A45;
    --sobre-acento: #0F1114;
    --hero: #1A1D23;
    --hero-texto: #F2F3F5;
    --hero-texto-2: #A3AAB8;
    --hero-linea: #2C3038;
    --sube: #5FCB8E;
    --sube-suave: #17291F;
    --sube-hero: #5FCB8E;
    --sube-hero-fondo: #17291F;
    --baja: #F08A5B;
    --baja-suave: #33201A;
    --baja-hero: #F08A5B;
    --baja-hero-fondo: #33201A;
    --aviso: #D9A05B;
    --aviso-suave: #30261A;
    --serie-1: #7D93F0;
    --serie-2: #4A5BA8;
    --serie-3: #E0A458;
    --serie-4: #4B5160;
    --serie-5: #4DB6AC;
    --tono-verde: #6FD39A;
    --tono-verde-fondo: #17291F;
    --tono-rosa: #F08FAA;
    --tono-rosa-fondo: #35202A;
    --tono-azul: #8FA4F2;
    --tono-azul-fondo: #1F2742;
    --tono-ambar: #E2AE62;
    --tono-ambar-fondo: #33281A;
    --tono-violeta: #B99AF0;
    --tono-violeta-fondo: #2A2140;
    --tono-turquesa: #5FC9C0;
    --tono-turquesa-fondo: #142C2B;
    --velo: rgba(0, 0, 0, 0.6);
    --sombra: none;
    --sombra-control: none;
    --sombra-hoja: 0 -8px 40px rgba(0, 0, 0, 0.5);
  }
}

/* Tema «azul / naranja» para daltonismo rojo-verde (8 % de los hombres).
 * Cambia solo subir/bajar; el signo y la flecha siguen ahí. */
:root[data-colores="azul-naranja"] {
  --sube: #1F5FBF;
  --sube-suave: #E5EEFA;
  --sube-hero: #8DB4F5;
  --sube-hero-fondo: #1B2A44;
  --baja: #B4560B;
  --baja-suave: #FAEEDF;
  --baja-hero: #F5B26B;
  --baja-hero-fondo: #3B2814;
}
:root[data-colores="azul-naranja"][data-tema="oscuro"] {
  --sube: #8DB4F5;
  --sube-suave: #1B2A44;
  --baja: #F5B26B;
  --baja-suave: #3B2814;
}
@media (prefers-color-scheme: dark) {
  :root[data-colores="azul-naranja"][data-tema="auto"] {
    --sube: #8DB4F5;
    --sube-suave: #1B2A44;
    --baja: #F5B26B;
    --baja-suave: #3B2814;
  }
}

/* -------------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--fondo);
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acento); }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

.solo-lector {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- Armazón */
/* Cada destino de la barra tiene su pantalla raíz, que se queda montada (y con
 * su scroll) al cambiar de pestaña. Las pantallas apiladas entran por la
 * derecha encima de todo y se van con «atrás». */
#app { position: relative; min-height: 100dvh; }

.pantalla {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--fondo);
  padding: calc(var(--arriba) + 12px) var(--hueco) calc(var(--barra-alto) + var(--abajo) + 28px);
}
.pantalla.sin-barra { padding-bottom: calc(var(--abajo) + 28px); }
.pantalla[aria-hidden="true"] { visibility: hidden; }
.pantalla.apilada { z-index: 35; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.08); }
.pantalla.entra { animation: entrar 240ms var(--curva) both; }
.pantalla.sale { animation: salir 200ms var(--curva) both; pointer-events: none; }
@keyframes entrar { from { transform: translateX(100%); } to { transform: none; } }
@keyframes salir { from { transform: none; } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .pantalla.entra, .pantalla.sale, .hoja, .hoja-velo, .clave-nueva { animation-duration: 1ms !important; }
  .fila.plegada { transition-duration: 1ms !important; }
}
.contenido { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
/* El cuerpo de una pestaña dentro de una pantalla (Cartera): ocupa todo el
   ancho de su .contenido. Un .contenido anidado se encoge al ancho de lo que
   lleva (margin auto) y se sale por la derecha: por eso tiene clase propia,
   y por si acaso el anidado también se estira. */
.cuerpo-pestana, .contenido .contenido { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: none; margin: 0; min-width: 0; }

/* Cabecera de pestaña: título grande + acciones redondas */
.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px;
}
.cabecera h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.acciones { display: flex; gap: 8px; }

/* Cabecera de pantalla apilada: «‹ Volver» + título centrado */
.cabecera-apilada {
  position: sticky; top: calc(-12px - var(--arriba)); z-index: 2;
  margin: calc(-12px - var(--arriba)) calc(-1 * var(--hueco)) 0;
  padding: calc(var(--arriba) + 4px) 8px 4px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
}
.cabecera-apilada h1 {
  font-size: 16px; font-weight: 600; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw;
}
.cabecera-apilada .lado-der { justify-self: end; display: flex; gap: 4px; }
.volver {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; padding: 0 10px 0 2px;
  border: 0; background: none; color: var(--acento);
  font-size: 16px; font-weight: 500;
}
.volver svg { width: 24px; height: 24px; }

/* Barra de abajo: 5 destinos, el del centro es «Apuntar» */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--barra-alto) + var(--abajo));
  padding: 6px 6px var(--abajo);
  display: flex; align-items: flex-start;
  background: color-mix(in srgb, var(--tarjeta) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  border-top: 1px solid var(--borde);
}
.barra a, .barra button {
  flex: 1; min-height: 50px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; text-decoration: none;
  color: var(--texto-2); font-size: 11px; font-weight: 500;
}
.barra svg { width: 24px; height: 24px; }
.barra [aria-current="page"] { color: var(--acento); font-weight: 600; }
.barra .boton-mas span {
  width: 48px; height: 48px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--acento); color: var(--sobre-acento);
}

/* -------------------------------------------------------------- Componentes */
.boton-redondo {
  width: 44px; height: 44px; border-radius: 22px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: var(--tarjeta); color: var(--texto);
  box-shadow: var(--sombra);
  position: relative;
}
.boton-redondo svg { width: 22px; height: 22px; }
.boton-redondo .punto {
  position: absolute; top: 9px; right: 10px;
  width: 9px; height: 9px; border-radius: 5px;
  background: var(--baja); border: 2px solid var(--tarjeta);
}
.cabecera-apilada .boton-redondo { box-shadow: none; background: transparent; }

.tarjeta {
  background: var(--tarjeta);
  border-radius: var(--radio);
  padding: 16px;
  box-shadow: var(--sombra);
}
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }

.seccion { display: flex; flex-direction: column; gap: 10px; }
.seccion-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 24px;
}
.seccion-titulo h2 {
  font-size: 13px; font-weight: 600; color: var(--texto-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
/* 44 px de alto para el dedo, pero la maqueta se queda como con 32: el
   margen negativo devuelve los 12 px de más (6 arriba y 6 abajo). */
.enlace {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0; min-height: 44px; margin-block: -6px;
  color: var(--acento); font-size: 14px; font-weight: 600; text-decoration: none;
}
.fila.enlace { margin-block: 0; }

/* Filas de lista: icono · título/subtítulo · valor · chevron */
.lista { display: flex; flex-direction: column; }
.fila {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 12px 16px;
  border: 0; background: none; text-align: left; text-decoration: none; color: inherit;
}
.fila + .fila { border-top: 1px solid var(--linea); }
button.fila:active, a.fila:active { background: var(--tarjeta-2); }
.fila .icono, .grupo-revisar .cabeza .icono {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--tarjeta-2); color: var(--texto);
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.fila .icono svg, .grupo-revisar .cabeza .icono svg { width: 18px; height: 18px; }
.fila .icono.acento { background: var(--acento-suave); color: var(--acento); }
.fila .icono.baja { background: var(--baja-suave); color: var(--baja); }
.fila .icono.sube { background: var(--sube-suave); color: var(--sube); }
.fila .icono.aviso { background: var(--aviso-suave); color: var(--aviso); }
/* Categorías (#162): trazo --texto-2 sobre --tarjeta-2, nunca el color del servidor. */
.icono.icono-cat { background: var(--tarjeta-2); color: var(--texto-2); }
/* Logos de marca (docs/logos.md): la imagen llena el cuadrado. Son opacos
   (lo transparente viene ya sobre blanco), así que se ven igual en claro y en
   oscuro; la línea fina los separa de la tarjeta. Mientras carga, el tono de
   siempre. */
.icono.logo { padding: 0; overflow: hidden; background: var(--tarjeta-2); outline: 1px solid var(--borde); outline-offset: -1px; }
.icono.logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fila .textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila .titulo {
  font-size: 15px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fila .sub {
  font-size: 13px; color: var(--texto-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fila .valor { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.fila .valor strong { font-size: 15px; font-weight: 600; }
.fila .valor small { font-size: 12px; font-weight: 600; }
.fila .valor .elegida { width: 20px; height: 20px; color: var(--acento); }
.fila .chevron { width: 18px; height: 18px; color: var(--texto-3); flex: none; }
.fila.envuelve .titulo, .fila.envuelve .sub { white-space: normal; }

/* Cifras: signo y flecha siempre; color como refuerzo */
.cifra-sube, .cifra-baja, .cifra-igual {
  display: inline-flex; align-items: center; gap: 3px; font-weight: 600;
}
.cifra-sube { color: var(--sube); }
.cifra-baja { color: var(--baja); }
.cifra-igual { color: var(--texto-2); }
.cifra-sube svg, .cifra-baja svg { width: 0.95em; height: 0.95em; flex: none; }

.pastilla {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radio-xs);
  font-size: 13px; font-weight: 600;
}
.pastilla svg { width: 14px; height: 14px; }
.pastilla.sube { background: var(--sube-suave); color: var(--sube); }
.pastilla.baja { background: var(--baja-suave); color: var(--baja); }
.pastilla.neutra { background: var(--tarjeta-2); color: var(--texto-2); }
.pastilla.aviso { background: var(--aviso-suave); color: var(--aviso); }

/* Patrimonio */
.hero {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 20px 18px; border-radius: 20px;
  background: var(--hero); color: var(--hero-texto);
}
:root[data-tema="oscuro"] .hero { border: 1px solid var(--borde); }
@media (prefers-color-scheme: dark) { :root[data-tema="auto"] .hero { border: 1px solid var(--borde); } }
.hero .etiqueta { font-size: 13px; color: var(--hero-texto-2); }
.hero .grande { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.hero .linea-cambio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--hero-texto-2); }
.hero .pastilla.sube { background: var(--sube-hero-fondo); color: var(--sube-hero); }
.hero .pastilla.baja { background: var(--baja-hero-fondo); color: var(--baja-hero); }
.hero .pastilla.neutra { background: var(--hero-linea); color: var(--hero-texto-2); }
.hero .partes { display: flex; border-top: 1px solid var(--hero-linea); padding-top: 14px; margin-top: 2px; }
.hero .partes > * { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero .partes small { font-size: 12px; color: var(--hero-texto-2); }
.hero .partes strong { font-size: 16px; font-weight: 600; }

/* Inicio (#160): la fecha en la cabecera, sin saludo — con cuatro botones al
   lado puede partirse en dos líneas antes que salirse de la pantalla. */
.cabecera .fecha-cabecera { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.25; }
/* Patrimonio compacto: unos 150 px, y todo el bloque lleva a Cuentas. */
.hero.compacto { gap: 8px; padding: 16px 20px; text-decoration: none; }
.hero.compacto .desglose { font-size: 13px; color: var(--hero-texto-2); }
a.hero:active { opacity: 0.92; }
/* La cifra que contesta «¿cómo va el mes?» */
.mes-respuesta { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; color: var(--texto); }
.mes-respuesta.pasado { color: var(--baja); }
/* Mientras llega lo primero: la forma de verdad de Inicio, nunca un spinner. */
.esqueleto-inicio { display: flex; flex-direction: column; gap: 18px; }
.esqueleto-inicio .bloque-hero { height: 150px; border-radius: 20px; background: var(--tarjeta-2); }
/* La carga que se alarga (esperaConAviso en ui.js): el texto y Reintentar bajo el esqueleto. */
.aviso-espera:not(:empty) { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
.aviso-espera .boton { min-height: 44px; }
/* «Desde la última vez» entra suave al llegar los datos frescos. */
.seccion.aparece { animation: aparecer 150ms var(--curva) both; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .seccion.aparece { animation: none; } }

/* Pares de cifras dentro de una tarjeta */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.cifra { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cifra small { font-size: 12px; color: var(--texto-2); }
.cifra strong { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.cifra.grande strong { font-size: 24px; }
.cifra em { font-style: normal; font-size: 12px; }

/* Barras */
.barra-progreso { height: 8px; border-radius: 4px; background: var(--tarjeta-2); overflow: hidden; }
.barra-progreso > span { display: block; height: 100%; border-radius: 4px; background: var(--acento); transition: width 250ms var(--curva); }
.barra-progreso.aviso > span { background: var(--aviso); }
.barra-progreso.baja > span { background: var(--baja); }
.barra-progreso.hecho > span { background: var(--sube); }
.reparto { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.reparto > span { display: block; height: 100%; min-width: 3px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--texto-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 8px; height: 8px; border-radius: 4px; display: inline-block; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: var(--radio-sm);
  border: 1px solid transparent; text-decoration: none;
  font-size: 15px; font-weight: 600;
}
.boton svg { width: 20px; height: 20px; }
.boton.principal { background: var(--acento); color: var(--sobre-acento); }
.boton.secundario { background: var(--tarjeta); color: var(--texto); border-color: var(--borde); }
.boton.oscuro { background: var(--texto); color: var(--fondo); }
.boton.peligro { background: var(--tarjeta); color: var(--baja); border-color: var(--borde); }
.boton.ancho { width: 100%; }
.boton:disabled { opacity: 0.5; cursor: default; }
.botones { display: flex; gap: 8px; }
.botones > * { flex: 1; }
/* Dos acciones con texto largo, una debajo de otra (Objetivos, Inicio vacío). */
.botones.apilados { flex-direction: column; }

/* Chips y segmentados */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--hueco)); padding: 0 var(--hueco); }
.chips::-webkit-scrollbar { display: none; }
/* Todo lo que se toca mide 44 px de alto como poco (la guía de Apple; los
   tests lo vigilan en test_app_movil.py). */
.chip {
  flex: none; min-height: 44px; padding: 0 14px; border-radius: 22px;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--fondo); font-weight: 600; }
.segmentado {
  display: flex; gap: 4px; padding: 4px; border-radius: var(--radio-sm);
  background: var(--tarjeta-2);
}
.segmentado button {
  flex: 1; min-height: 44px; border: 0; border-radius: var(--radio-xs);
  background: transparent; color: var(--texto-2); font-size: 14px; font-weight: 600;
}
.segmentado button[aria-pressed="true"] { background: var(--tarjeta); color: var(--texto); box-shadow: var(--sombra-control); }
.segmentado button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.segmentado svg { width: 18px; height: 18px; flex: none; }
/* Ocho rangos (1D … Todo) a 44 px no caben en 390 px: se reparten el ancho
   mientras quepan y, si no, se deslizan de lado como los chips. */
.rangos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.rangos::-webkit-scrollbar { display: none; }
.rangos button {
  flex: 1 0 44px; min-width: 44px; min-height: 44px; border: 0; border-radius: var(--radio-xs);
  background: var(--tarjeta-2); color: var(--texto-2); font-size: 12px; font-weight: 600;
}
.rangos button[aria-pressed="true"] { background: var(--texto); color: var(--fondo); }

/* Formularios */
.campos { display: flex; flex-direction: column; background: var(--tarjeta); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.campo { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; }
.campo + .campo { border-top: 1px solid var(--linea); }
.campo label { width: 96px; flex: none; font-size: 14px; color: var(--texto-2); }
.campo input, .campo select, .campo textarea {
  flex: 1; min-width: 0; min-height: 48px; border: 0; background: transparent;
  font-size: 16px; /* 16 px: iOS no hace zoom al enfocar */
  text-align: right; appearance: none; -webkit-appearance: none;
}
.campo select { direction: rtl; }
.campo input::-webkit-date-and-time-value { text-align: right; }  /* Safari alinea la fecha a la izquierda */
.campo select option { direction: ltr; }
.campo input:focus, .campo select:focus { outline: none; }
.campo:focus-within { box-shadow: inset 3px 0 0 var(--acento); }
.campo-importe { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 4px; }
.campo-importe label { font-size: 13px; color: var(--texto-2); }
.campo-importe input {
  width: 100%; border: 0; background: transparent; text-align: center;
  font-size: 44px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
}
.campo-importe input:focus { outline: none; }
.campo-importe input::placeholder { color: var(--texto-3); }
.ayuda { font-size: 13px; color: var(--texto-2); text-wrap: pretty; }
.error-campo { font-size: 13px; color: var(--baja); }

/* Interruptor (fila de Ajustes) */
.interruptor {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 51px; height: 31px; border-radius: 16px; margin: 0;
  background: var(--borde); position: relative; transition: background 160ms;
}
.interruptor::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 14px; background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 160ms var(--curva);
}
.interruptor:checked { background: var(--sube); }
.interruptor:checked::after { transform: translateX(20px); }
/* Dentro de un .campo, el interruptor no es un campo de texto más. */
.campo .interruptor { flex: none; min-height: 0; width: 51px; height: 31px; background: var(--borde); }
.campo .interruptor:checked { background: var(--sube); }

/* Hoja (bottom sheet) */
.hoja-velo {
  position: fixed; inset: 0; z-index: 40; background: var(--velo);
  animation: aparecer 200ms ease both;
}
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-height: calc(100dvh - var(--arriba) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--hueco) calc(var(--abajo) + 20px);
  border-radius: 22px 22px 0 0;
  background: var(--fondo); box-shadow: var(--sombra-hoja);
  animation: subir 250ms var(--curva) both;
}
.hoja.cierra { animation: bajar 200ms var(--curva) both; }
.hoja-velo.cierra { animation: desaparecer 200ms ease both; }
.hoja .asa { width: 40px; height: 5px; border-radius: 3px; background: var(--borde); margin: 0 auto 8px; }
.hoja .hoja-cabecera { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; margin-bottom: 8px; }
.hoja .hoja-cabecera h2 { font-size: 17px; font-weight: 600; }
.hoja .hoja-cabecera .enlace { justify-self: start; font-weight: 500; }
.hoja-contenido { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
/* Un formulario dentro de la hoja: ocupa el ancho, no el de su contenido (con
 * margin auto en una columna flex, un <select> largo lo sacaba de la pantalla). */
.hoja-contenido .hoja-contenido { max-width: none; width: 100%; margin: 0; }
.campo select { max-width: 100%; text-overflow: ellipsis; }
.campo > .esqueleto { margin-left: auto; }   /* donde irá el valor: a la derecha */
/* Apuntar: tus habituales bajo el concepto, y la categoría o la cuenta
 * adivinadas marcadas «sugerida» debajo de su etiqueta hasta que las cambies. */
.campos > .habituales:not(:empty) { border-top: 1px solid var(--linea); }
.habituales .fila .valor { color: var(--texto-2); }
.campo label .sugerida { font-size: 12px; line-height: 15px; color: var(--texto-2); }
.campo label .sugerida:not([hidden]) { display: block; animation: aparecer 150ms ease-out; }
@media (prefers-reduced-motion: reduce) { .campo label .sugerida { animation: none; } }
/* El pie de la hoja (el botón de guardar): pegado abajo aunque el contenido
 * deslice, y encima del teclado (ui.js sube la hoja lo que el teclado tapa). */
.hoja-pie {
  position: sticky; bottom: calc(-1 * (var(--abajo) + 20px)); z-index: 2;
  margin: 16px calc(-1 * var(--hueco)) calc(-1 * (var(--abajo) + 20px));
  padding: 12px var(--hueco) calc(var(--abajo) + 12px);
  background: color-mix(in srgb, var(--fondo) 94%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--linea);
}
.hoja-pie > * { max-width: 560px; margin: 0 auto; }
.hoja-pie:empty { display: none; }
/* Con el teclado arriba, el hueco de la barra de gestos queda debajo del teclado. */
.hoja.con-teclado .hoja-pie { padding-bottom: 10px; }
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
@keyframes bajar { from { transform: none; } to { transform: translateY(100%); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes desaparecer { from { opacity: 1; } to { opacity: 0; } }

/* Avisos efímeros */
.toast {
  position: fixed; left: 50%; z-index: 60;
  bottom: calc(var(--barra-alto) + var(--abajo) + 16px);
  transform: translateX(-50%);
  max-width: calc(100vw - 32px); min-height: 48px;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: var(--radio-sm);
  background: var(--texto); color: var(--fondo);
  font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  animation: aparecer 180ms ease both;
}
.toast button { border: 0; background: none; color: inherit; font-weight: 700; min-height: 44px; padding: 0 8px; text-decoration: underline; }

/* Aviso de conexión / datos viejos */
.franja {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radio-sm);
  background: var(--aviso-suave); color: var(--aviso);
  font-size: 13px; font-weight: 500;
}
.franja svg { width: 18px; height: 18px; flex: none; }
.franja button { margin-left: auto; border: 0; background: none; color: inherit; font-weight: 700; min-height: 44px; margin-block: -10px; text-decoration: underline; }
.franja.error { background: var(--baja-suave); color: var(--baja); }

/* Cargando: esqueletos, nunca un spinner a pantalla completa */
.esqueleto {
  border-radius: var(--radio-xs);
  background: linear-gradient(90deg, var(--tarjeta-2) 0%, var(--linea) 50%, var(--tarjeta-2) 100%);
  background-size: 200% 100%;
  animation: brillo 1.3s ease-in-out infinite;
}
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }
.quieto .esqueleto { animation: none; }   /* sin red: no hay nada que esperar */

/* Vacío, con Lino */
.vacio {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 28px 12px 8px;
}
.vacio .lino { width: 132px; height: 132px; }
.vacio h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.vacio p { font-size: 14px; color: var(--texto-2); max-width: 300px; }
.vacio .botones { flex-direction: column; width: 100%; margin-top: 10px; }

/* Racha: Lino pequeño a la izquierda y el número al lado. No es una fila que
   se pulse —es un estado, no una acción—, así que no lleva chevron ni hover. */
.racha {
  /* `flex-direction` explícito: `.seccion` (más arriba en el fichero) pone
     `column`, y poner solo `display:flex` aquí no la contradice — Lino salía
     encima del texto ocupando media pantalla para un dato menor. */
  display: flex; flex-direction: row; align-items: center; gap: 12px;
}
.racha .lino.pequeno { width: 44px; height: 44px; flex: 0 0 auto; }
.racha .textos { display: flex; flex-direction: column; min-width: 0; }
.racha .sub { font-size: 13px; color: var(--texto-2); }

/* Gráfico de precio */
.grafico { position: relative; height: 180px; touch-action: pan-y; }
.grafico svg { width: 100%; height: 100%; overflow: visible; }
.grafico .linea-precio { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .area-precio { fill: var(--acento); opacity: 0.08; }
.grafico .rejilla { stroke: var(--linea); stroke-width: 1; }
.grafico .compra { fill: var(--tarjeta); stroke: var(--sube); stroke-width: 2; }
.grafico .venta { fill: var(--tarjeta); stroke: var(--baja); stroke-width: 2; }
.grafico .cursor { stroke: var(--texto-3); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico .cursor-punto { fill: var(--acento); stroke: var(--tarjeta); stroke-width: 2; }
.grafico-dato { min-height: 20px; font-size: 13px; color: var(--texto-2); }

/* Chat de FinBot */
.chat { display: flex; flex-direction: column; gap: 12px; }
.burbuja { max-width: 86%; padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.burbuja.mia { align-self: flex-end; background: var(--acento); color: var(--sobre-acento); border-bottom-right-radius: 6px; }
.burbuja.suya { align-self: flex-start; background: var(--tarjeta); border-bottom-left-radius: 6px; box-shadow: var(--sombra); }
.burbuja.suya p + p, .burbuja.suya ul + p, .burbuja.suya p + ul { margin-top: 8px; }
.burbuja.suya ul { margin: 0; padding-left: 20px; }
.burbuja .pie { display: block; margin-top: 6px; font-size: 11px; color: var(--texto-2); }
.tarjeta-accion { align-self: stretch; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--borde); }
.tarjeta-accion .que { font-size: 14px; }
.tarjeta-accion .estado { font-size: 13px; color: var(--texto-2); }
/* La pantalla del chat no hace scroll entera: es una columna (cabecera ·
 * conversación · caja de escribir) del alto que de verdad se ve. Con la caja
 * en `position: fixed`, iOS la arrastraba al medio de la pantalla al deslizar
 * con el teclado abierto (mueve la página por debajo del teclado y lo fijo va
 * con ella). Ahora solo se desliza la conversación, y el alto de la columna
 * sigue al hueco que deja el teclado (finbot.js, visualViewport). */
.pantalla.chat-pantalla {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.chat-pantalla .cabecera-apilada {
  position: relative; top: auto; margin: 0; flex: none;
  padding: calc(var(--arriba) + 4px) 8px 4px;
  border-bottom: 1px solid var(--linea);
}
.chat-desliza {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 16px var(--hueco) 20px;
}
.compositor {
  flex: none;
  padding: 10px var(--hueco) calc(var(--abajo) + 10px);
  background: var(--fondo);
  border-top: 1px solid var(--borde);
}
/* Con el teclado arriba, el hueco de la barra de gestos queda debajo del teclado. */
.teclado-abierto .compositor { padding-bottom: 10px; }
.compositor form { max-width: 560px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; }
.compositor textarea {
  flex: 1; min-height: 44px; max-height: 140px; resize: none;
  padding: 11px 16px; border-radius: 22px; border: 1px solid var(--borde);
  background: var(--tarjeta); font-size: 16px; line-height: 1.35;
}
.compositor textarea:focus { outline: none; border-color: var(--acento); }
.compositor .boton-redondo { background: var(--acento); color: var(--sobre-acento); box-shadow: none; }
.compositor form[hidden] { display: none; }
.escribiendo { display: inline-flex; gap: 4px; padding: 4px 0; }
.escribiendo i { width: 7px; height: 7px; border-radius: 4px; background: var(--texto-3); animation: rebote 1.2s infinite ease-in-out; }
.escribiendo i:nth-child(2) { animation-delay: 0.15s; }
.escribiendo i:nth-child(3) { animation-delay: 0.3s; }
@keyframes rebote { 0%, 80%, 100% { opacity: 0.3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* Pantalla de entrada / bloqueo: fondo liso y la marca, sin spinner */
.puerta {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--arriba) + 24px) 32px calc(var(--abajo) + 40px);
  background: var(--fondo);
}
.puerta .marca { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.puerta .marca svg { width: 64px; height: 64px; }
.puerta .marca strong { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.puerta .marca p { font-size: 14px; color: var(--texto-2); text-align: center; max-width: 280px; }
.puerta .botones { width: 100%; max-width: 380px; flex-direction: column; }
.puerta .error-campo { text-align: center; }
.puerta .ayuda { text-align: center; }
.puerta .ayuda a { font-weight: 600; }

/* Modo privado: los importes se tapan con un toque (ojo de Inicio) */
.privado .dinero > * { display: none; }
.privado .dinero::after { content: '••••'; color: var(--texto-2); letter-spacing: 0.06em; white-space: nowrap; }
.privado .hero .dinero::after { color: var(--hero-texto-2); }
.privado .hero .grande .dinero::after, .privado .precio-activo .dinero::after { font-size: 0.6em; vertical-align: middle; }

/* ----------------------------------------------------------------- Pantallas */
.mes { display: flex; align-items: center; gap: 2px; }
.mes span { min-width: 92px; text-align: center; font-size: 15px; font-weight: 600; text-transform: capitalize; }
.mes .boton-redondo { width: 40px; height: 40px; box-shadow: none; background: transparent; }

.categoria { display: flex; flex-direction: column; gap: 6px; }
.categoria .linea { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.categoria .linea span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.categoria .nombre { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.categoria .cat-mini { width: 18px; height: 18px; flex: none; color: var(--texto-2); }
.categoria .barra-progreso > span { background: var(--serie-1); }
.categoria.suelta .barra-progreso > span { background: var(--texto-3); }
.categoria.suelta .nombre { color: var(--aviso); }
.categoria.suelta .cat-mini { color: var(--aviso); }
.categoria .linea span:last-child { font-weight: 600; flex: none; }
.categorias { display: flex; flex-direction: column; gap: 14px; }

.precio-activo { display: flex; flex-direction: column; gap: 6px; }
.precio-activo small { font-size: 13px; color: var(--texto-2); }
.precio-activo h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
/* El activo con su logo (o sus iniciales, como en la lista) a la izquierda y
   el nombre con su línea debajo: la cifra no baja. 44 px, radio 12 (10/38). */
.nombre-activo { display: flex; align-items: center; gap: 12px; }
.nombre-activo .icono { width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.nombre-activo > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.precio-activo .precio { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.precio-activo .precio strong { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }

.pie-version { text-align: center; font-size: 12px; color: var(--texto-2); padding: 8px 0; }

/* Movimientos: buscar, elegir varios y editar */
.buscador {
  width: 100%; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  background: var(--tarjeta); font-size: 16px;
}
.buscador:focus { outline: none; border-color: var(--acento); }
.marca-eleccion {
  width: 24px; height: 24px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--borde); background: var(--tarjeta); color: var(--sobre-acento);
  transition: background 120ms, border-color 120ms;
}
.marca-eleccion.si { background: var(--acento); border-color: var(--acento); }
.marca-eleccion svg { width: 14px; height: 14px; }
.barra-eleccion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 36;
  padding: 10px var(--hueco) calc(var(--abajo) + 10px);
  background: color-mix(in srgb, var(--tarjeta) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  border-top: 1px solid var(--borde);
}
.barra-eleccion-dentro { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 8px; }
.barra-eleccion-dentro > span { flex: 1; font-size: 14px; font-weight: 600; }
.barra-eleccion .boton { min-height: 44px; padding: 0 14px; }
.pantalla.con-barra-eleccion { padding-bottom: calc(var(--abajo) + 96px); }
.campo .textos-campo, .textos-campo {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  font-size: 14px; color: var(--texto); padding: 10px 0;
}
.textos-campo small { font-size: 12px; color: var(--texto-2); }
.fila-flex > .textos-campo { padding: 0; }
.fila-flex > .textos-campo strong { overflow-wrap: anywhere; }

/* Listas dentro de una tarjeta, sin sombra propia */
.tarjeta .lista.plana, .tarjeta .campos.plana { box-shadow: none; background: var(--tarjeta-2); border-radius: var(--radio-sm); }
.tarjeta .campos.plana .campo + .campo { border-top-color: var(--borde); }
.fila.compacta { min-height: 48px; padding: 8px 16px; }
/* minmax(0, 1fr): en WebKit un li de un grid no encoge por debajo de su contenido y la URL se salía de la tarjeta. */
.pasos { margin: 0; padding-left: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pasos .mono { overflow-wrap: anywhere; }
/* La fila de Atajos dibujada: nombre a la izquierda, valor a la derecha; la variable, en acento como en iOS */
.atajo-filas { margin-top: 8px; background: var(--tarjeta-2); border-radius: var(--radio-sm); }
.atajo-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; min-height: 36px; padding: 6px 12px; font-size: 15px; }
.atajo-fila + .atajo-fila { border-top: 1px solid var(--borde); }
.atajo-valor { color: var(--texto-2); overflow-wrap: anywhere; }
.atajo-valor.variable { color: var(--acento); font-weight: 600; }
.pasos .boton { margin-top: 8px; }
.desplegable summary {
  list-style: none; cursor: pointer; min-height: 44px;
  display: flex; align-items: center; color: var(--acento); font-size: 14px; font-weight: 600;
}
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::after { content: ''; width: 7px; height: 7px; margin-left: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform 160ms; }
.desplegable[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.desplegable .lista { background: var(--tarjeta-2); border-radius: var(--radio-sm); }
.desplegable .fila + .fila { border-top-color: var(--borde); }

/* Claves personales (#132): la clave se enseña una vez; se copia o se selecciona entera */
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.92em; }
pre.mono { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.clave-secreta {
  display: block; font-size: 15px;
  word-break: break-all; user-select: all; -webkit-user-select: all;
  background: var(--tarjeta-2); border-radius: var(--radio-xs); padding: 12px;
}
.clave-nueva { animation: aparecer 150ms ease both; }
.clave-nueva > .titulo { font-size: 15px; font-weight: 600; }
.clave-nueva .ayuda svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.clave-nueva > .enlace { align-self: flex-end; min-height: 44px; padding: 0 8px; margin-right: -8px; }
.fila.plegada {
  height: 0 !important; min-height: 0; padding-top: 0; padding-bottom: 0; border: 0; opacity: 0; overflow: hidden;
  transition: all 200ms var(--curva);
}
.pie-fijo {
  position: sticky; bottom: calc(-28px - var(--abajo)); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 0 calc(-1 * var(--hueco)) calc(-28px - var(--abajo));
  padding: 12px var(--hueco) calc(var(--abajo) + 16px);
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}

/* Lino leyendo: respira, nada más (sin spinner) */
.lino.respira { animation: respira 2.6s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes respira { 0%, 100% { transform: none; } 50% { transform: translateY(-4px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .lino.respira { animation: none; } }

/* FinBot: foto, nota de voz y tarjetas que se revisan */
.finbot-marca {
  width: 56px; height: 56px; border-radius: 18px; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--acento-suave); color: var(--acento);
}
.finbot-marca svg { width: 28px; height: 28px; }
.compositor .boton-redondo.suave { background: var(--tarjeta); color: var(--texto-2); border: 1px solid var(--borde); }
.compositor .boton-redondo:disabled { opacity: 0.45; }
.adjunto {
  max-width: 560px; margin: 0 auto 8px;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 6px; border-radius: var(--radio-sm);
  background: var(--tarjeta); border: 1px solid var(--borde);
  font-size: 13px; color: var(--texto-2);
}
.miniatura { flex: none; padding: 0; border: 0; background: none; border-radius: var(--radio-xs); overflow: hidden; }
.adjunto .miniatura img { width: 44px; height: 44px; object-fit: cover; }
.foto-grande {
  display: block; width: 100%; max-height: 62dvh; object-fit: contain;
  border-radius: var(--radio); background: var(--tarjeta-2);
}
.adjunto span { flex: 1; min-width: 0; }
.adjunto .boton-redondo { width: 44px; height: 44px; box-shadow: none; background: transparent; color: var(--texto-2); }
.grabacion { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 8px; }
.grabando {
  flex: 1; min-width: 0; min-height: 44px;
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-radius: 22px; background: var(--tarjeta); border: 1px solid var(--acento);
}
.punto-rec { width: 10px; height: 10px; border-radius: 5px; background: var(--acento); flex: none; animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.grabando .tiempo { font-size: 15px; font-weight: 600; min-width: 38px; }
.onda { flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.onda i { flex: 1; max-width: 4px; height: 100%; border-radius: 2px; background: var(--acento); transform: scaleY(0.12); transition: transform 90ms linear; }
.pie-cupo { max-width: 560px; margin: 6px auto 0; font-size: 12px; color: var(--texto-2); text-align: center; }
.burbuja .miniatura.foto { display: block; margin-bottom: 6px; border-radius: 12px; }
.burbuja .miniatura.foto img { width: 100%; max-width: 220px; max-height: 260px; object-fit: cover; }
.etiqueta-voz, .etiqueta-foto {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  font-size: 12px; font-weight: 600; opacity: 0.85;
}
.etiqueta-voz svg, .etiqueta-foto svg { width: 14px; height: 14px; }
.sugerencias { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sugerencias .chip { white-space: normal; text-align: left; padding: 8px 14px; height: auto; }
.tarjeta-accion { gap: 12px; padding: 14px 0 12px; }
.tarjeta-accion > * { margin: 0 14px; }
.tarjeta-accion > .lista { margin: 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.tarjeta-accion .cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tarjeta-accion .cabeza strong { font-size: 15px; }
.tarjeta-accion .fila { min-height: 56px; }
.tarjeta-accion .fila .titulo.envuelve { white-space: normal; }
.tarjeta-accion .fila .chevron { width: 16px; height: 16px; }
.fila-doble { display: flex; align-items: stretch; }
.fila-doble + .fila-doble { border-top: 1px solid var(--linea); }
.fila-doble > .fila { flex: 1; min-width: 0; }
.fila-doble > .boton-redondo { align-self: center; margin-right: 8px; box-shadow: none; background: transparent; color: var(--texto-2); }
.fila-doble.actual > .fila .titulo { color: var(--acento); }
.fila-doble.fuera > .fila { opacity: 0.45; }
.fila-doble.fuera > .fila .titulo { text-decoration: line-through; }
.boton-marca { flex: none; width: 48px; border: 0; background: none; display: flex; align-items: center; justify-content: flex-end; padding: 0; }
.fila-doble .boton-marca + .fila { padding-left: 12px; }
.tarjeta-accion .notas { padding-left: 18px; font-size: 13px; color: var(--texto-2); display: flex; flex-direction: column; gap: 4px; }
.tarjeta-accion .estado { font-size: 13px; color: var(--texto-2); }
.pie-tarjeta { display: flex; flex-direction: column; gap: 10px; }
.pie-tarjeta .total { display: flex; justify-content: space-between; font-size: 14px; color: var(--texto-2); }
.pie-tarjeta .total strong { color: var(--texto); font-size: 15px; }
.tarjeta-accion > .enlace { align-self: flex-start; }

/* -------------------------------------------------------------- Utilidades */
.fila-flex { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alineado-der { text-align: right; }
.texto-2 { color: var(--texto-2); }
.pequeno { font-size: 13px; }
.grueso { font-weight: 600; }
.centro { text-align: center; }

@media (min-width: 720px) {
  :root { --hueco: 32px; }
}

/* ===== Movimientos densos y deslizar (#161) ================================
   Bloque propio para no chocar con otros cambios de este fichero. */
.lista-movimientos { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--hueco)); }
.grupo-dia {
  position: sticky; top: 40px; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--hueco) 6px;
  background: color-mix(in srgb, var(--fondo) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 13px; font-weight: 600; color: var(--texto-2); text-transform: uppercase;
}
.grupo-dia .neto { font-variant-numeric: tabular-nums; }
/* Movimientos: lo apuntado con fecha posterior a hoy, atenuado y con su
   pastilla «Previsto» (aún no ha pasado: no es gastado). */
.fila.previsto-fila .titulo, .fila.previsto-fila .valor strong { color: var(--texto-2); }
.fila.previsto-fila .valor .pastilla { margin-top: 2px; padding: 2px 8px; font-size: 12px; }
.fila.mov { min-height: 56px; height: 56px; padding: 8px var(--hueco); gap: 12px; background: var(--fondo); }
.fila.mov + .fila.mov { border-top: 0; }
/* Marca, concepto del banco y categoría: tres líneas que en 56 px se cortaban
   (la j de «Tarjeta», la p de «Supermercado»). Alto según la letra. */
.fila.mov.tres-lineas { height: auto; min-height: 72px; }
.dia > [data-id] { position: relative; }
.dia > [data-id] + [data-id]::before { content: ''; position: absolute; z-index: 2; top: 0; left: calc(var(--hueco) + 44px); right: 0; height: 1px; background: var(--linea); }
/* Cuadrado redondeado como en el resto de listas (10/38 → 8/32): con logos, un
   círculo cortaba las esquinas de los que llegan al borde (docs/logos.md). */
.fila.mov .icono { width: 32px; height: 32px; border-radius: 8px; }
.fila.mov .titulo { font-size: 15px; font-weight: 500; }
.fila.mov .sub { font-size: 13px; }
.fila.mov .valor strong { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sin-categoria { color: var(--aviso); }
.desliza { position: relative; overflow: hidden; }
.desliza-fila { position: relative; z-index: 1; touch-action: pan-y; will-change: transform; }
.desliza-accion {
  /* Sin padding: con el del botón medía 12 px en reposo y asomaba por los
     bordes bajo una fila de alto no entero (las de tres líneas). */
  position: absolute; top: 0; bottom: 0; width: 0; padding: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; color: var(--sobre-acento); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.desliza-accion svg { width: 18px; height: 18px; flex: none; }
.desliza-accion.izq { right: 0; background: var(--baja); }
.desliza-accion.der { left: 0; background: var(--acento); }
.desliza.colapsa, .fila.mov.colapsa { height: 0 !important; min-height: 0; overflow: hidden; transition: height 180ms var(--curva); }
.vacio-lista { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 0; text-align: center; }
.esqueleto-filas { display: flex; flex-direction: column; }
.esqueleto-fila { display: flex; align-items: center; gap: 12px; height: 56px; }
.esqueleto-fila .esqueleto.redondo { width: 32px; height: 32px; border-radius: 16px; flex: none; }
.esqueleto-fila .lineas { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.fila.actual .titulo { color: var(--acento); }
.fila.actual .chevron { color: var(--acento); }
.hoja .hoja-cabecera .accion-hoja { justify-self: end; font-weight: 600; }
.recibo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 16px; text-align: center; }
.recibo .icono { width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: var(--tarjeta-2); }
.recibo .concepto { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.recibo .importe-grande { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.campo .etiqueta { width: 96px; flex: none; font-size: 14px; color: var(--texto-2); }
.campo .dato { flex: 1; min-width: 0; text-align: right; overflow-wrap: anywhere; }
button.campo { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.campo .chevron { width: 18px; height: 18px; color: var(--texto-3); flex: none; }
@media (prefers-reduced-motion: reduce) {
  .desliza-fila, .desliza-accion, .desliza.colapsa, .fila.mov.colapsa { transition: none !important; }
}
/* ===== fin de Movimientos densos ========================================== */

/* ===== Tu semana (#163) ==================================================== */
.resumen-semana > .seccion > p { margin: 0; }
.protagonista { margin: 2px 0; font-size: 40px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--texto); }
.protagonista-texto { margin: 6px 0 2px; font-size: 22px; font-weight: 600; color: var(--texto); }
/* ===== fin de Tu semana ===================================================== */

/* ===== Bancos (#153) ======================================================= */
.bancos .bancos-url { display: block; overflow-wrap: anywhere; font-size: 13px; padding: 8px 0; }
.bancos .bancos-form { display: grid; gap: 12px; margin-top: 12px; }
.bancos .bancos-pem { display: grid; gap: 8px; }
.bancos .bancos-pem > label:first-child { font-size: 14px; color: var(--texto-2); }
.bancos .bancos-pem textarea {
  width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px; font-size: 12px;
  background: var(--tarjeta-2); border: 1px solid var(--borde); border-radius: var(--radio-sm);
}
.bancos .bancos-pem textarea:disabled { opacity: 0.5; }
.bancos .bancos-conexion + .bancos-conexion { margin-top: 12px; }
.bancos .bancos-cuenta { border-top: 1px solid var(--linea); }
.bancos .bancos-ligar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px;
}
.bancos .bancos-ligar select {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 8px;
  background: var(--tarjeta-2); border: 1px solid var(--borde); border-radius: var(--radio-sm);
}
.bancos .bancos-acciones {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--linea);
}
.bancos .bancos-acciones .boton { flex: 1; min-width: 0; }
.bancos .bancos-error { padding: 0 16px; color: var(--baja); }
.bancos .enlace.peligro { color: var(--baja); }
.bancos .interruptor:disabled { opacity: 0.4; }
.bancos .bancos-id { overflow-wrap: anywhere; }
.bancos .seccion > .boton.ancho { margin-top: 12px; }
.bancos-buscar {
  width: 100%; min-height: 44px; padding: 0 12px; margin-bottom: 8px;
  background: var(--tarjeta-2); border: 1px solid var(--borde); border-radius: var(--radio-sm);
}
/* ===== fin de Bancos ======================================================= */

/* ===== Gráficos de la app (grafico.js) ======================================
   Bloque propio. Todo por token: las mismas reglas valen en claro, oscuro y
   azul/naranja. Ver docs/app-movil-enganche.md para el porqué de cada uno. */
.grafico .linea-extra { fill: none; stroke: var(--texto-3); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linecap: round; }
.grafico .linea-extra.coste { stroke: var(--texto-2); }
/* Tu precio medio y su leyenda: fuera en cuanto se cierra el ojo, aunque la
   ficha siga pintada de antes (activo.js la redibuja después). */
.privado .grafico .linea-extra.privada, .privado .solo-sin-privado { display: none; }
.grafico .referencia { stroke: var(--texto-3); stroke-width: 1; stroke-dasharray: 2 3; }
.grafico-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--texto-2); }
/* Tu semana: los recibos fijos en su fila, debajo de las barras y fuera de su escala. */
.tarjeta.seccion .fijos-semana { border-top: 1px solid var(--linea); }
.tarjeta.seccion .fijos-semana .fila { padding-inline: 0; }
.grafico-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-leyenda i { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--acento); }
.grafico-leyenda i.discontinua { border-top: 2px dashed var(--texto-3); }
.grafico-leyenda i.coste { border-top-color: var(--texto-2); }

/* El patrimonio, dentro de la tarjeta oscura: la línea en el color del texto
   del bloque (no verde ni rojo: la evolución es un dato, no un juicio). */
.hero.con-grafico { gap: 10px; }
.hero .hero-enlace { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
.hero .hero-enlace:active { opacity: 0.92; }
.hero .grafico .linea-precio { stroke: var(--hero-texto); stroke-width: 1.8; }
.hero .grafico .area-precio { fill: var(--hero-texto); opacity: 0.07; }
.hero .grafico .rejilla { stroke: var(--hero-linea); }
.hero .grafico .cursor { stroke: var(--hero-texto-2); }
.hero .grafico .cursor-punto { fill: var(--hero-texto); stroke: var(--hero); }
.hero .grafico-dato { color: var(--hero-texto-2); font-size: 12px; min-height: 16px; }
.hero .rangos button { background: var(--hero-linea); color: var(--hero-texto-2); min-height: 44px; }
.hero .grafico-eje-y, .hero .grafico-eje-x, .hero .grafico-pista { color: var(--hero-texto-2); }
.hero .rangos button[aria-pressed="true"] { background: var(--hero-texto); color: var(--hero); }
.privado .hero .grafico-dato .dinero::after { color: var(--hero-texto-2); }

/* Anillo (en qué se va, reparto por bloque, objetivos) */
.anillo { position: relative; flex: none; }
.anillo svg { display: block; }
.anillo .anillo-fondo { fill: none; stroke: var(--tarjeta-2); }
.anillo .anillo-tramo { fill: none; }
.anillo-centro {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 22px; line-height: 1.15;
}
.anillo-centro strong { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
/* Una cifra larga en el centro («1.234.567 €») no cabe a 18 px dentro del aro. */
.anillo-centro strong.largo { font-size: 14px; }
.anillo-centro small { font-size: 12px; color: var(--texto-2); }
/* Tocar el anillo de Finanzas abre «En qué se va» en burbujas. */
button.anillo-boton { padding: 0; border: 0; background: none; color: inherit; border-radius: 50%; }
button.anillo-boton:active { opacity: 0.7; }

/* «En qué se va» en burbujas (grafico.js, burbujas()). El área de cada
   burbuja es lo gastado; lo que se sale de lo normal va en ocre y con su
   insignia (flecha y signo: nunca solo el color). Son botones de 44 px como
   poco: el radio mínimo lo pone el empaquetado, que tampoco deja que nada se
   pise. «Sin categoría», con borde discontinuo y el nombre en --aviso. */
.burbujas { position: relative; width: 100%; }
.burbuja {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0; border: 1px solid var(--borde); border-radius: 50%;
  background: var(--tarjeta); color: var(--texto); text-align: center; line-height: 1.1;
  font-variant-numeric: tabular-nums; transition: transform 120ms var(--curva);
}
.burbuja:active { transform: scale(0.96); }
.burbuja.otras { background: var(--tarjeta-2); }
.burbuja.suelta { border: 1.5px dashed var(--texto-3); }
.burbuja.aviso { background: var(--aviso-suave); border: 1.5px solid var(--aviso); }
.burbuja svg { width: 20px; height: 20px; flex: none; color: var(--texto-2); }
.burbuja.grande svg { width: 24px; height: 24px; }
.burbuja.minima svg { width: 18px; height: 18px; }
.burbuja.aviso svg { color: var(--aviso); }
.burbuja .inicial { font-size: 14px; font-weight: 700; color: var(--texto-2); }
.burbuja .icono { width: 26px; height: 26px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.burbuja.grande .icono { width: 34px; height: 34px; }
.burbuja.minima .icono { width: 24px; height: 24px; }
.burbuja .icono.logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.burbuja .cifra-burbuja { font-size: 12px; font-weight: 600; white-space: nowrap; }
.burbuja.media .cifra-burbuja { font-size: 14px; }
.burbuja.grande .cifra-burbuja { font-size: 17px; letter-spacing: -0.01em; }
.burbuja .nombre-burbuja {
  max-width: 78%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 500; color: var(--texto-2);
}
.burbuja.grande .nombre-burbuja { font-size: 12px; }
.burbuja.suelta .nombre-burbuja { color: var(--aviso); }
.privado .burbuja .dinero::after { font-size: 11px; }
.insignia-burbuja {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  height: 20px; padding: 0 8px; border-radius: 10px;
  background: var(--aviso); color: var(--tarjeta);
  font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none;
}
.burbuja .insignia-burbuja svg, .insignia-burbuja svg { width: 12px; height: 12px; color: inherit; }
.burbuja .insignia-burbuja { margin-top: 2px; }
/* La de fuera, encima de su burbuja, con un borde del color del fondo para
   que se lea separada del círculo. */
.insignia-burbuja.fuera { position: absolute; outline: 2px solid var(--fondo); }
.burbujas .entra { animation: burbuja-entra 220ms var(--curva) backwards; }
.burbujas .entra { animation-delay: var(--retraso, 0ms); }
@keyframes burbuja-entra { from { opacity: 0; transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) {
  .burbuja, .burbujas .entra { animation: none; transition: none; }
}
.resumen-burbujas { display: flex; flex-direction: column; gap: 4px; }
.resumen-burbujas strong { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
.resumen-burbujas .linea-normal { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.resumen-burbujas .pastilla, .lista-burbujas .pastilla { padding: 2px 8px; font-size: 12px; }
.leyenda-burbujas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.leyenda-burbujas span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-burbujas i { width: 12px; height: 12px; border-radius: 50%; background: var(--aviso-suave); border: 1.5px solid var(--aviso); }
.lista-burbujas .valor { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.lista-burbujas .titulo.suelta { color: var(--aviso); }

.reparto-anillo { display: flex; align-items: center; gap: 18px; }
.reparto-anillo .leyenda-lista { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.leyenda-lista .elemento { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; }
.leyenda-lista .elemento i { width: 10px; height: 10px; border-radius: 5px; }
.leyenda-lista .elemento .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leyenda-lista .elemento .cat-mini { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--texto-2); }
.leyenda-lista .elemento .nombre.suelta { color: var(--aviso); }
.leyenda-lista .elemento .valor { font-weight: 600; text-align: right; }
.leyenda-lista .elemento small { display: block; font-weight: 400; font-size: 11px; color: var(--texto-2); }

/* Barras por mes */
.barras { display: flex; flex-direction: column; gap: 6px; }
.barras-lienzo { position: relative; touch-action: pan-y; }
.barras-lienzo svg { display: block; width: 100%; height: 100%; }
.barras .barra-mes { fill: var(--serie-4); }
.barras .barra-mes.elegida { fill: var(--serie-2); }
.barras .barra-mes.actual { fill: var(--acento); }
.barras .referencia { stroke: var(--texto-2); stroke-width: 1.2; stroke-dasharray: 4 4; }
.barras .rejilla { stroke: var(--linea); }
.barras-ejes { display: flex; font-size: 11px; color: var(--texto-2); }
.barras-ejes span { flex: 1; text-align: center; min-width: 0; }
.barras-ejes span.actual { color: var(--texto); font-weight: 600; }

/* Progreso con marcas: hitos (25/50/75 %) y «dónde deberías ir hoy» */
.progreso { position: relative; }
.progreso .hito { position: absolute; top: 0; width: 2px; height: 8px; margin-left: -1px; background: var(--tarjeta); }
.progreso .marca-hoy {
  position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px;
  background: var(--texto);
}
.meta-cercana { font-size: 13px; color: var(--texto-2); }
.meta-cercana strong { color: var(--texto); font-weight: 600; }
/* «¿Cuándo llego?» en la hoja de un objetivo. */
.cuando-llego { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.proyeccion { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.proyeccion-titular { font-size: 16px; }
.proyeccion-titular strong { font-weight: 600; }
.objetivo-ficha { display: flex; flex-direction: column; gap: 10px; width: 100%; border: 0; text-align: left; color: inherit; }
.objetivo-ficha .cabeza { display: flex; align-items: center; gap: 14px; }
.objetivo-ficha .anillo-centro { padding: 0 8px; }
.objetivo-ficha .anillo-centro strong { font-size: 14px; }
.objetivo-ficha .textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.objetivo-ficha .titulo { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.objetivo-ficha .sub { font-size: 13px; color: var(--texto-2); }
.anillo.progreso-anillo .anillo-tramo { stroke: var(--acento); }
.anillo.progreso-anillo.hecho .anillo-tramo { stroke: var(--sube); }

/* Barras agrupadas por mes (lo que entra, lo que sale, lo que inviertes) */
.barras .barra-serie { fill: var(--serie-4); transition: opacity 150ms ease; }
.barras .barra-serie.s1 { fill: var(--serie-1); }
.barras .barra-serie.s2 { fill: var(--serie-2); }
.barras .barra-serie.s3 { fill: var(--serie-3); }
.barras .barra-serie.apagada { opacity: 0.3; }
.grafico-leyenda i.cuadro { width: 10px; height: 10px; border: 0; border-radius: 3px; }
.grafico-leyenda i.cuadro.s1 { background: var(--serie-1); }
.grafico-leyenda i.cuadro.s2 { background: var(--serie-2); }
.grafico-leyenda i.cuadro.s3 { background: var(--serie-3); }
.grafico-leyenda i.cuadro.acento { background: var(--acento); }
.grafico-leyenda i.cuadro.gris { background: var(--serie-4); }
.historia-categoria { display: flex; flex-direction: column; gap: 14px; }
.subtitulo-hoja { margin: 4px 0 -6px; font-size: 15px; font-weight: 600; }

/* Dos barras por fila: esta semana frente a la pasada */
.comparadas { display: flex; flex-direction: column; gap: 14px; }
.comparada { display: flex; flex-direction: column; gap: 5px; }
.comparada-cabeza { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.comparada-cabeza .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comparada-cabeza strong { font-weight: 600; }
.comparada-cabeza .cat-mini { width: 18px; height: 18px; flex: none; color: var(--texto-2); }
.comparada-barras { display: flex; flex-direction: column; gap: 3px; }
.comparada-barras .pista { height: 6px; border-radius: 3px; overflow: hidden; }
.comparada-barras .pista span { display: block; height: 100%; border-radius: 3px; }
.comparada-barras .ahora { background: var(--acento); }
.comparada-barras .antes { background: var(--serie-4); }
.comparada-barras small { font-size: 12px; color: var(--texto-2); }

/* Mini gráfico de una fila (Cartera) */
.mini { display: inline-flex; flex: none; }
/* Posiciones de Cartera: con el mini gráfico al lado, el nombre («iShares
   Core MSCI World UCITS ETF…») se cortaba a las 12 letras. Va en dos líneas,
   y el hueco entre columnas es más corto. */
.fila.posicion { gap: 10px; }
.fila.posicion .titulo {
  white-space: normal; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
/* Qué es cada cifra de la columna de la derecha (Cartera › Posiciones). */
.lista-cabecera { padding: 8px var(--hueco) 0; text-align: right; font-size: 11px; color: var(--texto-2); }
/* Fiscalidad: «Si vendieras todo hoy» y los tramos plegados. */
.si-vendieras p + p { margin-top: 6px; }
/* Selector pequeño dentro de una tarjeta (qué dibujar, repartir por…). */
.rangos.vistas button { flex: 1; min-height: 44px; font-size: 13px; }
.rangos.vistas button[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento); }
.mini svg { display: block; }
.mini .mini-linea { fill: none; stroke: var(--texto-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.mini .mini-punto { fill: var(--texto); }

/* Los datos del ritmo (Finanzas) */
.datos-ritmo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dato-ritmo { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--radio-xs); background: var(--tarjeta-2); min-width: 0; }
.dato-ritmo small { font-size: 11px; color: var(--texto-2); }
.dato-ritmo strong { font-size: 16px; font-weight: 600; }
.dato-ritmo span { font-size: 11px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mayores { display: flex; flex-direction: column; gap: 6px; }
.mayores > small { font-size: 12px; color: var(--texto-2); }
.mayor { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.mayor .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mayor em { font-style: normal; font-size: 12px; color: var(--texto-2); margin-left: 6px; }
.mayor strong { font-weight: 600; }

/* Leyenda del anillo que se toca (cada categoría abre su historia) */
button.elemento { width: 100%; border: 0; background: none; color: inherit; padding: 4px 0; text-align: left; font: inherit; font-size: 13px; }
button.elemento:active { opacity: 0.6; }

/* Celebración de un hito de un objetivo: una línea y Lino, sin confeti */
.hito-celebrado { display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: left; }
.hito-celebrado .lino { width: 44px; height: 44px; flex: none; }
.hito-celebrado p { margin: 0; font-size: 14px; }
.hito-celebrado p strong { font-weight: 600; }
/* Ejes: el máximo y el mínimo escritos sobre su raya, las fechas de inicio y
   fin debajo, y la cifra de las barras que importan. Encima del dibujo y sin
   recibir el dedo (lo recibe el gráfico). */
.grafico-ejes { position: absolute; inset: 0; pointer-events: none; }
.grafico-eje-y {
  position: absolute; left: 0; font-size: 11px; line-height: 12px; color: var(--texto-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.grafico-eje-x {
  position: absolute; left: 0; right: 0; display: flex; justify-content: space-between;
  font-size: 11px; line-height: 18px; color: var(--texto-2);
}
.grafico-pista { display: block; font-size: 12px; color: var(--texto-2); }
.barras-cifra {
  position: absolute; transform: translateX(-50%); font-size: 11px; line-height: 12px; color: var(--texto-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.barras-cifra.actual { color: var(--texto); font-weight: 600; }
.barras-media {
  position: absolute; left: 0; font-size: 11px; line-height: 12px; color: var(--texto-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.privado .grafico-ejes .dinero::after { font-size: 11px; }
/* La cifra de la media, al borde derecho y con el fondo de la tarjeta: que la
   raya discontinua no la cruce (Finanzas › Últimos meses). */
.barras-media.a-la-derecha { left: auto; right: 0; }
/* Backtest: «comprar y no tocar» en la misma gráfica que la estrategia. */
.grafico .linea-extra.comprar-y-no-tocar { stroke: var(--serie-2); }
.grafico-leyenda i.comprar-y-no-tocar { border-top-color: var(--serie-2); }
.barras-media.con-fondo { padding: 0 3px; border-radius: 3px; background: var(--tarjeta); }
/* ===== fin de Gráficos ===================================================== */

/* Jerga que se explica al tocarla (glosario.js): la cifra entera es el botón
   y un «?» pequeño junto a la etiqueta dice que se puede tocar. */
button.cifra.con-termino {
  min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; align-items: flex-start; cursor: pointer;
}
button.cifra.con-termino:active { opacity: 0.6; }
.que-es {
  display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 5px;
  border-radius: 50%; border: 1px solid var(--texto-3); color: var(--texto-2);
  font-size: 10px; font-weight: 700; line-height: 1; vertical-align: 1px;
}
.palabras { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.palabras > small { width: 100%; }
.boton-termino {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--borde); border-radius: 22px; background: var(--tarjeta); color: var(--texto);
  font-size: 13px; font-weight: 500;
}
.boton-termino .que-es { margin-left: 0; }

/* Préstamos: lo pagado con su etiqueta, y lo que queda en capital e intereses */
.prestamo-barra { display: flex; flex-direction: column; gap: 4px; }
.prestamo-barra small { font-size: 12px; }
.prestamo-queda { display: flex; flex-direction: column; gap: 6px; }
.prestamo-queda > small { font-size: 12px; }
/* La tarjeta de un préstamo: el botón que abre la hoja, sin aspecto de botón,
   y debajo la nota de la cifra (o el botón de poner el TIN, a 44 px). */
.prestamo-ficha { display: flex; flex-direction: column; gap: 8px; }
.prestamo-abrir {
  display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left;
}
.prestamo-nota { font-size: 13px; text-align: left; }
button.prestamo-nota { margin-block: -6px; font-weight: 500; }
.barra-apilada { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--tarjeta-2); }
.barra-apilada .capital { background: var(--acento); }
.barra-apilada .intereses { background: var(--serie-4); }
/* Fiscalidad: lo que paga cada tramo del IRPF (19, 21, 23, 27 y 30 %). */
.barra-apilada .tramo-1, .grafico-leyenda i.cuadro.tramo-1 { background: var(--serie-1); }
.barra-apilada .tramo-2, .grafico-leyenda i.cuadro.tramo-2 { background: var(--serie-2); }
.barra-apilada .tramo-3, .grafico-leyenda i.cuadro.tramo-3 { background: var(--serie-3); }
.barra-apilada .tramo-4, .grafico-leyenda i.cuadro.tramo-4 { background: var(--serie-5); }
.barra-apilada .tramo-5, .grafico-leyenda i.cuadro.tramo-5 { background: var(--serie-4); }
.si-vendieras .barras-horizontales { margin-top: 4px; }
.lista-tramos { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--texto-2); }
.lista-tramos li { margin: 2px 0; }

/* Objetivos: la pastilla de si llega a tiempo y la leyenda de las marcas */
.objetivo-ficha .textos .pastilla { align-self: flex-start; margin-top: 4px; }
.leyenda-hitos { margin: -4px 0 0; font-size: 11px; }
.frente-referencia p { margin: 0; }

/* -------------------------------------------------- Zonas táctiles (nov-2026)
 * Lo que se toca mide 44 px aunque se vea más bajo: los textos-botón de las
 * cabeceras crecen sin mover nada (margen negativo). */
.hoja .hoja-cabecera .enlace, .cabecera-apilada .enlace { min-height: 44px; padding-left: 8px; padding-right: 8px; }
.hoja .hoja-cabecera .enlace:first-child { margin-left: -8px; }
.hoja .hoja-cabecera .accion-hoja { margin-right: -8px; }
.seccion-titulo .enlace { min-height: 44px; min-width: 44px; margin: -6px 0; text-align: right; }
button.elemento { min-height: 44px; }
/* Dos botones lado a lado dentro de una tarjeta: «Comprar o vender» se partía
 * en dos líneas en la ficha de un activo a 390 px. */
.botones > .boton { padding-left: 10px; padding-right: 10px; }
/* Una zona que aún no tiene nada (el aviso de una clave recién creada, la
 * franja de estado) no suma el hueco de la columna: dejaba 32 px en blanco. */
.contenido > div:empty { display: none; }
.mes .boton-redondo { width: 44px; height: 44px; }
/* Rangos, chips y segmentados ya miden 44 px de por sí (nov-2026): el
 * ::after que agrandaba la zona sobra, y en una fila que se desliza
 * (.rangos, .chips) hacía aparecer un scroll vertical de 6 px. */

/* La leyenda del anillo: un nombre largo («Restaurantes y bares») se parte
 * en dos líneas en vez de quedarse en «Restauran…». */
.leyenda-lista .elemento .nombre { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; hyphens: auto; }

/* Fase 5: primeros pasos, «Qué ha cambiado», buscar con filtros */
.fila-titulo-lado { display: inline-flex; align-items: center; gap: 12px; }
/* Un enlace dentro de un texto: sin cambiar la línea (va en medio de un
   párrafo), el relleno de arriba y abajo agranda lo que se toca hasta 44 px. */
.enlace-texto {
  color: var(--acento); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  padding: 12px 0; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* «Poner tope ›» en Presupuestos: una pastilla visible dentro de la fila,
   que es la que se toca (44 px o más). */
.pastilla-accion {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 16px;
  background: var(--acento-suave); color: var(--acento); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.vacio-inicio { padding-bottom: 8px; }
.pasos-inicio .fila .icono.acento { color: var(--acento); }
.cambios .fila .titulo { font-weight: 500; line-height: 1.35; }
.guardian-teclado {
  position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0;
  font-size: 16px; border: 0; padding: 0; pointer-events: none;
}
.toast { width: calc(100vw - 32px); max-width: 440px; }
.toast > span { flex: 1; min-width: 0; }
.toast-acciones { display: flex; flex: none; }
.toast .toast-acciones button { min-height: 44px; }
.resumen-busqueda { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13px; color: var(--texto-2); margin: 4px 2px 0; }
.resumen-busqueda strong { color: var(--texto); font-size: 15px; }
.filtro-categoria { display: flex; align-items: center; gap: 8px; }
.buscar-cabeza { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.chips.envuelven { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; }
.chip svg { width: 14px; height: 14px; flex: none; }

/* Calendario de gastos (Finanzas › Calendario): cada día teñido con el acento
 * en cuatro tonos según lo gastado; sin gasto, vacío. Los tonos se mezclan con
 * --tarjeta, así que en oscuro salen solos. El importe va escrito en la celda:
 * nunca solo el color. */
.cal-semana, .cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-semana span { text-align: center; font-size: 11px; font-weight: 600; color: var(--texto-2); }
.cal-dia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 0; min-height: 48px; padding: 2px 0; border: 2px solid transparent; border-radius: var(--radio-xs);
  background: transparent; color: var(--texto); font: inherit; cursor: pointer;
}
.cal-num { font-size: 14px; font-weight: 600; line-height: 1.1; }
.cal-importe { max-width: 100%; overflow: hidden; font-size: 10px; line-height: 1.1; white-space: nowrap; }
.cal-dia.nivel-0 .cal-num { color: var(--texto-2); font-weight: 500; }
.cal-dia.nivel-1, .cal-leyenda .nivel-1 { background: color-mix(in srgb, var(--acento) 16%, var(--tarjeta)); }
.cal-dia.nivel-2, .cal-leyenda .nivel-2 { background: color-mix(in srgb, var(--acento) 36%, var(--tarjeta)); }
.cal-dia.nivel-3, .cal-leyenda .nivel-3 { background: color-mix(in srgb, var(--acento) 62%, var(--tarjeta)); }
.cal-dia.nivel-4, .cal-leyenda .nivel-4 { background: var(--acento); }
.cal-dia.nivel-4 { color: var(--sobre-acento); }
.cal-dia.hoy { border-color: var(--texto); }
.cal-dia[aria-pressed="true"] { outline: 2px solid var(--acento); outline-offset: 1px; }
.cal-dia:disabled { cursor: default; opacity: 0.45; }
.privado .cal-importe.dinero::after { content: '••'; font-size: 10px; }
.cal-leyenda { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11px; color: var(--texto-2); }
.cal-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.cal-leyenda span:first-child { margin-right: 2px; }
.cal-leyenda span:last-child { margin-left: 2px; }
/* Un día que aún no ha llegado con un cargo ya previsto: borde discontinuo y
   el importe en gris, sin tono (todavía no es gasto). */
.cal-dia.previsto { border: 1px dashed var(--texto-2); }
.cal-dia.previsto .cal-importe { color: var(--texto-2); }
.cal-leyenda .cal-previsto { border: 1px dashed var(--texto-2); }
.faltan-previstos { margin-top: 2px; }

/* Ficha de activo: lo que la web enseña de un activo, cada bloque en un
   plegable que se pide al abrirlo (activo-analisis.js). */
.plegable { padding: 0; overflow: hidden; }
.plegable > summary, .plegable > .cabeza {
  list-style: none; display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 12px 16px;
}
.plegable > summary { cursor: pointer; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary > .icono, .plegable > .cabeza > .icono {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--acento-suave); color: var(--acento);
}
.plegable > summary > .icono svg, .plegable > .cabeza > .icono svg { width: 18px; height: 18px; }
.plegable > summary > .textos, .plegable > .cabeza > .textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plegable > summary .titulo, .plegable > .cabeza .titulo { font-size: 15px; font-weight: 600; }
.plegable > summary .sub, .plegable > .cabeza .sub { font-size: 13px; color: var(--texto-2); }
.plegable > summary .chevron { width: 18px; height: 18px; color: var(--texto-3); flex: none; transition: transform 160ms var(--curva); }
.plegable[open] > summary .chevron { transform: rotate(90deg); }
.plegable .cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; min-width: 0; }
.plegable .cuerpo h3 { font-size: 13px; font-weight: 600; color: var(--texto-2); margin-top: 4px; }
.plegable .cuerpo .lista { background: var(--tarjeta-2); border-radius: var(--radio-sm); }
.plegable .cuerpo .fila + .fila { border-top-color: var(--borde); }
.plegable .cuerpo .fila .icono { background: var(--tarjeta); }
.plegable .cuerpo .fila .icono.aviso { background: var(--aviso-suave); color: var(--aviso); }
.plegable .cuerpo .fila .titulo a { color: var(--acento); text-decoration: none; }
.plegable .bloque { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.plegable .bloque + .bloque { border-top: 1px solid var(--linea); padding-top: 12px; }
.plegable .cifra em { white-space: normal; }
.linea-senal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Qué pide la señal, en una línea, bajo la pastilla o el título del grupo. */
.que-pide { margin: 0; font-size: 14px; line-height: 1.45; color: var(--texto); }
.seccion > .que-pide { font-size: 13px; color: var(--texto-2); margin-top: -4px; }
.campo-bloque { display: flex; flex-direction: column; gap: 6px; }
.campo-bloque > .fila-flex { gap: 8px; flex-wrap: wrap; }
.razones { margin: 0; padding-left: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-size: 14px; line-height: 1.45; }
.razones a { color: var(--acento); overflow-wrap: anywhere; }
.parrafo { font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Mercados (Más › Mercados): Oportunidades, Superinversores, Noticias,
 * Resumen diario y Creadores. Tarjetas que se tocan enteras, listas con lo
 * esencial y el detalle al tocar; nada de tablas encogidas. */
.mercados .linea-senal .pastilla { white-space: nowrap; }
.cifra-clave { font-size: 15px; line-height: 1.35; }
.cifra-clave strong { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-right: 2px; }
.nota-mercados { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--texto-2); margin: 0 2px; }
.nota-mercados svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.pie-mercados { margin: 0 2px; line-height: 1.45; }
.chip .cuenta-chip { font-size: 12px; font-weight: 500; color: var(--texto-2); }
.chip[aria-pressed="true"] .cuenta-chip { color: inherit; opacity: 0.75; }
.chip.quieto { color: var(--texto-2); background: transparent; border-style: dashed; }
.texto-aviso { color: var(--aviso); }

/* Una tarjeta que se toca entera (una idea, un gestor) */
.tarjeta.idea {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  border: 0; text-align: left; color: inherit; font: inherit;
}
.tarjeta.idea:active { background: var(--tarjeta-2); }
.idea-cabeza { display: flex; align-items: flex-start; gap: 10px; }
.idea-nombre { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.idea-cabeza .chevron { width: 18px; height: 18px; color: var(--texto-3); flex: none; margin-top: 3px; }
.textos-gestor { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.textos-gestor .sub { font-size: 13px; color: var(--texto-2); }
.idea-texto {
  font-size: 14px; line-height: 1.45; color: var(--texto-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.idea-titulo { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }

/* Bloques dentro de una tarjeta de detalle */
.bloque-mercado { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tarjeta .bloque-mercado + .bloque-mercado, .tarjeta .cifras + .bloque-mercado { border-top: 1px solid var(--linea); padding-top: 14px; }
.bloque-mercado h3, .subtitulo-tarjeta { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.tarjeta .cifras + .subtitulo-tarjeta { border-top: 1px solid var(--linea); padding-top: 14px; }
.franja-suave { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; padding: 10px 12px; border-radius: var(--radio-xs); background: var(--aviso-suave); color: var(--texto); }
.franja-suave svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--aviso); }
.lista.plana { background: var(--tarjeta-2); border-radius: var(--radio-sm); }
.lista.plana .fila + .fila { border-top-color: var(--borde); }
.fila .titulo.titulo-largo, .fila .envuelve-texto {
  white-space: normal; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.fila.centrado { justify-content: center; min-height: 48px; color: var(--acento); font-size: 15px; font-weight: 600; }

/* Por qué lo puntúa así: una barra por criterio, con su signo escrito */
.criterios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.criterios li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre valor" "barra barra"; gap: 4px 10px; align-items: center; font-size: 13px; }
.criterio-nombre { grid-area: nombre; min-width: 0; }
.criterios li > .cifra-sube, .criterios li > .cifra-baja, .criterios li > .cifra-igual { grid-area: valor; font-size: 13px; }
.criterio-barra { grid-area: barra; height: 6px; border-radius: 3px; background: var(--tarjeta-2); overflow: hidden; }
.criterio-barra > span { display: block; height: 100%; border-radius: 3px; }
.criterio-barra.sube > span { background: var(--sube); }
.criterio-barra.baja > span { background: var(--baja); }

/* El peso de una posición de un gestor */
.barra-progreso.fina { height: 4px; margin-top: 6px; }
.fila.peso .valor { min-width: 60px; }

/* Noticias */
.noticia { display: flex; flex-direction: column; gap: 8px; }
.noticia-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.noticia-fuente { font-weight: 600; color: var(--texto); }
.noticia-titulo { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
a.noticia-titulo:active { color: var(--acento); }
.noticia-extracto {
  font-size: 14px; line-height: 1.45; color: var(--texto-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.noticia-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.noticia-pie .chips.envuelven { gap: 6px; }
.noticia-pie .chip { min-height: 44px; padding: 0 12px; }
.tonos { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.reparto .tono-sube { background: var(--sube); }
.reparto .tono-baja { background: var(--baja); }
.reparto .tono-neutro { background: var(--texto-3); }

/* Resumen diario: el texto archivado de las 8:00 */
.resumen-archivado { font-size: 12px; line-height: 1.5; padding: 12px; border-radius: var(--radio-xs); background: var(--tarjeta-2); color: var(--texto); }

/* Creadores */
.creador .fila .icono.acento { font-size: 13px; }
.enlaces-creador { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; }
.enlaces-creador .enlace-texto { min-height: 44px; display: inline-flex; align-items: center; }
.creador .lista .fila .icono { background: var(--tarjeta-2); color: var(--texto-2); }
/* Análisis de la cartera (Cartera › Análisis, ¿Vender o mantener?,
   Operaciones, Fiscalidad, Eficacia). */
/* Accesos de Cartera: una fila que se desliza, como los chips, pero son
   enlaces a pantallas (sin aria-pressed). */
.accesos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--hueco)); padding: 0 var(--hueco); }
.accesos::-webkit-scrollbar { display: none; }
.acceso {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: 22px; background: var(--tarjeta); color: var(--texto); text-decoration: none;
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.acceso svg { width: 18px; height: 18px; color: var(--acento); flex: none; }
.acceso:active { background: var(--tarjeta-2); }

/* Distribución de los días: los del 5 % peor en el color de bajar. */
.histograma .cubo { fill: var(--serie-4); }
.histograma .cubo.cola { fill: var(--baja); }
.histograma .cubo.elegido { fill: var(--serie-2); }
.histograma .cubo.cola.elegido { fill: var(--baja); opacity: 0.7; }
.histograma .referencia { stroke: var(--texto-2); stroke-width: 1; stroke-dasharray: 2 3; }
.histograma-ejes { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-2); }

/* Riesgo y rentabilidad de cada posición: puntos en el acento. */
.dispersion { display: flex; flex-direction: column; gap: 4px; }
.dispersion-lienzo { position: relative; touch-action: pan-y; }
.dispersion-lienzo svg { width: 100%; height: 100%; overflow: visible; }
.dispersion .rejilla { stroke: var(--linea); stroke-width: 1; }
.dispersion .referencia { stroke: var(--texto-3); stroke-width: 1; stroke-dasharray: 2 3; }
.dispersion .punto { fill: var(--acento); fill-opacity: 0.28; stroke: var(--acento); stroke-width: 1.5; }
.dispersion .punto.elegido { fill-opacity: 0.85; }
.dispersion-eje-y, .dispersion-eje-x { font-size: 11px; color: var(--texto-2); }
.dispersion-eje-x { align-self: flex-end; }

/* Los meses: seis por fila, cada uno con su rendimiento escrito (nunca solo
   el color). Tres tonos de subir o de bajar, mezclados con la tarjeta para
   que el texto se lea igual en claro y en oscuro. */
.ano-meses { display: flex; flex-direction: column; gap: 6px; }
.ano-meses + .ano-meses { margin-top: 6px; }
.ano-meses h3 { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.mapa-meses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.mes-celda {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 46px; padding: 4px 2px; border: 1px solid transparent; border-radius: var(--radio-xs);
  background: var(--tarjeta-2); color: var(--texto); font: inherit;
}
.mes-celda small { font-size: 11px; color: var(--texto-2); }
.mes-celda strong { font-size: 13px; font-weight: 600; }
.mes-celda.vacia { background: transparent; border-color: var(--linea); }
.mes-celda.vacia strong { color: var(--texto-2); font-weight: 400; }
.mes-celda.parcial { border-style: dashed; border-color: var(--texto-3); }
.mes-celda.sube-1 { background: color-mix(in srgb, var(--sube) 14%, var(--tarjeta)); }
.mes-celda.sube-2 { background: color-mix(in srgb, var(--sube) 28%, var(--tarjeta)); }
.mes-celda.sube-3 { background: color-mix(in srgb, var(--sube) 44%, var(--tarjeta)); }
.mes-celda.baja-1 { background: color-mix(in srgb, var(--baja) 14%, var(--tarjeta)); }
.mes-celda.baja-2 { background: color-mix(in srgb, var(--baja) 28%, var(--tarjeta)); }
.mes-celda.baja-3 { background: color-mix(in srgb, var(--baja) 44%, var(--tarjeta)); }
.mes-celda[aria-pressed="true"] { outline: 2px solid var(--acento); outline-offset: 1px; }

/* Barra que sale del centro: a la derecha lo que suma, a la izquierda lo que
   resta (qué mueve tu rentabilidad). */
.aporta { display: flex; flex-direction: column; gap: 6px; }
.aporta .linea { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; }
.aporta .linea .nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aporta .linea .cifra-sube, .aporta .linea .cifra-baja, .aporta .linea .cifra-igual { flex: none; }
.aporta.sin-precio .linea > .texto-2 { flex: none; font-size: 13px; }
.pista-doble { position: relative; height: 8px; border-radius: 4px; background: var(--tarjeta-2); }
.pista-doble::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--texto-3); }
.pista-doble > span { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.pista-doble > span.sube { left: 50%; background: var(--sube); }
.pista-doble > span.baja { right: 50%; background: var(--baja); }
.lista-aporta { display: flex; flex-direction: column; }
.lista-aporta > button { border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 10px 0; min-height: 44px; }
.lista-aporta > button + button { border-top: 1px solid var(--linea); }

/* Un escenario: qué pasa, cuánto perderías y en cuánto quedaría. */
.escenario { display: flex; flex-direction: column; gap: 8px; }
.escenario + .escenario { border-top: 1px solid var(--linea); padding-top: 14px; }
.escenario .linea { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.escenario .linea strong { font-size: 15px; font-weight: 600; min-width: 0; }
.escenario .linea .cifra-baja, .escenario .linea .cifra-sube, .escenario .linea .cifra-igual { flex: none; }

/* La cifra protagonista de una pestaña, con su explicación al lado. */
.cabeza-cifra { display: flex; flex-direction: column; gap: 4px; }
.cabeza-cifra .protagonista { font-size: 36px; }
.cabeza-cifra .protagonista .cifra-sube svg, .cabeza-cifra .protagonista .cifra-baja svg { width: 0.7em; height: 0.7em; }
/* ---------------------------------------------------------- Herramientas
   Calculadoras, Diario, Trading en papel, Alertas, Aprender y Backtest. */

/* Una cifra que se mueve con el dedo o se escribe (calculadoras.js) */
.campos.deslizantes { gap: 0; }
.deslizante { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 8px; }
.deslizante + .deslizante { border-top: 1px solid var(--linea); }
.deslizante .cabeza { display: flex; align-items: center; gap: 12px; }
.deslizante label { flex: 1; min-width: 0; font-size: 14px; color: var(--texto-2); }
/* El «?» de un término junto a la etiqueta: solo el círculo, con 44 px para el dedo. */
.deslizante .cabeza .boton-termino { min-width: 44px; padding: 0; margin: -6px auto -6px -8px; justify-content: center; border: 0; background: none; }
.deslizante .cabeza label:has(+ .boton-termino) { flex: 0 1 auto; }
.deslizante .valor-campo {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  min-height: 44px; padding: 0 12px; border-radius: var(--radio-xs); background: var(--tarjeta-2);
}
.deslizante .valor-campo:focus-within { box-shadow: 0 0 0 2px var(--acento); }
.deslizante input[type="text"] {
  width: 8ch; min-width: 0; border: 0; background: transparent; padding: 0;
  font-size: 16px; font-weight: 600; text-align: right;
}
.deslizante input[type="text"]:focus { outline: none; }
.deslizante .unidad { font-size: 14px; color: var(--texto-2); }
.rango { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; margin: 0; background: transparent; touch-action: pan-y; }
.rango:focus { outline: none; }
.rango::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--tarjeta-2); }
.rango::-moz-range-track { height: 6px; border-radius: 3px; background: var(--tarjeta-2); }
.rango::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--acento); }
.rango::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px;
  border-radius: 50%; background: var(--acento); border: 3px solid var(--tarjeta);
}
.rango::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--acento); border: 3px solid var(--tarjeta); }
.rango:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--acento-suave); }
.resultado-calc { display: flex; flex-direction: column; gap: 2px; }
.resultado-calc small { font-size: 13px; color: var(--texto-2); }
.resultado-calc strong { font-size: 34px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }

/* Textos largos en hojas (Diario, Trading en papel) */
.campo-texto {
  width: 100%; min-height: 96px; padding: 12px 14px; resize: vertical;
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  background: var(--tarjeta); font-size: 16px; line-height: 1.45;
}
.campo-texto:focus { outline: none; border-color: var(--acento); }
.etiqueta-bloque { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.etiqueta-bloque label { font-size: 14px; color: var(--texto-2); }
.contador { font-size: 12px; color: var(--texto-2); }
.contador.falta { color: var(--aviso); }
.entrada-diario .tesis-corta {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--texto);
}
.veredicto { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.veredicto p { font-size: 15px; }

/* Aprender: lectura cómoda en el móvil */
.lectura { font-size: 16px; line-height: 1.6; gap: 14px; }
.lectura h2 { font-size: 24px; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; }
.lectura h3 { font-size: 19px; line-height: 1.3; font-weight: 600; margin-top: 10px; }
.lectura h4 { font-size: 16px; font-weight: 600; }
.lectura ul, .lectura ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.lectura strong { font-weight: 600; }
.lectura p, .lectura li { overflow-wrap: anywhere; }
.cabeza-lectura { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.nota-lectura { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--radio-sm); background: var(--tarjeta); font-size: 15px; line-height: 1.55; }
.nota-lectura.aviso { background: var(--aviso-suave); }
.nota-lectura.sube { background: var(--sube-suave); }
.nota-lectura .nota-titulo { font-size: 15px; }
.nota-lectura .nota-lectura { padding: 0; background: none; }
.tabla-fichas { display: flex; flex-direction: column; gap: 8px; }
.ficha-fila { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radio-sm); background: var(--tarjeta); font-size: 14px; line-height: 1.45; }
.ficha-fila .par { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 10px; }
.termino { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--radio-sm); background: var(--tarjeta); font-size: 15px; }
.siguiente-capitulo { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; text-align: left; color: inherit; margin-top: 8px; }
.siguiente-capitulo .textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.siguiente-capitulo .chevron { width: 18px; height: 18px; color: var(--texto-3); flex: none; }
.numero-capitulo { font-size: 14px; }
.fila .sub.una-linea { white-space: nowrap; }
.pregunta .enunciado { font-size: 16px; font-weight: 600; line-height: 1.4; }
.pregunta .opciones { display: flex; flex-direction: column; gap: 8px; }
.opcion {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--tarjeta);
  color: var(--texto); font-size: 15px; line-height: 1.35; text-align: left;
}
.opcion svg { width: 18px; height: 18px; flex: none; }
.opcion:disabled { cursor: default; }
.opcion.correcta { border-color: var(--sube); background: var(--sube-suave); color: var(--texto); font-weight: 600; }
.opcion.correcta svg { color: var(--sube); }
.opcion.fallo { border-color: var(--baja); background: var(--baja-suave); color: var(--texto); }
.opcion.fallo svg { color: var(--baja); }
.pregunta .explicacion { font-size: 14px; line-height: 1.5; }

/* Backtest: estrategia elegida como radio */
.fila[role="radio"][aria-checked="true"] .titulo { font-weight: 600; }

/* Finanzas que se pueden usar (nov-2026) */
/* «Patrimonio» y su «?» fuera del enlace a Cuentas; el «?» con los colores del bloque */
.hero .hero-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -10px 0 -8px; }
.hero .boton-termino { min-height: 44px; padding: 0 10px; border-color: var(--hero-linea); background: none; color: var(--hero-texto-2); font-size: 12px; }
.hero .boton-termino .que-es { border-color: var(--hero-texto-2); color: var(--hero-texto-2); }
.cifra-extra { display: flex; flex-direction: column; gap: 3px; }
.acciones-ficha, .ajuste-saldo { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ajuste-saldo .campo label { width: auto; flex: 1; }
.fila-cargo .valor small .dinero { font-weight: 600; }

/* Finanzas más claras (ronda 4, nov-2026) */
/* Lo que tienes y lo que debes: dos barras en la misma escala, por tramos. */
.barras-horizontales { display: flex; flex-direction: column; gap: 14px; }
.barras-horizontales .barra-fila { display: flex; flex-direction: column; gap: 6px; }
.barras-horizontales .barra-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.barras-horizontales .barra-cabeza strong { font-weight: 600; }
.barras-horizontales .barra-apilada > span + span { margin-left: 2px; }
.barras-horizontales.mini { gap: 4px; }
.barras-horizontales.mini .barra-apilada { height: 6px; border-radius: 3px; }
.t-cuentas { background: var(--serie-1); }
.t-inversiones { background: var(--serie-2); }
.t-tarjetas { background: var(--baja); }
.t-prestamos { background: var(--aviso); }
.grafico-leyenda i.cuadro.t-cuentas { background: var(--serie-1); }
.grafico-leyenda i.cuadro.t-inversiones { background: var(--serie-2); }
.grafico-leyenda i.cuadro.t-tarjetas { background: var(--baja); }
.grafico-leyenda i.cuadro.t-prestamos { background: var(--aviso); }
.cuenta-patrimonio { margin: 0; font-size: 14px; color: var(--texto-2); }
.cuenta-patrimonio strong { color: var(--texto); font-weight: 600; }
/* En el bloque oscuro de Inicio, los colores del bloque. */
.hero .barra-apilada { background: var(--hero-linea); }
.hero .t-cuentas { background: var(--hero-texto); }
.hero .t-inversiones { background: var(--hero-texto-2); }
.hero .t-tarjetas, .hero .t-prestamos { background: var(--baja-hero); }
/* La raya de los presupuestos, explicada con una muestra de sí misma. */
.leyenda-raya { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 12px; color: var(--texto-2); }
.leyenda-raya i { display: inline-block; width: 2px; height: 14px; border-radius: 1px; background: var(--texto); flex: none; }
/* Por revisar, por comercio: los botones de cada grupo, lado a lado. */
.grupo-revisar { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.grupo-revisar + .grupo-revisar { border-top: 1px solid var(--linea); }
.grupo-revisar .cabeza { display: flex; align-items: center; gap: 12px; }
.grupo-revisar .cabeza .textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.grupo-revisar .cabeza .titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grupo-revisar .cabeza .sub { font-size: 13px; color: var(--texto-2); }
.grupo-revisar .botones { display: flex; gap: 8px; }
.grupo-revisar .botones .boton { flex: 1; }
.grupo-revisar details summary { font-size: 13px; color: var(--acento); min-height: 44px; display: flex; align-items: center; cursor: pointer; }
/* «Ver el movimiento»: un botón secundario de 44 px, no una palabra suelta. */
.grupo-revisar .ver-movimientos > summary {
  list-style: none; min-height: 44px; padding: 0 14px; border-radius: var(--radio-sm);
  background: var(--tarjeta-2); color: var(--acento); font-size: 14px; font-weight: 600;
  justify-content: space-between;
}
.grupo-revisar .ver-movimientos > summary::-webkit-details-marker { display: none; }
.grupo-revisar .ver-movimientos > summary::after {
  content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-2px); transition: transform 160ms;
}
.grupo-revisar .ver-movimientos[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.grupo-revisar .ver-movimientos[open] > summary { margin-bottom: 8px; }
.botones-columna { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.anadir-activo { margin-top: 10px; }
/* Un nombre largo de la leyenda no se parte con guion («Supermerca-do»). */
.leyenda-lista .elemento .nombre { hyphens: none; overflow-wrap: normal; word-break: normal; }
.hero .desglose { display: flex; flex-direction: column; gap: 6px; }
/* Inicio con la cartera aún calculándose: sin cifra que no es (inicio.js). */
.hero .grande.pendiente { color: var(--hero-texto-2); }
.hero span.desglose { display: block; }
.hero .hero-pendiente { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--hero-texto-2); }
.hero .hero-reintentar { margin-top: 10px; min-height: 44px; }
.hero .ecuacion { margin: 0; font-size: 13px; color: var(--hero-texto-2); }
.hero .ecuacion strong { color: var(--hero-texto); font-weight: 600; }
.texto-sube { color: var(--sube); }
.veredicto-ritmo { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
/* «¿Es dinero que mueves a otra cuenta tuya?»: una pregunta en línea bajo
   una fila o un grupo, con su botón. Se parte en dos líneas si no cabe. */
.pregunta-linea { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; padding: 2px 16px 8px; font-size: 13px; color: var(--texto-2); }
.grupo-revisar .pregunta-linea, .tarjeta.seccion .pregunta-linea { padding-left: 0; padding-right: 0; }
.nota-linea { margin: 0; padding: 0 16px 10px; font-size: 13px; color: var(--texto-2); }
.grupo-revisar .nota-linea { padding: 0; }
/* Las sugerencias de Suscripciones, plegadas bajo la lista. Su propia clase:
   con `.plegable` a secas pisaba los bloques de la ficha de activo (títulos
   en mayúsculas grises y el icono girando al abrir). */
.plegable-sugerencias > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.06em; }
.plegable-sugerencias > summary::-webkit-details-marker { display: none; }
.plegable-sugerencias > summary svg { width: 16px; height: 16px; transition: transform 0.15s; }
.plegable-sugerencias[open] > summary svg { transform: rotate(90deg); }

/* Eficacia: «frente a su índice de referencia» bajo la cifra, tocable y sin
   aspecto de pastilla (la fila ya tiene su marco). */
.fila .valor .boton-termino {
  min-height: 44px; margin: -10px -4px -12px 0; padding: 0 4px; gap: 4px; border: 0; background: none;
  color: var(--texto-2); font-size: 12px; font-weight: 400; text-align: right; max-width: 150px;
}

/* Plan de aportaciones: un cuadrito por mes. Hecha, relleno; no hecha,
   vacío y tachado; pendiente, solo el borde. La inicial del mes debajo. */
.meses-plan { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin: 8px 0 6px; padding: 0; list-style: none; }
.meses-plan .mes-plan { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mes-plan .cuadro { position: relative; display: inline-block; width: 100%; max-width: 22px; aspect-ratio: 1; border-radius: 5px; border: 2px solid var(--acento); background: transparent; overflow: hidden; }
.mes-plan.hecha .cuadro { background: var(--acento); }
.mes-plan.saltada .cuadro { border-color: var(--texto-3); }
.mes-plan.saltada .cuadro::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; border-top: 2px solid var(--texto-3); transform: rotate(-45deg); }
.mes-plan.pendiente .cuadro { border-style: dashed; }
.meses-plan .letra { font-size: 11px; color: var(--texto-2); }
.leyenda-meses { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.leyenda-meses .mes-plan { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-meses .cuadro { width: 12px; border-radius: 3px; }

/* ------------------------------------------- Iconos sin logo, con su tono
 * Lo que no tiene logo lleva el fondo suave de lo que es (iconos.js,
 * tonoIcono). «Sin categoría» se queda en gris. Al final del fichero y con
 * la variante de dentro de un plegable: tiene que ganar a los fondos de cada
 * lista. Una categoría tuya que no se reconoce lleva su inicial. */
.icono.icono-cat.tono-verde, .plegable .cuerpo .fila .icono.icono-cat.tono-verde { background: var(--tono-verde-fondo); color: var(--tono-verde); }
.icono.icono-cat.tono-rosa, .plegable .cuerpo .fila .icono.icono-cat.tono-rosa { background: var(--tono-rosa-fondo); color: var(--tono-rosa); }
.icono.icono-cat.tono-azul, .plegable .cuerpo .fila .icono.icono-cat.tono-azul { background: var(--tono-azul-fondo); color: var(--tono-azul); }
.icono.icono-cat.tono-ambar, .plegable .cuerpo .fila .icono.icono-cat.tono-ambar { background: var(--tono-ambar-fondo); color: var(--tono-ambar); }
.icono.icono-cat.tono-violeta, .plegable .cuerpo .fila .icono.icono-cat.tono-violeta { background: var(--tono-violeta-fondo); color: var(--tono-violeta); }
.icono.icono-cat.tono-turquesa, .plegable .cuerpo .fila .icono.icono-cat.tono-turquesa { background: var(--tono-turquesa-fondo); color: var(--tono-turquesa); }
.icono.icono-cat.tono-acento, .plegable .cuerpo .fila .icono.icono-cat.tono-acento { background: var(--acento-suave); color: var(--acento); }
.icono .inicial { font-size: 15px; font-weight: 700; line-height: 1; }
.fila.mov .icono .inicial { font-size: 14px; }
.inicial.cat-mini { display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--tarjeta-2); font-size: 11px; font-weight: 700; line-height: 1; }

/* La hoja «Categoría»: «Nueva categoría», sus iconos y «Es una devolución de…». */
.elegir-categoria { display: flex; flex-direction: column; gap: 12px; }
.elegir-categoria .aviso-persona { margin: 8px 4px 0; color: var(--aviso); }
.titulo-grupo { margin: 8px 4px 0; font-size: 15px; font-weight: 600; }
.texto-acento { color: var(--acento); }
.rejilla-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; }
.opcion-icono {
  min-height: 48px; border-radius: var(--radio-sm); border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--texto-2); display: flex; align-items: center; justify-content: center;
}
.opcion-icono svg { width: 22px; height: 22px; }
.opcion-icono[aria-pressed="true"] { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); }
/* «Puesta por tu regla de Bizum» y «te devolvieron tu parte», en la ficha. */
.nota-regla { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; margin: 0; padding: 0 16px 12px; font-size: 13px; color: var(--texto-2); }

/* ===== Ficha de activo: círculos de compra y venta que se tocan ==========
   El círculo dibujado mide 10 px; la zona que responde, 44 (un botón
   transparente por círculo, que es también lo que usa el teclado). */
.grafico-marcas { position: absolute; inset: 0; pointer-events: none; }
.marca-toque {
  position: absolute; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.marca-toque:focus-visible { outline: 2px solid var(--acento); outline-offset: -10px; }
.grafico circle.tocable { stroke-width: 2.5; }
/* La fila «Ganado al vender» que llega después (de Fiscalidad) no rompe las rayas de la lista. */
.hueco-fila { display: contents; }

/* ===== Gráficas del análisis profesional (activo-analisis.js) ============= */
.grafica-analisis { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.grafica-analisis .fila-flex { gap: 8px; flex-wrap: wrap; }
.grafica-analisis h3 { margin: 0; }
.grafico .linea-extra.media-50 { stroke: var(--serie-3); }
.grafico .linea-extra.media-200 { stroke: var(--texto-2); stroke-dasharray: 6 3; }
.grafico-leyenda i.media-50 { border-top-color: var(--serie-3); }
.grafico-leyenda i.media-200 { border-top-color: var(--texto-2); }
.rango-anual { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 2px; }
.rango-anual-pista { position: relative; height: 8px; border-radius: 4px; background: var(--tarjeta-2); }
.rango-anual-relleno { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--acento-suave); }
.rango-anual-hoy {
  position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--acento); border: 3px solid var(--tarjeta);
}
.rango-anual-ejes { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.rango-anual-ejes span { display: flex; flex-direction: column; gap: 2px; }
.rango-anual-ejes small { font-size: 11px; color: var(--texto-2); }
.rango-anual-ejes .centro { text-align: center; font-weight: 600; }
.rango-anual-ejes .fin { text-align: right; }

/* ===== Texto del LLM en párrafos, listas y títulos (texto-rico.js) ======== */
.texto-rico { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 12px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.texto-rico p { margin: 0; }
.texto-rico ul, .texto-rico ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.texto-rico .titulo-rico { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.texto-rico .titulo-rico:first-child { margin-top: 0; }
.texto-rico strong { font-weight: 600; }

/* ===== Cuenta sin saldo de partida (falta_saldo, ronda 18) ================ */
.hero .hero-falta-saldo {
  display: flex; align-items: flex-start; gap: 8px; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--hero-linea); border-radius: 12px; background: transparent;
  color: var(--hero-texto); font: inherit; font-size: 13px; line-height: 1.4; text-align: left; cursor: pointer;
}
.hero .hero-falta-saldo svg { flex: none; width: 18px; height: 18px; color: var(--baja-hero); }
.hero .hero-falta-saldo:active { opacity: 0.85; }
.fila .sub.aviso-saldo { color: var(--aviso); font-weight: 600; }
.nota-falta-saldo { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.nota-falta-saldo p { margin: 0; }

/* Suscripciones y recibos: «Suscripciones que podrías cancelar», que filtra
 * la lista (ronda 19). Un texto-botón de 44 px, a lo ancho. */
button.enlace.cancelables { display: block; width: 100%; min-height: 44px; margin-top: 8px; text-align: left; font-size: 14px; }
button.enlace.cancelables[aria-pressed="true"] { text-decoration: underline; }
.reparto-anillo button.elemento[aria-pressed="true"] .nombre { font-weight: 600; text-decoration: underline; }

/* Cartera vacía: dos botones con su línea de ayuda (empezar-cartera.js). */
.empezar-cartera { width: 100%; gap: 12px; margin-top: 10px; }
.opcion-empezar .boton { text-align: center; padding-top: 8px; padding-bottom: 8px; }
.opcion-empezar p { margin: 4px 2px 0; text-align: center; }

/* Suscripciones vacías con lo que se repite: el botón, debajo y a lo ancho. */
.sugerencias-abiertas .fila.envuelve { flex-wrap: wrap; }
.sugerencias-abiertas .fila.envuelve > .textos { flex: 1 1 0; min-width: 0; }
.sugerencias-abiertas .fila.envuelve > .boton { flex: 1 1 100%; }

/* Objetivos vacío: la propuesta de colchón (objetivos.js). */
.propuesta-colchon { text-align: left; width: 100%; }
.propuesta-colchon .boton { margin-top: 10px; }