/* BudgetCouple · PWA. Los css_* de src/ en el orden de Index.html (lo genera tools/construir-pwa.js). */
/* ---- src/css_Tokens.html ---- *//* ============================================================
   BUDGETCOUPLE v2 — Tokens de diseño (claro / oscuro)
   Archivo: css_Tokens.html
   Paleta: papel cálido + pino profundo; cada miembro aporta su color.
   Contrastes AA verificados (texto ≥ 4.5:1, marcas de gráfico ≥ 3:1).
   ============================================================ */
:root {
  color-scheme: light;
  /* Superficies */
  --fondo: #F2F0EB;
  --superficie: #FFFFFF;
  --superficie-2: #F7F6F2;
  --superficie-3: #ECEAE4;
  --elevada: #FFFFFF;
  --velo: rgba(24, 30, 27, 0.42);

  /* Tinta */
  --tinta: #1D2320;
  --tinta-2: #48514C;
  --tinta-3: #646C66;
  --tinta-inv: #FFFFFF;

  /* Líneas */
  --linea: #E4E1DA;
  --linea-fuerte: #CFCBC2;
  --foco: #17695A;

  /* Acento (hogar) */
  --acento: #17695A;
  --acento-hover: #12594C;
  --acento-suave: #DFEDE7;
  --acento-tinta: #115446;
  --sobre-acento: #FFFFFF;
  --hogar: #17695A;

  /* Panel destacado (Mi mes) */
  --panel: #17695A;
  --panel-2: #1E7867;
  --panel-tinta: #FFFFFF;
  --panel-tinta-2: rgba(255, 255, 255, 0.78);
  --panel-pista: rgba(255, 255, 255, 0.22);

  /* Semánticos (siempre con icono + texto) */
  --ok: #1F8A5B;
  --ok-suave: #E1F1E8;
  --ok-tinta: #17694A;
  --aviso: #C98500;
  --aviso-suave: #FBEFD6;
  --aviso-tinta: #8F5600;
  --peligro: #C8423A;
  --peligro-suave: #FAE3E0;
  --peligro-tinta: #B0362D;
  --ingreso-tinta: #177A55;

  /* Gráficos (validados: CVD ΔE 23, contraste ≥ 3:1 sobre superficie) */
  --g-ingresos: #1C9A70;
  --g-gastos: #4A55C8;
  --g-rejilla: #ECEAE4;
  --g-base: #CFCBC2;
  --g-pista: #ECEAE4;
  --g-ritmo: #1D2320;

  /* Tipografía */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --t-2xs: 0.6875rem; /* 11 */
  --t-xs: 0.75rem;   /* 12 */
  --t-sm: 0.8125rem; /* 13 */
  --t-base: 0.9375rem; /* 15 */
  --t-md: 1.0625rem; /* 17 */
  --t-lg: 1.25rem;   /* 20 */
  --t-xl: 1.5rem;    /* 24 */
  --t-2xl: 1.875rem; /* 30 */
  --t-3xl: 2.5rem;   /* 40 */
  --t-4xl: 3rem;     /* 48 */

  /* Espaciado (base 4 px) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px;

  /* Radios por jerarquía */
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 22px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Sombras sutiles */
  --sombra-1: 0 1px 2px rgba(29, 35, 32, 0.05), 0 1px 1px rgba(29, 35, 32, 0.03);
  --sombra-2: 0 2px 6px rgba(29, 35, 32, 0.06), 0 8px 24px rgba(29, 35, 32, 0.06);
  --sombra-3: 0 18px 48px rgba(20, 26, 23, 0.22), 0 2px 8px rgba(20, 26, 23, 0.08);

  /* Movimiento */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 320ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Estructura */
  --ancho-lateral: 256px;
  --alto-barra: 64px;
  --toque: 44px;
  --seg-arriba: env(safe-area-inset-top, 0px);
  --seg-abajo: env(safe-area-inset-bottom, 0px);
  --seg-izq: env(safe-area-inset-left, 0px);
  --seg-der: env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #111513;
    --superficie: #1A1F1C;
    --superficie-2: #202622;
    --superficie-3: #29302C;
    --elevada: #222824;
    --velo: rgba(0, 0, 0, 0.6);
    --tinta: #ECEFEC;
    --tinta-2: #B7BFB9;
    --tinta-3: #8F9891;
    --tinta-inv: #111513;
    --linea: #2B322E;
    --linea-fuerte: #3A423D;
    --foco: #4FC3A1;
    --acento: #4FC3A1;
    --acento-hover: #66CFAF;
    --acento-suave: #1C3A31;
    --acento-tinta: #7FD8BC;
    --sobre-acento: #06261E;
    --hogar: #4FC3A1;
    --panel: #173A31;
    --panel-2: #1D4439;
    --panel-tinta: #F1F7F4;
    --panel-tinta-2: rgba(241, 247, 244, 0.74);
    --panel-pista: rgba(241, 247, 244, 0.16);
    --ok: #5CC79A;
    --ok-suave: #193429;
    --ok-tinta: #7BD6AE;
    --aviso: #E7A93A;
    --aviso-suave: #352A14;
    --aviso-tinta: #F0BE62;
    --peligro: #F0857A;
    --peligro-suave: #3A1F1C;
    --peligro-tinta: #F59D93;
    --ingreso-tinta: #5CC79A;
    --g-ingresos: #25A57A;
    --g-gastos: #7480E8;
    --g-rejilla: #262C29;
    --g-base: #3A423D;
    --g-pista: #2B322E;
    --g-ritmo: #ECEFEC;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sombra-2: 0 2px 8px rgba(0, 0, 0, 0.35);
    --sombra-3: 0 18px 48px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #111513;
  --superficie: #1A1F1C;
  --superficie-2: #202622;
  --superficie-3: #29302C;
  --elevada: #222824;
  --velo: rgba(0, 0, 0, 0.6);
  --tinta: #ECEFEC;
  --tinta-2: #B7BFB9;
  --tinta-3: #8F9891;
  --tinta-inv: #111513;
  --linea: #2B322E;
  --linea-fuerte: #3A423D;
  --foco: #4FC3A1;
  --acento: #4FC3A1;
  --acento-hover: #66CFAF;
  --acento-suave: #1C3A31;
  --acento-tinta: #7FD8BC;
  --sobre-acento: #06261E;
  --hogar: #4FC3A1;
  --panel: #173A31;
  --panel-2: #1D4439;
  --panel-tinta: #F1F7F4;
  --panel-tinta-2: rgba(241, 247, 244, 0.74);
  --panel-pista: rgba(241, 247, 244, 0.16);
  --ok: #5CC79A;
  --ok-suave: #193429;
  --ok-tinta: #7BD6AE;
  --aviso: #E7A93A;
  --aviso-suave: #352A14;
  --aviso-tinta: #F0BE62;
  --peligro: #F0857A;
  --peligro-suave: #3A1F1C;
  --peligro-tinta: #F59D93;
  --ingreso-tinta: #5CC79A;
  --g-ingresos: #25A57A;
  --g-gastos: #7480E8;
  --g-rejilla: #262C29;
  --g-base: #3A423D;
  --g-pista: #2B322E;
  --g-ritmo: #ECEFEC;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sombra-2: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sombra-3: 0 18px 48px rgba(0, 0, 0, 0.55);
}

/* ---- src/css_Base.html ---- *//* ============================================================
   BUDGETCOUPLE v2 — Base: reset, tipografía y armazón
   Archivo: css_Base.html
   Mobile-first. Escritorio ≥ 900 px (barra lateral).
   Accesibilidad (L12): tamaños de texto en rem (crecen con la letra
   del sistema) y objetivos táctiles ≥ 44 px.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--fondo);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
.ico { width: 20px; height: 20px; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, .hoja:focus, [role="dialog"]:focus { outline: none; }
a { color: var(--acento-tinta); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
button:disabled { cursor: default; }
input, select, textarea { font-size: 1rem; } /* 16 px: evita el zoom de iOS */
[hidden] { display: none !important; }
/* Foco visible (GAS-07): sin :focus-visible (Safari < 15.4) se ve siempre el contorno; con él, solo con teclado. */
:focus { outline: 2px solid var(--foco); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--acento-suave); color: var(--tinta); }

.num { font-variant-numeric: tabular-nums; }
.sin-corte { white-space: nowrap; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tinta-2 { color: var(--tinta-2); }
.tinta-3 { color: var(--tinta-3); }
.positivo { color: var(--ingreso-tinta); }
.negativo { color: var(--peligro-tinta); }
.tinta-aviso { color: var(--aviso-tinta); }

/* Tipografía */
.titulo-1 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.titulo-2 { font-size: var(--t-md); font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
.titulo-3 { font-size: var(--t-base); font-weight: 600; line-height: 1.3; }
.etiqueta { font-size: var(--t-sm); color: var(--tinta-3); line-height: 1.3; }
.texto-peq { font-size: var(--t-sm); }
.texto-mini { font-size: var(--t-xs); }
.cifra-hero { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.cifra-grande { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.cifra { font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }

/* ---------- Arranque ---------- */
.arranque { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.arranque__marca {
  width: 44px; height: 28px; position: relative;
  animation: latido 1.4s var(--curva) infinite;
}
.arranque__marca::before, .arranque__marca::after {
  content: ""; position: absolute; top: 0; width: 28px; height: 28px; border-radius: 50%;
}
.arranque__marca::before { left: 0; background: var(--acento); opacity: .9; }
.arranque__marca::after { right: 0; background: var(--aviso); mix-blend-mode: multiply; opacity: .85; }
@keyframes latido { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .7; } }

/* ---------- Armazón de la app ---------- */
.app { min-height: 100vh; min-height: 100dvh; }
.app__lateral { display: none; }
.app__principal {
  min-width: 0;
  padding-left: var(--seg-izq);
  padding-right: var(--seg-der);
  padding-bottom: calc(var(--alto-barra) + var(--seg-abajo) + var(--e-8));
}

/* Cabecera de la vista */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: var(--fondo);
  padding: calc(var(--seg-arriba) + var(--e-3)) var(--e-4) var(--e-3);
  transition: box-shadow var(--dur-2) var(--curva);
}
.cabecera--sombra { box-shadow: 0 1px 0 var(--linea); }
.cabecera__fila { display: flex; align-items: center; gap: var(--e-3); min-height: 44px; max-width: 1180px; margin: 0 auto; }
.cabecera__textos { flex: 1; min-width: 0; }
/* v2.1: «Volver» de las vistas de detalle (detalle de cuenta y de evento): el icono se alinea con el borde del contenido. */
.cabecera__volver { margin-left: -10px; margin-right: calc(var(--e-1) * -1); color: var(--tinta); }
.cabecera__titulo { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
/* El saludo con el nombre se lee entero: hasta dos líneas antes de recortar (MOV-12) */
.cabecera__titulo.trunc { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cabecera__sub { font-size: var(--t-sm); color: var(--tinta-3); margin-top: 2px; }
.cabecera__acciones { display: flex; align-items: center; gap: var(--e-1); }
.cabecera__mes { max-width: 1180px; margin: var(--e-3) auto 0; }

.contenido { max-width: 1180px; margin: 0 auto; padding: var(--e-2) var(--e-4) 0; }
.vista { display: block; min-width: 0; }
.vista[aria-busy="true"] .solo-cargado { opacity: .55; transition: opacity var(--dur-2); }

/* Barra inferior (móvil) */
.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--alto-barra) + var(--seg-abajo));
  padding: 0 var(--seg-der) var(--seg-abajo) var(--seg-izq);
  background: var(--superficie);
  border-top: 1px solid var(--linea);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
}
.barra-inferior__item {
  height: var(--alto-barra); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--tinta-3); font-weight: 550; letter-spacing: .01em; line-height: 1.15;
  /* Crece con la letra del sistema hasta donde cabe en la barra (como las barras de pestañas nativas). */
  font-size: min(0.6875rem, 3.2vw, 14px);
  border-radius: var(--r-s); min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap;
}
.barra-inferior__item svg { width: 24px; height: 24px; }
.barra-inferior__item:hover, .lateral__item:hover, .menu-mas__item:hover, .alerta-fila:hover, .metas-mini__fila:hover { text-decoration: none; }
.barra-inferior__item[aria-current="page"] { color: var(--acento-tinta); }
.barra-inferior__item[aria-current="page"] .barra-inferior__ico { background: var(--acento-suave); }
.barra-inferior__ico { width: 52px; height: 30px; border-radius: var(--r-full); display: grid; place-items: center; transition: background var(--dur-2) var(--curva); }
.barra-inferior__mas-wrap { display: flex; justify-content: center; }
.boton-mas {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acento); color: var(--sobre-acento);
  box-shadow: 0 6px 16px rgba(23, 105, 90, .32), 0 0 0 5px var(--superficie);
  transform: translateY(-14px);
  transition: transform var(--dur-1) var(--curva), background var(--dur-1);
}
.boton-mas svg { width: 28px; height: 28px; }
.boton-mas:active { transform: translateY(-14px) scale(.94); }

/* Barra lateral (escritorio) */
@media (min-width: 900px) {
  .app {
    display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
    background: linear-gradient(to right, var(--superficie-2) 0, var(--superficie-2) calc(var(--ancho-lateral) - 1px), var(--linea) calc(var(--ancho-lateral) - 1px), var(--linea) var(--ancho-lateral), transparent var(--ancho-lateral));
  }
  .app__lateral {
    display: flex; flex-direction: column; gap: var(--e-2);
    position: sticky; top: 0; height: 100vh;
    padding: var(--e-6) var(--e-4) var(--e-4);
    overflow-y: auto;
  }
  .app__principal { padding-bottom: var(--e-12); }
  .barra-inferior { display: none; }
  .cabecera { padding: var(--e-6) var(--e-8) var(--e-4); }
  .cabecera__titulo { font-size: var(--t-2xl); }
  .cabecera__fila { flex-wrap: nowrap; }
  .cabecera__mes { margin: 0; }
  .contenido { padding: var(--e-2) var(--e-8) 0; }
}

.marca { display: flex; align-items: center; gap: var(--e-3); padding: 0 var(--e-2) var(--e-4); }
.marca__nombre { font-weight: 700; font-size: var(--t-md); letter-spacing: -0.01em; line-height: 1.2; }
.marca__hogar { font-size: var(--t-sm); color: var(--tinta-3); }

.lateral__nuevo { margin: var(--e-2) 0 var(--e-4); }
.lateral__nav { display: flex; flex-direction: column; gap: 2px; }
.lateral__sep { height: 1px; background: var(--linea); margin: var(--e-3) var(--e-2); }
.lateral__item {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--toque); padding: 0 var(--e-3); /* UI-17: 44 px también en tableta táctil (DQ34) */
  border-radius: var(--r-s); color: var(--tinta-2); font-weight: 550;
  transition: background var(--dur-1), color var(--dur-1);
}
.lateral__item svg { width: 20px; height: 20px; }
.lateral__item:hover { background: var(--superficie-3); color: var(--tinta); text-decoration: none; }
.lateral__item[aria-current="page"] { background: var(--acento-suave); color: var(--acento-tinta); }
.lateral__pie { margin-top: auto; padding: var(--e-3) var(--e-2) 0; display: flex; align-items: center; gap: var(--e-3); }
.lateral__pie .etiqueta { line-height: 1.35; }

/* Apaisado en móvil (MOV-15): cabecera en una sola fila (título + selector de mes) y barra inferior más baja,
   para dejar más alto útil a la lista. */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 500px) {
  :root { --alto-barra: 52px; }
  .cabecera { display: flex; align-items: center; gap: var(--e-3); padding-top: calc(var(--seg-arriba) + var(--e-2)); padding-bottom: var(--e-2); }
  .cabecera__fila { flex: 1; min-width: 0; margin: 0; }
  .cabecera__titulo { font-size: var(--t-lg); }
  .cabecera__sub { display: none; }
  .cabecera__mes { margin: 0; flex-shrink: 0; }
  .cabecera__mes .selector-mes--bloque { display: inline-flex; width: auto; }
  .barra-inferior__item { flex-direction: row; gap: 6px; }
  .barra-inferior__ico { width: 40px; height: 28px; }
  .boton-mas { width: 46px; height: 46px; transform: translateY(-4px); box-shadow: 0 4px 12px rgba(23, 105, 90, .3), 0 0 0 4px var(--superficie); }
  .boton-mas:active { transform: translateY(-4px) scale(.94); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- src/css_Componentes.html ---- *//* ============================================================
   BUDGETCOUPLE v2 — Componentes reutilizables
   Archivo: css_Componentes.html
   Versión del archivo: 2.5.1
   - v2.5.1: esta marca (el arreglo de los gráficos de la 2.5.0 se repartió sin ella: así Diagnóstico ve si falta) y, en
     Ajustes → Rendimiento, la línea del último arranque (`aj-rend__ultimo`) y el aviso de 90_Instalacion.gs.
   - Objetivos táctiles ≥ 44 px (L12, MOV-07, DV19). v2.1: medidos en la propia
     caja (botones pequeños, chips, segmentados e iconos pequeños miden 44 px de
     verdad; antes, un ::before transparente ampliaba solo el área).
   - Los textos pasan a otra línea en vez de salirse (letra al 200 %, MOV-06).
   - Sin color-mix(): fondo sólido + capa de color con opacidad, que
     funciona en todos los navegadores (GAS-07, Safari iOS 15–16.1).
   ============================================================ */

/* ---------- Botones ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque); padding: 6px var(--e-5);
  border-radius: var(--r-full);
  font-weight: 600; font-size: var(--t-base); line-height: 1.2; text-align: center;
  transition: background var(--dur-1), color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1);
  user-select: none;
}
.btn svg { width: 20px; height: 20px; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .5; }
.btn--primario { background: var(--acento); color: var(--sobre-acento); }
.btn--primario:hover:not(:disabled) { background: var(--acento-hover); }
.btn--suave { background: var(--acento-suave); color: var(--acento-tinta); }
.btn--suave:hover:not(:disabled) { filter: brightness(.97); }
.btn--borde { background: var(--superficie); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.btn--borde:hover:not(:disabled) { background: var(--superficie-2); }
.btn--texto { color: var(--acento-tinta); padding-left: var(--e-3); padding-right: var(--e-3); }
.btn--texto:hover:not(:disabled) { background: var(--acento-suave); }
.btn--peligro { background: var(--peligro-suave); color: var(--peligro-tinta); }
.btn--peligro-texto { color: var(--peligro-tinta); padding-left: var(--e-3); padding-right: var(--e-3); }
.btn--peligro-texto:hover { background: var(--peligro-suave); }
.btn--bloque { width: 100%; }
.btn--grande { min-height: 52px; font-size: var(--t-md); }
.btn--peq { min-height: var(--toque); padding: 4px var(--e-4); font-size: var(--t-sm); } /* 44 px reales (DV19) */
.btn--peq svg { width: 18px; height: 18px; }
.btn.cargando { color: transparent !important; position: relative; pointer-events: none; }
.btn.cargando::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--sobre-acento) transparent var(--sobre-acento) transparent;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.icono-btn {
  width: var(--toque); height: var(--toque); border-radius: 50%;
  display: inline-grid; place-items: center; color: var(--tinta-2);
  transition: background var(--dur-1), color var(--dur-1);
  flex-shrink: 0;
}
.icono-btn svg { width: 22px; height: 22px; }
.icono-btn:hover { background: var(--superficie-3); color: var(--tinta); }
.icono-btn--peq { width: var(--toque); height: var(--toque); position: relative; } /* 44 × 44 reales; el dibujo sigue siendo pequeño */
.icono-btn--peq svg { width: 18px; height: 18px; }
.icono-btn:disabled { opacity: .45; cursor: default; }
.icono-btn.cargando { position: relative; pointer-events: none; }
.icono-btn.cargando svg { opacity: 0; }
.icono-btn.cargando::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid var(--tinta-3); border-color: var(--tinta-3) transparent var(--tinta-3) transparent;
  animation: girar .8s linear infinite;
}
/* Botón «Actualizar» de la cabecera mientras recarga */
.icono-btn.girando svg { animation: girar .8s linear 1; }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--superficie);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-1);
  padding: var(--e-5);
  min-width: 0;
  position: relative;
}
.tarjeta--plana { box-shadow: none; border: 1px solid var(--linea); }
.tarjeta--sin-relleno { padding: 0; overflow: hidden; }
.tarjeta__cab { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); min-height: 28px; }
.tarjeta__titulo { font-size: var(--t-md); font-weight: 650; letter-spacing: -0.01em; flex: 1; min-width: 0; }
.tarjeta__accion { margin: -8px -8px -8px 0; }
.btn--suave.tarjeta__accion { margin: -6px 0; }
.tarjeta--clicable { cursor: pointer; transition: box-shadow var(--dur-2), transform var(--dur-1); }
.tarjeta--clicable:hover { box-shadow: var(--sombra-2); }

.seccion { margin-top: var(--e-6); }
.seccion__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin: 0 var(--e-1) var(--e-3); }
.seccion__titulo { font-size: var(--t-md); font-weight: 650; letter-spacing: -0.01em; }

/* ---------- Rejillas ---------- */
.rejilla { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .rejilla { gap: var(--e-5); }
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--2-1 { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .rejilla--1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2 { grid-column: span 2; }
}
@media (min-width: 640px) and (max-width: 899px) { .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Escritorio estrecho (900–1099 px, iPad en horizontal; ESC-07): dos columnas iguales, ninguna se queda en 200 px. */
@media (min-width: 900px) and (max-width: 1099px) {
  .rejilla--2-1, .rejilla.rejilla--pres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pila { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
@media (min-width: 900px) { .pila { gap: var(--e-5); } }

/* ---------- Avatares de miembros ---------- */
.avatar {
  --c: var(--acento);
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-grid; place-items: center; flex-shrink: 0;
  position: relative; isolation: isolate;
  background: var(--superficie);
  box-shadow: inset 0 0 0 2px var(--c);
  font-size: 18px; line-height: 1;
  overflow: hidden; white-space: nowrap; /* un «emoji» escrito a mano que sea texto largo no se sale del círculo */
}
.avatar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c); opacity: .18; z-index: -1; }
.avatar--s { width: 24px; height: 24px; font-size: 13px; box-shadow: inset 0 0 0 1.5px var(--c); }
.avatar--l { width: 52px; height: 52px; font-size: 26px; box-shadow: inset 0 0 0 2.5px var(--c); }
.avatar--xl { width: 72px; height: 72px; font-size: 36px; box-shadow: inset 0 0 0 3px var(--c); }
.pareja { display: inline-flex; align-items: center; }
.pareja .avatar + .avatar { margin-left: -10px; box-shadow: inset 0 0 0 2px var(--c), 0 0 0 2px var(--superficie); }
.punto { --c: var(--acento); width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex-shrink: 0; display: inline-block; }
.punto--s { width: 8px; height: 8px; }

/* Logotipo: dos círculos que se cruzan (la pareja) */
.logo { width: 40px; height: 40px; flex-shrink: 0; }

/* ---------- Chips ---------- */
.chips { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--e-4) * -1); padding: 2px var(--e-4); scroll-padding: 0 var(--e-4); }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  min-height: var(--toque); padding: 0 14px; border-radius: var(--r-full);
  background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  font-size: var(--t-sm); font-weight: 550; color: var(--tinta-2); white-space: nowrap;
  transition: background var(--dur-1), color var(--dur-1), box-shadow var(--dur-1);
  position: relative;
}
.chip:hover { background: var(--superficie-2); }
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip.activo {
  background: var(--tinta); color: var(--fondo); box-shadow: none;
}
.chip--miembro[aria-checked="true"] { background: var(--superficie-2); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--c); }
@supports (background: color-mix(in srgb, red 50%, white)) {
  .chip--miembro[aria-checked="true"] { background: color-mix(in srgb, var(--c) 16%, var(--superficie)); }
}
.chip .avatar { margin-left: -8px; }

/* ---------- Segmentado ---------- */
.segmentado {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--superficie-3); border-radius: var(--r-full); padding: 3px; gap: 2px;
}
.segmentado__op {
  min-height: var(--toque); border-radius: var(--r-full); padding: 4px var(--e-3);
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); line-height: 1.2; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; overflow-wrap: anywhere;
  transition: background var(--dur-2) var(--curva), color var(--dur-1), box-shadow var(--dur-2);
  position: relative;
}
.segmentado__op[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.segmentado__op svg { width: 18px; height: 18px; }
.segmentado__op[aria-checked="true"], .segmentado__op[aria-selected="true"] {
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-1);
}
.segmentado--compacto { display: inline-grid; }
.segmentado--compacto .segmentado__op { min-height: var(--toque); padding: 4px var(--e-4); }
/* Si no caben, las opciones pasan a otra fila (textos largos o letra grande) */
.segmentado--envolver { display: flex; flex-wrap: wrap; border-radius: var(--r-l); }
.segmentado--envolver .segmentado__op { flex: 1 1 auto; }

/* ---------- Selector de mes ---------- */
.selector-mes {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--superficie); border-radius: var(--r-full); box-shadow: var(--sombra-1); padding: 2px;
}
.selector-mes__etiqueta {
  min-width: 136px; text-align: center; font-weight: 600; font-size: var(--t-base); line-height: 1.25;
  padding: 0 var(--e-2); text-transform: capitalize; white-space: nowrap;
}
.selector-mes__etiqueta small { display: block; font-size: var(--t-2xs); font-weight: 500; color: var(--tinta-3); text-transform: none; margin-top: 1px; }
.selector-mes .icono-btn { width: var(--toque); height: var(--toque); }
.selector-mes--bloque { display: flex; width: 100%; }
.selector-mes--bloque .selector-mes__etiqueta { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo + .campo, .campo + .fila-campos, .fila-campos + .campo { margin-top: var(--e-4); }
.campo__etiqueta { font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); }
.campo__ayuda { font-size: var(--t-xs); color: var(--tinta-3); }
.campo__error { font-size: var(--t-xs); color: var(--peligro-tinta); font-weight: 550; }
.entrada {
  width: 100%; min-height: max(48px, 2em); padding: 0 var(--e-4);
  border-radius: var(--r-s); border: 1px solid var(--linea-fuerte);
  background: var(--superficie); color: var(--tinta);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
  appearance: none; -webkit-appearance: none;
}
.entrada::placeholder { color: var(--tinta-3); opacity: 1; }
.entrada:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.entrada[aria-invalid="true"] { border-color: var(--peligro); }
.entrada:disabled { background-color: var(--superficie-2); color: var(--tinta-2); -webkit-text-fill-color: var(--tinta-2); opacity: 1; cursor: not-allowed; }
select.entrada:disabled { background-image: none; padding-right: var(--e-4); }
textarea.entrada { min-height: 84px; padding: var(--e-3) var(--e-4); resize: vertical; line-height: 1.4; }
select.entrada {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23808880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
input[type="date"].entrada { min-width: 0; }
input[type="color"].entrada { padding: 4px; height: 48px; }
.entrada-con-sufijo { position: relative; display: flex; align-items: center; }
.entrada-con-sufijo .entrada { padding-right: 52px; }
.entrada-con-sufijo__sufijo { position: absolute; right: 16px; color: var(--tinta-3); font-weight: 600; pointer-events: none; }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--e-3); }

/* Importe grande */
.importe-grande {
  display: flex; align-items: baseline; justify-content: center; gap: 6px; max-width: 100%; overflow: hidden;
  padding: var(--e-2) 0 var(--e-1);
}
.importe-grande__simbolo { font-size: var(--t-2xl); font-weight: 600; color: var(--tinta-3); }
.importe-grande__entrada {
  border: 0; background: transparent; outline: none; text-align: center;
  font-size: 3.25rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1;
  width: 2ch; max-width: 100%; min-width: 1ch; padding: 0;
  font-variant-numeric: tabular-nums; color: var(--tinta);
  caret-color: var(--acento);
}
.importe-grande__entrada::placeholder { color: var(--linea-fuerte); }
/* ESC-12: el campo no tiene contorno propio; la caja enseña el foco con una línea del color de foco. */
.importe-grande { border-radius: var(--r-s); transition: box-shadow var(--dur-1); }
.importe-grande:focus-within { box-shadow: inset 0 -3px 0 var(--foco); }
.importe-grande--ingreso .importe-grande__entrada { color: var(--ingreso-tinta); }

/* Interruptor */
.interruptor { display: flex; align-items: center; gap: var(--e-3); min-height: var(--toque); cursor: pointer; }
.interruptor + .interruptor { margin-top: var(--e-3); }
.interruptor__texto { flex: 1; min-width: 0; }
.interruptor__texto b { display: block; font-weight: 600; font-size: var(--t-base); }
.interruptor__texto span { display: block; font-size: var(--t-sm); color: var(--tinta-3); }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor__pista {
  width: 50px; height: 30px; border-radius: var(--r-full); background: var(--linea-fuerte);
  position: relative; flex-shrink: 0; transition: background var(--dur-2) var(--curva);
}
.interruptor__pista::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--dur-2) var(--curva);
}
.interruptor input:checked + .interruptor__pista { background: var(--acento); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(20px); }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- Listas ---------- */
.lista { display: flex; flex-direction: column; }
.fila {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 60px; padding: var(--e-3) var(--e-4);
  width: 100%; text-align: left; color: inherit;
  transition: background var(--dur-1);
  position: relative;
}
.fila + .fila::before { content: ""; position: absolute; top: 0; left: 68px; right: var(--e-4); height: 1px; background: var(--linea); }
button.fila:hover, a.fila:hover, .fila--clicable:hover { background: var(--superficie-2); text-decoration: none; }
.fila__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila__titulo { font-weight: 600; font-size: var(--t-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__sub { font-size: var(--t-sm); color: var(--tinta-3); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
/* MOV-12 / ESC-15: la fecha y la categoría nunca se cortan; si no caben junto a la insignia, pasan debajo. */
.fila__sub > span:not([class]) { flex: 1 1 6rem; min-width: 0; overflow-wrap: anywhere; }
.fila__aviso { display: flex; align-items: flex-start; gap: 4px; font-size: var(--t-xs); font-weight: 550; color: var(--aviso-tinta); margin-top: 2px; }
.fila__aviso svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.fila__fin { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: 50%; }
.fila__importe { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila__mini { font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
/* Móvil estrecho: «Tu parte» pasa encima de su importe y deja sitio a la descripción */
@media (max-width: 399px) { .fila__mini { max-width: 5.5rem; } }
.ico-cat {
  --c: var(--tinta-3);
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  position: relative; isolation: isolate; overflow: hidden; white-space: nowrap;
  background: var(--superficie);
}
.ico-cat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c); opacity: .14; z-index: -1; }
.ico-cat--s { width: 36px; height: 36px; border-radius: 11px; font-size: 18px; }
.ico-cat--l { width: 52px; height: 52px; border-radius: 16px; font-size: 26px; }

.insignia {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; max-width: 100%;
  font-size: var(--t-2xs); font-weight: 600; line-height: 1.1; padding: 4px 7px; border-radius: var(--r-full);
  background: var(--superficie-3); color: var(--tinta-2); white-space: nowrap;
}
.insignia--hogar { background: var(--acento-suave); color: var(--acento-tinta); }
.insignia--ok { background: var(--ok-suave); color: var(--ok-tinta); }
.insignia--aviso { background: var(--aviso-suave); color: var(--aviso-tinta); }
.insignia--peligro { background: var(--peligro-suave); color: var(--peligro-tinta); }
.insignia svg { width: 12px; height: 12px; }

/* ---------- Barras de progreso ---------- */
.progreso { position: relative; height: 10px; border-radius: var(--r-full); background: var(--g-pista); overflow: visible; }
.progreso__barra {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-full);
  background: var(--ok); max-width: 100%;
  transition: width var(--dur-3) var(--curva);
}
.progreso--ALERTA .progreso__barra { background: var(--aviso); }
.progreso--SUPERADO .progreso__barra { background: var(--peligro); }
.progreso--hogar .progreso__barra { background: var(--acento); }
.progreso__ritmo {
  position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px;
  background: var(--g-ritmo); border-radius: 2px; opacity: .55;
}
.progreso--fino { height: 6px; }
.progreso--fino .progreso__ritmo { top: -3px; bottom: -3px; }

.estado { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 600; }
.estado svg { width: 14px; height: 14px; }
.estado--OK { color: var(--ok-tinta); }
.estado--ALERTA { color: var(--aviso-tinta); }
.estado--SUPERADO { color: var(--peligro-tinta); }

/* ---------- Esqueletos ---------- */
.esq {
  background: linear-gradient(90deg, var(--superficie-3) 0%, var(--superficie-2) 50%, var(--superficie-3) 100%);
  background-size: 200% 100%; animation: brillo 1.3s ease-in-out infinite;
  border-radius: var(--r-xs); min-height: 12px;
}
.esq--txt { height: 14px; width: 60%; }
.esq--cifra { height: 34px; width: 48%; border-radius: 10px; }
.esq--bloque { height: 120px; border-radius: var(--r-m); }
.esq--circ { width: 44px; height: 44px; border-radius: 14px; }
@keyframes brillo { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------- Estado vacío ---------- */
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-3); padding: var(--e-8) var(--e-5); }
.vacio__ilus { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento-tinta); font-size: 40px; }
.vacio__ilus svg { width: 40px; height: 40px; }
.vacio__titulo { font-size: var(--t-md); font-weight: 650; }
.vacio__texto { color: var(--tinta-3); max-width: 34ch; font-size: var(--t-sm); }
.vacio .btn { margin-top: var(--e-2); }
.vacio--compacto { padding: var(--e-5) var(--e-4); }
.vacio--compacto .vacio__ilus { width: 56px; height: 56px; font-size: 26px; }
.vacio--compacto .vacio__ilus svg { width: 26px; height: 26px; }

/* ---------- Aviso en línea ---------- */
.nota {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-3) var(--e-4); border-radius: var(--r-m);
  background: var(--superficie-2); color: var(--tinta-2); font-size: var(--t-sm);
}
.nota svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.nota--aviso { background: var(--aviso-suave); color: var(--aviso-tinta); }
.nota--peligro { background: var(--peligro-suave); color: var(--peligro-tinta); }
.nota--hogar { background: var(--acento-suave); color: var(--acento-tinta); }
.nota__cuerpo { flex: 1; min-width: 0; }
.nota b { font-weight: 650; }

/* ---------- Hojas (bottom sheet / modal) ---------- */
.hoja-capa {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
}
.hoja-velo { position: absolute; inset: 0; background: var(--velo); opacity: 0; transition: opacity var(--dur-2) var(--curva); }
.hoja {
  position: relative; width: 100%; max-height: calc(100dvh - var(--seg-arriba) - 24px);
  background: var(--elevada); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sombra-3);
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform var(--dur-3) var(--curva);
  padding-bottom: var(--seg-abajo);
  outline: none;
}
.hoja-capa.abierta .hoja-velo { opacity: 1; }
.hoja-capa.cerrando { pointer-events: none; }
.hoja-capa.abierta .hoja { transform: none; }
.hoja__asa { width: 36px; height: 5px; border-radius: 3px; background: var(--linea-fuerte); margin: 8px auto 0; flex-shrink: 0; }
.hoja__cab { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3) var(--e-2) var(--e-5); flex-shrink: 0; }
/* Arrastrar el asa o la cabecera cierra la hoja (L13): el gesto es de la app, no del desplazamiento. */
@media (max-width: 899px) { .hoja__asa, .hoja__cab { touch-action: none; } .hoja__asa { position: relative; } .hoja__asa::before { content: ""; position: absolute; inset: -10px -40px; } }
.hoja__titulo { flex: 1; font-size: var(--t-md); font-weight: 650; letter-spacing: -0.01em; min-width: 0; }
.hoja__cuerpo { overflow-y: auto; overscroll-behavior: contain; padding: var(--e-2) var(--e-5) var(--e-5); flex: 1; min-height: 0; }
.hoja__pie {
  padding: var(--e-3) var(--e-5) var(--e-4); border-top: 1px solid var(--linea); flex-shrink: 0;
  display: flex; gap: var(--e-3); align-items: center; background: var(--elevada);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.hoja__pie .btn--primario { flex: 1; }
@media (min-width: 900px) {
  .hoja-capa { align-items: center; padding: var(--e-8); }
  .hoja {
    max-width: 560px; border-radius: var(--r-xl); max-height: min(860px, calc(100vh - 64px));
    transform: translateY(16px) scale(.98); opacity: 0;
    transition: transform var(--dur-2) var(--curva), opacity var(--dur-2) var(--curva);
    padding-bottom: 0;
  }
  .hoja--ancha { max-width: 640px; }
  .hoja--estrecha { max-width: 440px; }
  .hoja-capa.abierta .hoja { transform: none; opacity: 1; }
  .hoja__asa { display: none; }
  .hoja__cab { padding: var(--e-4) var(--e-4) var(--e-2) var(--e-6); }
  .hoja__cuerpo { padding: var(--e-2) var(--e-6) var(--e-6); }
  .hoja__pie { padding: var(--e-4) var(--e-6); }
}

/* Menú de opciones (hoja "Más") */
.menu-mas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
.menu-mas__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 92px; border-radius: var(--r-m); background: var(--superficie-2);
  font-weight: 600; font-size: var(--t-sm); color: var(--tinta); text-align: center; padding: var(--e-3) var(--e-2);
}
.menu-mas__item svg { width: 26px; height: 26px; color: var(--acento-tinta); }
.menu-mas__item:hover { background: var(--superficie-3); text-decoration: none; }
.menu-mas__item[aria-current="page"] { background: var(--acento-suave); color: var(--acento-tinta); }

/* ---------- Diálogo de confirmación ---------- */
.dialogo-capa { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--e-5); }
.dialogo-capa .hoja-velo { opacity: 1; }
.dialogo {
  position: relative; width: 100%; max-width: 400px; background: var(--elevada); border-radius: var(--r-l);
  box-shadow: var(--sombra-3); padding: var(--e-6); animation: aparecer var(--dur-2) var(--curva);
}
.dialogo__titulo { font-size: var(--t-md); font-weight: 650; margin-bottom: var(--e-2); }
.dialogo__texto { color: var(--tinta-2); font-size: var(--t-base); }
.dialogo__acciones { display: flex; gap: var(--e-3); justify-content: flex-end; margin-top: var(--e-6); flex-wrap: wrap; }
@keyframes aparecer { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Avisos (snackbar) ---------- */
.avisos {
  position: fixed; z-index: 90; left: 0; right: 0;
  bottom: calc(var(--alto-barra) + var(--seg-abajo) + 12px);
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  pointer-events: none; padding: 0 var(--e-4);
}
@media (min-width: 900px) { .avisos { bottom: var(--e-6); left: var(--ancho-lateral); } }
/* Con una hoja abierta, los avisos van dentro de ella (antes del pie) y ocupan su propio espacio */
.avisos.avisos--en-hoja {
  position: static; padding: 0 var(--e-4) var(--e-2); flex-shrink: 0; pointer-events: auto;
}
.avisos.avisos--en-hoja:empty { display: none; }
.avisos--en-hoja .aviso { max-width: none; box-shadow: none; }
@media (min-width: 900px) { .avisos.avisos--en-hoja { left: auto; bottom: auto; padding: 0 var(--e-6) var(--e-2); } }
.aviso {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 52px; max-width: 520px; width: 100%;
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
  background: #1D2320; color: #F2F4F2; border-radius: var(--r-m);
  box-shadow: var(--sombra-3); font-size: var(--t-base); font-weight: 500;
  animation: subir var(--dur-2) var(--curva);
}
:root[data-theme="dark"] .aviso { background: #ECEFEC; color: #1D2320; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aviso { background: #ECEFEC; color: #1D2320; } }
.aviso__texto { flex: 1; min-width: 0; padding: 6px 0; }
.aviso__ico { width: 20px; height: 20px; flex-shrink: 0; color: #7BD6AE; }
.aviso--error .aviso__ico { color: #F59D93; }
:root[data-theme="dark"] .aviso__ico { color: #17694A; }
:root[data-theme="dark"] .aviso--error .aviso__ico { color: #B0362D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aviso__ico { color: #17694A; }
  :root:not([data-theme="light"]) .aviso--error .aviso__ico { color: #B0362D; }
}
.aviso__accion { min-height: var(--toque); padding: 0 var(--e-3); border-radius: var(--r-s); font-weight: 700; color: #7FD8BC; flex-shrink: 0; }
.aviso__accion:hover { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .aviso__accion { color: #115446; }
:root[data-theme="dark"] .aviso__accion:hover { background: rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aviso__accion { color: #115446; }
  :root:not([data-theme="light"]) .aviso__accion:hover { background: rgba(0,0,0,.06); }
}
.aviso.saliendo { animation: bajar var(--dur-2) var(--curva) forwards; }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bajar { to { opacity: 0; transform: translateY(12px); } }

/* ---------- Tooltip de gráficos ---------- */
.tooltip {
  position: fixed; z-index: 95; pointer-events: none;
  background: var(--elevada); color: var(--tinta); border-radius: var(--r-s);
  box-shadow: var(--sombra-3); padding: var(--e-2) var(--e-3); font-size: var(--t-sm);
  min-width: 120px; max-width: 240px; border: 1px solid var(--linea);
}
.tooltip__titulo { font-weight: 650; margin-bottom: 4px; text-transform: capitalize; }
.tooltip__fila { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.tooltip__fila span:last-child { margin-left: auto; padding-left: var(--e-3); font-weight: 600; }

/* ---------- Gráficos ---------- */
.grafico { width: 100%; height: auto; overflow: visible; }
.grafico text { font-family: var(--fuente); fill: var(--tinta-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico .rejilla-g { stroke: var(--g-rejilla); stroke-width: 1; shape-rendering: crispEdges; }
.grafico .base-g { stroke: var(--g-base); stroke-width: 1; shape-rendering: crispEdges; }
.grafico .zona { fill: transparent; cursor: default; }
/* v2.5.1: solo .activo (lo pone js_Graficos al pasar el ratón, tocar o enfocar). El antiguo `.zona:hover + .resalte`
   encendía la banda del mes SIGUIENTE (la .resalte que va justo después de la zona), así que se veían dos meses. */
.grafico .resalte.activo { opacity: 1; }
.grafico .resalte { fill: var(--superficie-3); opacity: 0; transition: opacity var(--dur-1); }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); font-size: var(--t-sm); color: var(--tinta-2); }
.leyenda__item { display: inline-flex; align-items: center; gap: 6px; }
.leyenda__muestra { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.leyenda__muestra--rayas { background: repeating-linear-gradient(45deg, var(--tinta-3) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
/* v2.1: serie con trazo discontinuo (G.lineas con `discontinua`, la línea del plan en G.combinado) */
.leyenda__muestra--discontinua { width: 16px; height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--c); align-self: center; }
/* Margen bajo la leyenda de un gráfico (sustituye al estilo en línea de js_Graficos) */
.leyenda--grafico { margin-bottom: 10px; }
.dona-envoltorio { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-4) var(--e-5); }
.dona-envoltorio .dona { width: 148px; height: 148px; flex-shrink: 0; }
.dona-centro { font-family: var(--fuente); }
.anillo { flex-shrink: 0; }
.anillo__pista { stroke: var(--g-pista); }
.anillo__valor { transition: stroke-dashoffset var(--dur-3) var(--curva); }
.dona-lista { flex: 1 1 11rem; min-width: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.dona-lista__fila { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); min-width: 0; }
/* Si no cabe al lado de la dona, la leyenda pasa debajo; los nombres no se cortan. */
.dona-lista__fila .trunc { flex: 1; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
.dona-lista__fila .num { color: var(--tinta-2); font-weight: 600; }

/* Tabla accesible (vista de datos de gráficos) */
.tabla-datos { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla-datos th, .tabla-datos td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
.tabla-datos th:first-child, .tabla-datos td:first-child { text-align: left; text-transform: capitalize; }
.tabla-datos th { color: var(--tinta-3); font-weight: 600; }
details.datos summary { cursor: pointer; font-size: var(--t-sm); color: var(--acento-tinta); font-weight: 600; min-height: var(--toque); display: flex; align-items: center; }
details.datos summary::-webkit-details-marker { display: none; }

/* Cuadrícula de selección de emoji / color */
.csv-info { margin-bottom: var(--e-3); overflow-wrap: anywhere; }
.csv-nota { margin-bottom: var(--e-3); }
.csv-texto { min-height: min(42vh, 360px); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre; overflow: auto; resize: vertical; }
.paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: var(--e-2); }
.paleta__op {
  height: 44px; border-radius: var(--r-s); display: grid; place-items: center; font-size: 22px;
  background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea);
}
.paleta__op[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--acento); background: var(--acento-suave); }
.paleta__color { width: 100%; height: 100%; border-radius: inherit; display: block; }
.paleta--colores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 560px) { .paleta--colores { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.paleta--colores .paleta__op { padding: 6px; }
.paleta--colores .paleta__op span { border-radius: 8px; }

/* ============================================================
   v2.1 — piezas compartidas por varias vistas (§5.6, F-VIS)
   ============================================================ */

/* ---------- Chip de moneda ----------
   Código ISO siempre visible (para no confundir «kr» o «$») y cifras tabulares. En una superficie normal usa
   --superficie-2; dentro de un panel --panel (Mi mes, Patrimonio, evento), la variante --panel. */
.chips-moneda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.chips-moneda__mas { color: var(--tinta-3); font-weight: 600; font-size: var(--t-sm); }
.chip-moneda {
  display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%;
  padding: 4px 10px; border-radius: var(--r-full); background: var(--superficie-2); color: var(--tinta);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums;
}
.chip-moneda__cod { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .05em; color: var(--tinta-3); flex-shrink: 0; }
.chip-moneda__cifra { min-width: 0; overflow-wrap: anywhere; }
.chip-moneda--panel { background: var(--panel-pista); color: var(--panel-tinta); }
.chip-moneda--panel .chip-moneda__cod { color: var(--panel-tinta-2); }
.chips-moneda--panel .chips-moneda__mas { color: var(--panel-tinta-2); }

/* ---------- Avatares de invitado y de la cuenta común (DV12, §5.6) ----------
   Invitado: borde discontinuo --linea-fuerte, su emoji y su color (la capa ::before con --c); la palabra «invitado»
   va en el texto para el lector de pantalla. Mismo nombre que en css_Eventos (F-EVT), que puede quitarlo de allí. */
.avatar.avatar--invitado { box-shadow: none; border: 2px dashed var(--linea-fuerte); }
.avatar--s.avatar--invitado { border-width: 1.5px; }
.avatar--l.avatar--invitado { border-width: 2.5px; }
.avatar--xl.avatar--invitado { border-width: 3px; }
.avatar.avatar--hogar::before { opacity: .22; }

/* ---------- Insignia de acento («En curso») ---------- */
.insignia--acento { background: var(--acento); color: var(--sobre-acento); }

/* ---------- Estado del plan (icono + texto, nunca solo color: §5.6) ---------- */
.estado-plan { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 650; line-height: 1.25; }
.estado-plan svg { width: 16px; height: 16px; flex-shrink: 0; }
.estado-plan--ADELANTADO { color: var(--ok-tinta); }
.estado-plan--EN_LINEA { color: var(--acento-tinta); }
.estado-plan--POR_DETRAS { color: var(--aviso-tinta); }
.estado-plan--SIN_DATOS { color: var(--tinta-3); }
/* Barra del plan: lo ahorrado sobre la meta, con la marca de lo que decía el plan */
.progreso--plan .progreso__barra { background: var(--g-ingresos); }
.progreso--plan.progreso--POR_DETRAS .progreso__barra { background: var(--aviso); }
.progreso--plan .progreso__ritmo { opacity: .7; }

/* ---------- Selector de moneda ----------
   `.entrada--moneda` es el <select> de ui.selectMoneda (js_Divisas). Junto al importe grande del formulario
   (`.importe-grande__moneda`, mov-moneda) es compacto: sin caja, del tamaño del símbolo y con 44 px de alto. */
.entrada--moneda { font-variant-numeric: tabular-nums; }
select.entrada.importe-grande__moneda {
  width: auto; min-width: 0; min-height: var(--toque); flex: none; /* el ancho exacto lo pone el formulario según la moneda */
  border-color: transparent; background-color: transparent; box-shadow: none;
  padding: 0 28px 0 6px; background-position: right 4px center;
  font-size: var(--t-lg); font-weight: 650; color: var(--tinta-2); letter-spacing: 0;
  border-radius: var(--r-s); text-overflow: ellipsis;
}
select.entrada.importe-grande__moneda:hover { background-color: var(--superficie-2); }
select.entrada.importe-grande__moneda:focus { border-color: transparent; box-shadow: none; }
select.entrada.importe-grande__moneda:focus-visible { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); outline: 2px solid var(--foco); outline-offset: 1px; }
/* Sin :focus-visible (Safari < 15.4) el foco se ve siempre, como en el resto de la app (GAS-07). */
@supports not selector(:focus-visible) { select.entrada.importe-grande__moneda:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); } }

/* ---------- «(opcional)» junto a la etiqueta de un campo ----------
   Sustituye al estilo en línea `<span class="tinta-3" style="font-weight:500">(opcional)</span>`. */
.campo__opcional { color: var(--tinta-3); font-weight: 500; }

/* ---------- v2.2 · Indicador de la cola (`cola-estado`, §3.8) ----------
   En la cabecera, antes de «Actualizar datos». Oculto (`hidden`) cuando todo está guardado. En el móvil solo el icono
   (y el número si hay más de uno); el texto completo va en `aria-label`. */
.cola-estado {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque); min-width: var(--toque);
  padding: 0 10px; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 600; line-height: 1.2;
  color: var(--tinta-2); background: var(--superficie-2); border: 1px solid var(--linea); flex-shrink: 0;
  justify-content: center; transition: background var(--dur-1), color var(--dur-1);
}
.cola-estado[hidden] { display: none; }
.cola-estado:hover { background: var(--superficie-3); color: var(--tinta); }
.cola-estado .cola-estado__ico { width: 18px; height: 18px; flex-shrink: 0; }
.cola-estado__texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
.cola-estado__n {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full);
  background: var(--superficie); color: inherit; font-size: var(--t-2xs); font-variant-numeric: tabular-nums;
}
.cola-estado--guardando .cola-estado__ico { animation: latir-reloj 1.6s ease-in-out infinite; }
.cola-estado--pendiente { color: var(--aviso-tinta); background: var(--aviso-suave); border-color: transparent; }
.cola-estado--sin-conexion { color: var(--aviso-tinta); background: var(--aviso-suave); border-color: transparent; }
.cola-estado--error { color: var(--peligro-tinta); background: var(--peligro-suave); border-color: transparent; }
@keyframes latir-reloj { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .cola-estado--guardando .cola-estado__ico { animation: none; } }
/* Móvil: el texto solo para el lector de pantalla (el botón conserva su `aria-label`). */
@media (max-width: 899px) {
  .cola-estado { padding: 0 8px; }
  .cola-estado__texto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* Hoja «Cambios sin guardar» (`cola-detalle`) */
.cola-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.cola-op { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); padding: var(--e-3); border-radius: var(--r-s); background: var(--superficie-2); }
.cola-op__cuerpo { flex: 1 1 12rem; min-width: 0; }
.cola-op__resumen { font-weight: 600; overflow-wrap: anywhere; }
.cola-op__estado { font-size: var(--t-sm); color: var(--tinta-3); overflow-wrap: anywhere; }
.cola-op--fallida .cola-op__estado { color: var(--peligro-tinta); }
.cola-op__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cola-detalle .nota + .cola-lista, .cola-detalle .nota + .nota { margin-top: var(--e-3); }

/* ---------- v2.2 · Marcas de lo que aún no ha confirmado el servidor (§3.8) ---------- */
/* Fila de una entidad sin confirmar: el mismo aspecto y un reloj discreto (sin bloquear nada). */
[data-pendiente="true"] .pendiente-reloj, .pendiente-reloj { display: inline-flex; align-items: center; color: var(--tinta-3); vertical-align: middle; }
.pendiente-reloj__ico { width: 14px; height: 14px; }
[data-pendiente="true"] .fila__importe, [data-pendiente="true"] .importe { opacity: .78; }
/* Zona cuyo cálculo hace el servidor: insignia «Actualizando…» y cifras atenuadas. */
.actualizando {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-full);
  font-size: var(--t-2xs); font-weight: 600; color: var(--tinta-2); background: var(--superficie-3); white-space: nowrap;
}
.actualizando__ico { width: 12px; height: 12px; animation: latir-reloj 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .actualizando__ico { animation: none; } }
[data-actualizando="true"] .cifra, [data-actualizando="true"] .tarjeta__cifra { opacity: .55; transition: opacity var(--dur-2); }
.zona-actualizando > .actualizando { margin-bottom: var(--e-2); }
/* Formulario en espera del servidor (ESP, `mov-espera`) */
.nota--espera { margin-top: var(--e-3); }

/* ---------- v2.3 · Inicio (§4.5): presupuesto del viaje en curso y «Vas X por delante/por detrás» ---------- */
.ini-evento__presupuesto { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ini-evento__pres-texto { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--e-3); font-size: var(--t-sm); font-weight: 600; }
.ini-evento__pres-texto > .num { overflow-wrap: anywhere; }
.ini-evento__pres-aviso { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 650; overflow-wrap: anywhere; }
.ini-evento__pres-aviso svg { width: 14px; height: 14px; flex-shrink: 0; }
.ini-evento__presupuesto--ALERTA .ini-evento__pres-aviso { color: var(--aviso-tinta); }
.ini-evento__presupuesto--SUPERADO .ini-evento__pres-aviso { color: var(--peligro-tinta); }
.ini-evento__pres-casa { margin-top: -4px; font-size: var(--t-xs); overflow-wrap: anywhere; }
@media (min-width: 900px) {
  /* En escritorio, la primera fila sigue siendo nombre · cifras · botones; el presupuesto va debajo, como las deudas. */
  .ini-evento__presupuesto { order: 1; padding-top: var(--e-3); border-top: 1px solid var(--linea); }
  .ini-evento__presupuesto .progreso { max-width: 40rem; }
  .ini-evento__presupuesto + .ini-evento__deudas { border-top: 0; padding-top: 0; }
}
.ini-plan__estado.ini-plan__estado--arriba { margin-top: 0; font-size: var(--t-md); }
.ini-plan__estado--arriba + .ini-plan__texto { margin-bottom: var(--e-3); }
.ini-plan__marca { margin-top: 6px; font-size: var(--t-xs); }

/* ---------- v2.5.1 · Ajustes → Rendimiento: desglose del último arranque y aviso de 90_Instalacion.gs ---------- */
.aj-rend__ultimo { display: block; margin-top: 4px; }
.aj-aviso-instalacion { margin-bottom: var(--e-3); }
.aj-aviso-instalacion p { overflow-wrap: anywhere; }

/* ---- src/css_Vistas.html ---- *//* ============================================================
   BUDGETCOUPLE v2 — Estilos de cada vista
   Archivo: css_Vistas.html
   Versión del archivo: 2.5
   ============================================================ */
.num-prop { font-variant-numeric: proportional-nums; }
.ico-en-linea { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }
.tarjeta__cab--relleno { padding: var(--e-5) var(--e-5) 0; margin-bottom: var(--e-2); }
.lista-fin { text-align: center; padding: var(--e-5) var(--e-4) var(--e-2); }
.lista--hoja { margin: 0 calc(var(--e-5) * -1); }
.lista--hoja .fila svg { width: 22px; height: 22px; color: var(--tinta-2); }
.fila--peligro, .fila--peligro .fila__titulo, .fila--peligro svg { color: var(--peligro-tinta) !important; }
.marca-ritmo { display: inline-block; width: 2px; height: 12px; background: var(--g-ritmo); opacity: .55; border-radius: 2px; vertical-align: -2px; margin-right: 6px; }

/* =================== INICIO =================== */
.mi-mes {
  background: var(--panel);
  color: var(--panel-tinta);
  border-radius: var(--r-xl);
  padding: var(--e-6) var(--e-5) var(--e-5);
  position: relative; overflow: hidden;
  box-shadow: var(--sombra-2);
}
.mi-mes::after {
  /* motivo de la pareja: dos círculos que se cruzan */
  content: ""; position: absolute; right: -54px; top: -64px; width: 200px; height: 200px; border-radius: 50%;
  box-shadow: -70px 0 0 0 rgba(255,255,255,.05);
  background: rgba(255,255,255,.05);
  pointer-events: none;
}
.mi-mes__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); justify-content: space-between; position: relative; z-index: 1; }
.mi-mes__titulo { font-size: var(--t-base); font-weight: 600; color: var(--panel-tinta-2); }
.mi-mes__chip { font-size: var(--t-2xs); font-weight: 600; padding: 4px 8px; border-radius: var(--r-full); background: var(--panel-pista); color: var(--panel-tinta); white-space: nowrap; }
.mi-mes__cifra { font-size: min(var(--t-4xl), 13vw); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin-top: var(--e-2); position: relative; z-index: 1; overflow-wrap: anywhere; }
.mi-mes__desglose { display: flex; flex-wrap: wrap; gap: 4px var(--e-4); margin-top: var(--e-2); font-size: var(--t-sm); color: var(--panel-tinta-2); font-variant-numeric: tabular-nums; }
.mi-mes__desglose > span { display: inline-flex; align-items: center; gap: 6px; }
.mi-mes__desglose .punto { width: 8px; height: 8px; }
.mi-mes__barra { display: flex; gap: 2px; height: 8px; border-radius: var(--r-full); background: var(--panel-pista); margin-top: var(--e-4); overflow: hidden; }
.mi-mes__nota { font-size: var(--t-xs); color: var(--panel-tinta-2); margin-top: var(--e-2); position: relative; z-index: 1; }
.mi-mes__pista {
  display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-4); min-height: 44px;
  padding: var(--e-2) var(--e-3); border-radius: var(--r-s); background: var(--panel-pista);
  color: var(--panel-tinta); font-size: var(--t-sm); font-weight: 550; position: relative; z-index: 1;
}
.mi-mes__pista:hover { text-decoration: none; background: rgba(255,255,255,.28); }
.mi-mes__pista span { flex: 1; min-width: 0; }
.mi-mes__pista svg { width: 18px; height: 18px; flex-shrink: 0; }
.mi-mes__barra-personal { background: var(--panel-tinta); border-radius: var(--r-full) 0 0 var(--r-full); }
.mi-mes__barra-comun { background: var(--panel-tinta); opacity: .45; }
/* MOV-05: las cifras nunca se cortan. Cada dato ocupa lo que mide su cifra y, si no caben los tres, pasan a otra fila. */
.mi-mes__stats { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-4); margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--panel-pista); }
.mi-mes__stats > div { flex: 1 1 auto; min-width: 0; }
.mi-mes__stats dt { font-size: var(--t-xs); color: var(--panel-tinta-2); }
.mi-mes__stats dd { font-size: var(--t-md); font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .mi-mes { padding: var(--e-8) var(--e-8) var(--e-6); }
  .mi-mes__cifra { font-size: clamp(2.5rem, 4.4vw, 3.5rem); }
}

/* ESC-07 / SEG-03: en columnas estrechas (o con un nombre sin espacios) la frase pasa debajo de los avatares y se parte. */
.saldo-tarjeta__cuerpo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); margin-bottom: var(--e-4); }
.saldo-tarjeta__frase { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.saldo-tarjeta--favor .saldo-tarjeta__frase { color: var(--ok-tinta); }
.saldo-tarjeta__nota { display: flex; align-items: center; gap: 6px; }
.saldo-tarjeta__nota svg { width: 16px; height: 16px; color: var(--ok); }
.flujo { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.flujo__flecha { color: var(--tinta-3); display: grid; }
.flujo__flecha svg { width: 18px; height: 18px; }
.pareja .avatar--l + .avatar--l { margin-left: -14px; box-shadow: inset 0 0 0 2.5px var(--c), 0 0 0 3px var(--superficie); }

.hogar-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento-tinta); }
.hogar-ico svg { width: 18px; height: 18px; }
.apilada { display: flex; gap: 2px; height: 10px; margin: var(--e-4) 0 var(--e-3); border-radius: var(--r-full); overflow: hidden; background: var(--g-pista); }
.apilada__seg { background: var(--c); min-width: 4px; }
.aportes { display: flex; flex-direction: column; gap: var(--e-2); }
.aportes__fila { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); color: var(--tinta-2); }
.aportes__fila .trunc { flex: 1; white-space: normal; overflow-wrap: anywhere; }
.aportes__fila b { color: var(--tinta); font-weight: 650; }

.pila-alertas { display: flex; flex-direction: column; gap: var(--e-2); }
.alerta-fila { align-items: center; text-decoration: none !important; }
.alerta-fila > svg:last-child { width: 18px; height: 18px; opacity: .7; margin: 0; }

.pres-resumen { display: flex; flex-direction: column; gap: var(--e-2); margin: 0 calc(var(--e-3) * -1); }
.pres-resumen__fila { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3); border-radius: var(--r-m); width: 100%; transition: background var(--dur-1); }
.pres-resumen__fila:hover { background: var(--superficie-2); }
.pres-resumen__fila--vacia { flex-direction: row; align-items: center; color: var(--tinta-3); font-size: var(--t-sm); }
.pres-resumen__fila--vacia svg { width: 18px; height: 18px; }
.pres-resumen__fila--vacia span:nth-child(2) { flex: 1; }
.pres-resumen__fila--vacia .btn--texto { font-weight: 600; color: var(--acento-tinta); }
.pres-resumen__cab, .pres-resumen__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--e-3); }
.pres-resumen__pie { font-size: var(--t-sm); color: var(--tinta-3); }
.pres-resumen__ritmo { margin-top: var(--e-3); }

.metas-mini { display: flex; flex-direction: column; gap: var(--e-1); margin: 0 calc(var(--e-3) * -1); }
.metas-mini__fila { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); border-radius: var(--r-m); color: inherit; }
.metas-mini__fila:hover { background: var(--superficie-2); text-decoration: none; }
.metas-mini__pct { font-weight: 650; font-size: var(--t-sm); color: var(--tinta-2); }
.metas-mini .fila__titulo { white-space: normal; overflow-wrap: anywhere; }

/* ---------- v2.1 · Inicio: Evento en curso, Patrimonio y Plan (§5.3) ---------- */
.ini-enlace { display: grid; color: var(--tinta-3); margin-right: -4px; }
.ini-enlace svg { width: 18px; height: 18px; }
a.tarjeta { display: block; color: inherit; }
a.tarjeta:hover { text-decoration: none; }

/* Evento en curso: arriba de todo; en escritorio, a lo ancho y en una fila */
.ini-evento { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin-bottom: var(--e-4); }
.ini-evento__cab { display: flex; align-items: center; gap: var(--e-3); flex: 1 1 15rem; min-width: 0; }
.ini-evento__emoji { width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center; font-size: 28px; line-height: 1; background: var(--acento-suave); overflow: hidden; white-space: nowrap; }
.ini-evento__titulos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ini-evento__ante { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e-2); font-size: var(--t-xs); color: var(--tinta-3); font-weight: 550; }
.ini-evento__ante .insignia svg { width: 12px; height: 12px; }
.ini-evento__dia { overflow-wrap: anywhere; }
.ini-evento__nombre { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; }
.ini-evento__dias { margin-top: 6px; max-width: 16rem; }
.ini-evento__cifras { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); flex: 1 1 14rem; min-width: 0; }
.ini-evento__cifras > div { flex: 1 1 auto; min-width: 0; }
.ini-evento__cifras dt { font-size: var(--t-xs); color: var(--tinta-3); }
.ini-evento__cifras dd { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.015em; margin-top: 2px; overflow-wrap: anywhere; }
.ini-evento__deudas { display: flex; flex-direction: column; gap: var(--e-2); flex: 1 1 100%; }
.ini-evento__deuda { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); font-weight: 600; overflow-wrap: anywhere; }
.ini-evento__deuda > span:last-child { min-width: 0; }
.ini-evento__deuda--favor { color: var(--ok-tinta); }
.ini-evento__deuda--contra { color: var(--aviso-tinta); }
.ini-evento__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); flex: 1 1 100%; }
.ini-evento__acciones .btn { flex: 1 1 auto; }
@media (min-width: 900px) {
  .ini-evento { padding: var(--e-5) var(--e-6); margin-bottom: var(--e-5); }
  .ini-evento__cab { flex: 1 1 18rem; }
  .ini-evento__cifras { flex: 0 1 auto; }
  .ini-evento__acciones { flex: 0 0 auto; }
  .ini-evento__deudas { order: 1; padding-top: var(--e-3); border-top: 1px solid var(--linea); }
  .ini-evento__acciones .btn { flex: 0 0 auto; }
}

/* Patrimonio */
.ini-pat__cab { margin-bottom: var(--e-3); }
.ini-pat__total { margin-top: 2px; overflow-wrap: anywhere; }
.ini-pat__monedas { margin-top: var(--e-3); }
.ini-pat__aviso { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--e-3); padding: var(--e-2) var(--e-3); border-radius: var(--r-s); background: var(--aviso-suave); color: var(--aviso-tinta); font-size: var(--t-xs); font-weight: 550; }
.ini-pat__aviso svg { width: 16px; height: 16px; flex-shrink: 0; }
.ini-pat__aviso span { min-width: 0; overflow-wrap: anywhere; }
.ini-pat__fuente { margin-top: var(--e-3); font-size: var(--t-xs); overflow-wrap: anywhere; }

/* Plan de ahorro */
.ini-plan .tarjeta__cab { margin-bottom: var(--e-3); }
.ini-plan__cifras { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-2); margin-bottom: var(--e-3); }
.ini-plan__cifras .cifra { overflow-wrap: anywhere; }
.ini-plan__estado { margin-top: var(--e-3); }
.ini-plan__texto { margin-top: 4px; line-height: 1.45; }
.ini-plan__proy { margin-top: var(--e-3); font-size: var(--t-sm); color: var(--tinta-2); }
.ini-plan__proy b { color: var(--tinta); font-weight: 650; }
.ini-plan__curso { margin-top: var(--e-2); }

/* «Nuestro hogar»: cuenta común e invitados */
.apilada__seg--invitados { background: repeating-linear-gradient(45deg, var(--c) 0 3px, var(--g-pista) 3px 6px); }
.aportes__nota { margin-top: var(--e-3); font-size: var(--t-xs); }

/* Aviso al ADMIN: filas de la hoja que la app no puede usar (INS-09) */
.avisos-datos { margin-bottom: var(--e-4); }
.avisos-datos .nota__cuerpo { display: flex; flex-direction: column; gap: var(--e-1); }
.avisos-datos__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.avisos-datos__acciones .btn--borde { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.avisos-datos__acciones .btn--texto { color: inherit; }
.avisos-datos__intro { color: var(--tinta-2); margin-bottom: var(--e-3); }
.avisos-datos__lista { display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-sm); }
.avisos-datos__lista li { display: flex; gap: var(--e-2); align-items: flex-start; padding: var(--e-2) var(--e-3); border-radius: var(--r-s); background: var(--superficie-2); overflow-wrap: anywhere; }
.avisos-datos__lista svg { color: var(--aviso-tinta); flex-shrink: 0; margin-top: 2px; }
@media (min-width: 900px) { .avisos-datos { margin-bottom: var(--e-5); } }

/* =================== FORMULARIO DE MOVIMIENTO =================== */
.hoja--mov .hoja__cuerpo { padding-top: var(--e-1); }
.form-mov__tipo { max-width: 260px; margin: 0 auto; }
.form-mov__bloque { margin-top: var(--e-5); }
.form-mov__bloque > .campo__etiqueta { margin-bottom: var(--e-2); }
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); }
/* UI-16: a menos de 360 px, tres columnas para que los nombres de una palabra («Supermercado») quepan enteros. */
@media (max-width: 359px) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 420px) { .cats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cat {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  padding: var(--e-2) 0; border-radius: var(--r-m); min-height: 76px; min-width: 0;
  transition: background var(--dur-1), box-shadow var(--dur-1);
}
.cat:hover { background: var(--superficie-2); }
.cat__emoji {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px;
  position: relative; isolation: isolate; background: var(--superficie); overflow: hidden; white-space: nowrap;
  transition: transform var(--dur-1) var(--curva), box-shadow var(--dur-1);
}
.cat__emoji::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c); opacity: .14; z-index: -1; }
/* Nombre en dos líneas como mucho, con la letra del sistema (MOV-06). UI-16 (DQ34): nunca se parte una palabra; solo se
   pasa de línea por los espacios y, si una palabra sola no cabe (letra muy grande), se corta con «…» (el nombre entero
   sigue en el botón para el lector de pantalla). */
.cat__nombre {
  font-size: var(--t-2xs); font-weight: 550; color: var(--tinta-2); text-align: center; line-height: 1.2; max-width: 100%;
  padding: 0 2px; letter-spacing: -0.005em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  overflow-wrap: normal; word-break: normal; hyphens: manual; text-overflow: ellipsis;
}
.cat[aria-checked="true"] { background: var(--acento-suave); }
.cat[aria-checked="true"] .cat__emoji { box-shadow: 0 0 0 2px var(--acento); transform: scale(1.04); }
.cat[aria-checked="true"] .cat__nombre { color: var(--acento-tinta); font-weight: 650; }
.form-mov__ayuda { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--tinta-3); margin-top: var(--e-2); }
.form-mov__ayuda svg { width: 16px; height: 16px; }
/* v2.5 (B): «Cuenta 100 % para quien paga · …» en lugar del reparto (fuera de los eventos) */
.form-mov__responsabilidad { align-items: flex-start; margin-top: 14px; line-height: 1.4; }
.form-mov__responsabilidad svg { flex-shrink: 0; margin-top: 2px; }
.form-mov__compartido { margin-top: var(--e-1); }
.form-mov__compartido > .campo__etiqueta { display: block; margin: var(--e-3) 0 var(--e-2); }
.partes { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-3); }
.parte { display: flex; align-items: center; gap: var(--e-2); }
.parte__nombre { flex: 1; font-weight: 550; }
.parte__entrada { width: 150px; flex-shrink: 0; }
.parte__entrada .entrada { min-height: 44px; text-align: right; font-variant-numeric: tabular-nums; padding-right: 40px; }
.parte__entrada .entrada-con-sufijo__sufijo { right: 14px; }
.preview { display: flex; flex-wrap: wrap; gap: 6px var(--e-4); margin-top: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-s); background: var(--superficie-2); font-size: var(--t-sm); color: var(--tinta-2); }
.preview__parte { display: inline-flex; align-items: center; gap: 6px; }
.preview__parte b { color: var(--tinta); font-weight: 650; }
.preview__aviso { flex-basis: 100%; display: flex; align-items: center; gap: 6px; color: var(--aviso-tinta); font-weight: 550; }
.preview__aviso svg { width: 16px; height: 16px; }
.chip--fecha { padding: 0 6px 0 12px; gap: 4px; }
.chip--fecha > svg { width: 16px; height: 16px; }
.chip__fecha { border: 0; background: transparent; color: inherit; font-size: var(--t-sm); font-weight: 550; min-height: 34px; padding: 0 4px; width: 132px; color-scheme: inherit; }
.chip--fecha.activo .chip__fecha { color: var(--fondo); }
.chip--fecha.activo .chip__fecha::-webkit-calendar-picker-indicator { filter: invert(1); }
:root[data-theme="dark"] .chip--fecha.activo .chip__fecha::-webkit-calendar-picker-indicator { filter: none; }
.entrada--notas { min-height: 64px; }
.form-mov__repetir { padding: var(--e-2) var(--e-4); border-radius: var(--r-m); background: var(--superficie-2); }
.form-mov__meta { margin-top: var(--e-4); text-align: center; }
/* Conflicto de versión (ESC-01), en movimientos, pagos fijos y metas */
.form-mov__conflicto { margin-bottom: var(--e-3); }
.form-mov__conflicto .nota__cuerpo { display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; }
.form-mov__cambios { display: flex; flex-direction: column; gap: 2px; padding-left: 1.1em; list-style: disc; overflow-wrap: anywhere; }
.form-mov__conflicto .btn--borde { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
/* Borrador recuperado (MOV-11) */
.form-mov__recuperado { align-items: center; margin-bottom: var(--e-3); flex-wrap: wrap; }
.form-mov__recuperado .nota__cuerpo { flex: 1 1 12rem; }
.form-mov__recuperado .btn--texto { color: inherit; margin: -6px -6px -6px 0; }
/* v2.1 (F-NUC, §5.3): conversión en vivo, tipo manual y moneda del importe */
.form-mov__conversion { justify-content: center; flex-wrap: wrap; text-align: center; gap: 2px 6px; margin-top: 0; }
.form-mov__conversion > span { min-width: 0; overflow-wrap: anywhere; }
.form-mov__conversion .btn--texto { margin: -4px 0; }
.form-mov__tasa { margin-top: var(--e-2); }
.form-mov__tasa .campo__ayuda .btn--texto { margin-left: calc(var(--e-3) * -1); }
[data-testid="mov-sin-tasa"] { margin-top: var(--e-2); }
.fila-mov__fijo { display: inline-grid; color: var(--tinta-3); }
.fila-mov__fijo svg { width: 14px; height: 14px; }

/* =================== MOVIMIENTOS =================== */
.mov-barra { position: relative; display: flex; flex-direction: column; gap: var(--e-3); margin-bottom: var(--e-4); }
.buscador {
  display: flex; align-items: center; gap: var(--e-2);
  background: var(--superficie); border-radius: var(--r-full); box-shadow: inset 0 0 0 1px var(--linea);
  padding: 0 var(--e-4); min-height: 46px; color: var(--tinta-3);
}
.buscador:focus-within { box-shadow: inset 0 0 0 2px var(--acento); }
.buscador svg { width: 20px; height: 20px; }
.buscador__entrada { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; min-height: 44px; color: var(--tinta); }
.buscador__entrada::placeholder { color: var(--tinta-3); }
.buscador__entrada::-webkit-search-cancel-button { cursor: pointer; }
.chip__ico { width: 14px; height: 14px; margin-right: -4px; }
@media (min-width: 900px) {
  .mov-barra { flex-direction: row; align-items: center; }
  .buscador { width: 340px; flex-shrink: 0; }
  .chips--scroll { margin: 0; padding: 2px; flex-wrap: wrap; overflow: visible; }
}
/* MOV-05: cada total ocupa lo que mide su cifra; si no caben en una fila, pasan a la siguiente (la línea de 1 px
   que los separa es el fondo que asoma entre ellos). Nunca «…». */
.resumen-mes { display: flex; flex-wrap: wrap; gap: 1px; background: var(--linea); border-radius: var(--r-l); box-shadow: var(--sombra-1); overflow: hidden; }
.resumen-mes__item { flex: 1 1 auto; padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4); display: flex; flex-direction: column; gap: 2px; min-width: 0; background: var(--superficie); }
.resumen-mes__item b { font-size: var(--t-base); font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.resumen-mes__nota { margin: var(--e-2) var(--e-1) 0; font-size: var(--t-xs); }
@media (min-width: 900px) { .resumen-mes__item { padding: var(--e-4) var(--e-5); } .resumen-mes__item b { font-size: var(--t-lg); } }
.dia { margin-top: var(--e-5); }
.dia__cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); margin: 0 var(--e-1) var(--e-2); font-size: var(--t-sm); font-weight: 650; color: var(--tinta-2); }
.dia__total { color: var(--tinta-3); font-weight: 600; }

/* =================== PRESUPUESTOS =================== */
.pres-tabs { max-width: 360px; margin-bottom: var(--e-4); }
.pres-heredado { margin-bottom: var(--e-4); }
/* MOV-04: si la cifra no cabe junto al anillo, los textos pasan debajo; la cifra se parte antes que salirse. */
.pres-total__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) var(--e-5); }
.pres-total__textos { flex: 1 1 9rem; min-width: 0; }
.pres-total__textos .cifra-grande { overflow-wrap: anywhere; font-size: clamp(var(--t-xl), 7vw, var(--t-2xl)); }
.pres-total__restante { margin-top: var(--e-2); font-weight: 650; color: var(--ok-tinta); }
.pres-total__restante.negativo { color: var(--peligro-tinta); }   /* MOV-17: «Te has pasado» en rojo */
.pres-total__restante--limite { color: var(--aviso-tinta); }
.pres-total__ritmo { margin-top: var(--e-4); line-height: 1.5; }
.pres-nota-eventos { margin-top: var(--e-3); line-height: 1.45; overflow-wrap: anywhere; }
.pres-ingreso { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-4); margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.pres-ingreso > div { flex: 1 1 auto; min-width: 0; }
.pres-ingreso dt { font-size: var(--t-xs); color: var(--tinta-3); }
.pres-ingreso dd { font-weight: 650; margin-top: 2px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pres-ingreso-vacio { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.pres-lineas { padding: 0 0 var(--e-2); }
.pres-linea { display: flex; align-items: flex-start; gap: var(--e-3); width: 100%; padding: var(--e-3) var(--e-5); transition: background var(--dur-1); }
.pres-linea:hover { background: var(--superficie-2); }
.pres-linea__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-2); padding-top: 2px; }
.pres-linea__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--e-3); }
.pres-linea__cifras { white-space: nowrap; font-size: var(--t-sm); }
.pres-linea__cifras b { font-weight: 650; font-size: var(--t-base); }
.pres-linea__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--e-3); font-size: var(--t-xs); }
.pres-editor__cat { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-5); }
/* v2.5 (C) · Presupuestos del hogar mes a mes: alcance, «Ajustado este mes» y vista anual. La rejilla se desplaza en
   horizontal dentro de su marco (.tabla-datos__marco): la página nunca se ensancha; la columna de la categoría se queda fija. */
.pres-cab-vista { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.pres-cab-vista .pres-tabs { flex: 1 1 15rem; margin-bottom: 0; }
.pres-anual-btn svg { width: 18px; height: 18px; }
.pres-ajustado { margin-bottom: var(--e-4); }
.pres-ajustado .nota__cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.pres-ajustado__texto { line-height: 1.45; overflow-wrap: anywhere; }
.pres-ajustado__accion { margin-top: 2px; background: var(--superficie); }
.pres-linea__ajuste { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--e-2); font-size: var(--t-xs); margin-top: calc(var(--e-1) * -1); }
.pres-alcance .chips { margin-top: var(--e-1); }
.pres-alcance .chip { white-space: normal; text-align: left; min-height: var(--toque); }
.pres-alcance-nota { margin-top: var(--e-2); }
.pres-editor__habitual { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-2); }
.pres-editor__habitual .btn { min-height: 32px; margin-left: calc(var(--e-2) * -1); }
.pres-anual__cab { flex-wrap: wrap; row-gap: var(--e-2); }
.pres-anual__anio { display: inline-flex; align-items: center; gap: var(--e-1); margin-left: auto; }
.pres-anual__anio .icono-btn { width: var(--toque); height: var(--toque); }
.pres-anual__leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--e-4); padding: 0 var(--e-5) var(--e-3); line-height: 1.45; }
.pres-anual__leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.pres-anual__muestra { display: inline-block; width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.pres-anual__muestra--ajustada { background: var(--aviso-suave); box-shadow: inset 0 0 0 1.5px var(--aviso-tinta); }
.pres-anual__marco { padding: 0 0 var(--e-2); }
.pres-anual__tabla { min-width: max-content; }
.pres-anual__tabla th, .pres-anual__tabla td { padding: 2px 1px; }
.pres-anual__tabla thead th { padding: 0 2px 4px; }
.pres-anual__tabla tfoot th, .pres-anual__tabla tfoot td { padding: var(--e-2) var(--e-2) var(--e-2) 2px; font-weight: 650; color: var(--tinta); border-bottom: 0; border-top: 1px solid var(--linea-fuerte); }
.pres-anual__tabla th.pres-anual__cat { position: sticky; left: 0; z-index: 1; background: var(--superficie); padding-left: var(--e-4); text-transform: none; color: var(--tinta); font-weight: 550; box-shadow: 1px 0 0 var(--linea); }
.pres-anual__cat-cab { position: sticky; left: 0; z-index: 1; background: var(--superficie); padding-left: var(--e-4) !important; }
.pres-anual__cat-in { display: flex; align-items: center; gap: var(--e-2); max-width: 8.75rem; min-width: 0; padding-right: var(--e-2); }
@media (max-width: 599px) {
  .pres-anual__tabla th.pres-anual__cat, .pres-anual__cat-cab { padding-left: var(--e-4) !important; }
  .pres-anual__cat-in { max-width: 6.75rem; }
  .pres-anual__leyenda { padding: 0 var(--e-4) var(--e-3); }
}
.pres-anual__mes { text-align: center !important; }
.pres-anual__mes-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 36px; padding: 0 var(--e-2); border-radius: var(--r-s); color: var(--tinta-2); font-weight: 650; }
.pres-anual__mes-btn:hover { background: var(--superficie-2); }
.pres-anual__col--hoy .pres-anual__mes-btn { color: var(--acento-tinta); box-shadow: inset 0 -2px 0 var(--acento); border-radius: var(--r-s) var(--r-s) 0 0; }
.pres-anual__col--sel .pres-anual__mes-btn { background: var(--acento-suave); color: var(--acento-tinta); }
.pres-anual__punto { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--aviso-tinta); }
.pres-anual__celda { display: block; width: 100%; min-width: 3.6rem; min-height: 40px; padding: 0 5px; border-radius: 10px; text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta); transition: background var(--dur-1); }
.pres-anual__celda:hover { background: var(--superficie-2); }
.pres-anual__celda--heredada { color: var(--tinta-3); }
.pres-anual__celda--vacia { color: var(--tinta-3); text-align: center; }
.pres-anual__celda--ajustada { background: var(--aviso-suave); color: var(--aviso-tinta); font-weight: 650; box-shadow: inset 0 0 0 1.5px var(--aviso-tinta); }
.pres-anual__celda--ajustada:hover { background: var(--aviso-suave); filter: brightness(.97); }
.pres-anual__celda[data-pendiente="true"] { opacity: .7; }
/* v2.5.x (F2, QA3-5): la mezcla de colores solo donde se entiende (Safari iOS 15–16.1 se queda sin el tinte de la
   columna). La condición va en mayúsculas, que en CSS es lo mismo: el único uso en minúsculas es el de dentro. */
@supports (background: color-mix(in srgb, red, blue)) {
  td.pres-anual__col--sel, td.pres-anual__col--sel.num { background: color-mix(in srgb, var(--acento-suave) 45%, transparent); }
}
/* v2.5.x (F2, QA2 C-2): el nombre de la categoría pasa a una segunda línea (por palabras) en vez de cortarse, y lleva
   `title`; en el móvil, la columna tiene al menos 112 px. */
.pres-anual__cat-in .trunc { white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; }
@media (max-width: 480px) {
  .pres-anual__cat-in { min-width: 112px; max-width: none; }
  .pres-anual__cat-in .trunc { max-width: 112px; }
}
.pres-anual__meses { padding: 0 var(--e-5) var(--e-5); }
@media (min-width: 900px) { .rejilla--pres { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

/* =================== METAS =================== */
.metas-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-4); margin-bottom: var(--e-4); }
.metas-cab__total { min-width: 0; }
.metas-cab__total .cifra-grande { overflow-wrap: anywhere; }
.metas-tabs { margin-bottom: var(--e-5); max-width: 480px; }
.meta { display: flex; flex-direction: column; gap: var(--e-3); }
.meta__cab { display: flex; align-items: center; gap: var(--e-4); }
.meta__titulos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.meta__nombre { overflow-wrap: anywhere; }
.meta__menu { align-self: flex-start; margin: -6px -8px 0 0; }
.meta__cifras { font-size: var(--t-sm); overflow-wrap: anywhere; }
.meta__cifras b { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; }
.progreso--meta .progreso__barra { background: var(--c); }
.meta__info { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.meta__info:empty { display: none; }
.meta__cuota { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); color: var(--tinta-2); background: var(--superficie-2); padding: var(--e-2) var(--e-3); border-radius: var(--r-s); }
.meta__cuota svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--acento-tinta); }
.meta__aportantes { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); }
.meta__aportantes li { display: flex; align-items: center; gap: var(--e-2); color: var(--tinta-2); }
.meta__aportantes li span:nth-child(2) { flex: 1; }
.meta__historial summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--acento-tinta); min-height: var(--toque); display: flex; align-items: center; list-style: none; }
.meta__historial summary::-webkit-details-marker { display: none; }
.meta__historial ul { border-top: 1px solid var(--linea); }
.meta__aporte { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); min-height: 48px; padding: var(--e-1) 0; border-bottom: 1px solid var(--linea); }
/* ESC-15: fecha y nota del historial completas (la nota pasa debajo de la fecha si no cabe) */
.meta__aporte-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-2); }
.meta__aporte-fecha { color: var(--tinta-3); flex-shrink: 0; }
.meta__aporte-nota { flex: 1 1 8rem; min-width: 0; color: var(--tinta-2); overflow-wrap: anywhere; }
.meta__aporte > b { flex-shrink: 0; }
.meta__historial-nota { padding: var(--e-2) 0 0; }
.meta__acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); gap: var(--e-2); margin-top: auto; padding-top: var(--e-1); }
.meta__acciones .btn--bloque { grid-column: 1 / -1; }

/* =================== CUENTAS =================== */
.saldo-hero {
  background: var(--superficie); border-radius: var(--r-xl); box-shadow: var(--sombra-1);
  padding: var(--e-8) var(--e-5) var(--e-6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--e-3);
}
.saldo-hero__avatares { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-2); }
.saldo-hero__flecha { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-3); color: var(--tinta-2); }
.saldo-hero__flecha svg { width: 22px; height: 22px; }
.pareja--grande .avatar + .avatar { margin-left: -20px; box-shadow: inset 0 0 0 3px var(--c), 0 0 0 4px var(--superficie); }
.saldo-hero__frase { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; max-width: 22ch; min-width: 0; overflow-wrap: anywhere; }
.saldo-hero--favor .saldo-hero__frase { color: var(--ok-tinta); }
.saldo-hero__sub { color: var(--tinta-3); font-size: var(--t-sm); max-width: 36ch; }
.saldo-hero__btn { margin-top: var(--e-3); min-width: 220px; }
.ico-cat svg { width: 20px; height: 20px; color: var(--acento-tinta); }
.fila--liq { gap: var(--e-2); padding-right: var(--e-2); }
/* ESC-07: quién pagó a quién se lee entero aunque la columna sea estrecha */
.fila--liq .fila__titulo { white-space: normal; overflow-wrap: anywhere; }
.ver-mas { display: flex; justify-content: center; padding: var(--e-2) 0 var(--e-3); border-top: 1px solid var(--linea); }
.netos { display: flex; flex-direction: column; gap: var(--e-3); }
.netos__fila { display: flex; align-items: center; gap: var(--e-3); }
.netos__fila b { font-size: var(--t-md); }
.saldar-flujo { display: flex; align-items: center; justify-content: center; gap: var(--e-4); margin: var(--e-2) 0 var(--e-3); }
.saldar-flujo__p { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-sm); }
/* v2.5 (Feature A) · Aportaciones del hogar */
.apo-hero { padding-top: var(--e-6); }
.apo-hero__miembros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); width: 100%; max-width: 520px; margin-bottom: var(--e-2); }
.apo-miembro { background: var(--superficie-2); border-radius: var(--r-l); padding: var(--e-3) var(--e-4); text-align: left; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.apo-miembro__cab { display: flex; align-items: center; gap: var(--e-2); font-weight: 600; font-size: var(--t-sm); min-width: 0; }
.apo-miembro__cifra { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }
.apo-miembro__pie { color: var(--tinta-3); font-size: var(--t-xs); }
.apo-miembro--pendiente { box-shadow: inset 0 0 0 1.5px var(--aviso); }
.apo-hero__frase { max-width: 26ch; font-size: clamp(var(--t-lg), 5.5vw, var(--t-2xl)); }
.apo-hero__frase b { font-weight: 800; }
.apo-hero__cuenta { display: inline-flex; align-items: center; gap: var(--e-2); max-width: 100%; padding: 6px var(--e-3); border-radius: var(--r-full); background: var(--acento-suave); color: var(--acento-tinta); font-size: var(--t-sm); font-weight: 600; }
.apo-hero__cuenta b { font-weight: 700; }
.apo-hero__pista { display: flex; align-items: flex-start; gap: 6px; max-width: 40ch; text-align: left; }
.apo-hero__pista svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.apo-meses { display: flex; flex-direction: column; gap: var(--e-4); }
.apo-mes + .apo-mes { border-top: 1px solid var(--linea); padding-top: var(--e-4); }
.apo-mes__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; }
.apo-mes__titulo { font-size: var(--t-md); font-weight: 700; }
.apo-mes__pres { margin: 4px 0 var(--e-2); }
.apo-mes__pres b { color: var(--tinta); font-weight: 650; }
.apo-mes__tabla td:first-child { text-transform: none; }
.apo-mes__quien { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tinta); }
.apo-meses__nota { margin-top: var(--e-3); font-size: var(--t-xs); }
.apt-tipo { margin-bottom: var(--e-4); }
.apt-nota-cuenta { margin: var(--e-2) 0 var(--e-4); }
@media (max-width: 520px) {
  .apo-miembro { padding: var(--e-3); }
  .apo-miembro__cifra { font-size: clamp(1rem, 4.8vw, var(--t-xl)); white-space: nowrap; overflow-wrap: normal; }
}
.saldar-flujo__linea { color: var(--tinta-3); display: grid; }
.saldar-flujo__linea svg { width: 26px; height: 26px; }
/* v2.5 (F3) · Aportaciones: pie del héroe, pago antiguo en «Mes a mes» */
.apo-hero__desde { color: var(--tinta-3); font-size: var(--t-xs); margin-top: calc(var(--e-1) * -1); }
.apo-mes__antiguo { margin-top: var(--e-2); font-size: var(--t-xs); overflow-wrap: anywhere; }
/* v2.5 (F3, C-3) · Selector de mes: el mes es un botón que abre «Elegir mes» (rejilla de 4 columnas por año) */
button.selector-mes__etiqueta { min-height: var(--toque); border-radius: var(--r-full); }
button.selector-mes__etiqueta:hover { background: var(--superficie-2); }
.selector-mes__abrir { display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; color: var(--tinta-3); }
.mes-picker { display: flex; flex-direction: column; gap: var(--e-5); padding-bottom: var(--e-2); }
.mes-picker__titulo { font-size: var(--t-sm); font-weight: 700; color: var(--tinta-2); margin-bottom: var(--e-2); }
.mes-picker__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); }
.mes-picker__op {
  min-height: var(--toque); border-radius: var(--r-s); text-align: center; font-weight: 550; font-size: var(--t-sm);
  background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea-fuerte); color: var(--tinta-2);
}
.mes-picker__op:hover { background: var(--superficie-2); }
.mes-picker__op--actual { color: var(--acento-tinta); font-weight: 700; box-shadow: inset 0 0 0 2px var(--acento); }
.mes-picker__op[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); }
.mes-picker__op--actual[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--acento), inset 0 0 0 4px var(--fondo); }

/* =================== PAGOS FIJOS =================== */
.rec-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-4); flex-wrap: wrap; }
.rec-cab__resumen { min-width: 0; }
.rec-atrasados { margin-top: var(--e-4); align-items: center; flex-wrap: wrap; }
.rec-atrasados .nota__cuerpo { flex: 1 1 12rem; }
.rec-atrasados .btn--borde { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.fila--rec { position: relative; }
.fila__toque { position: absolute; inset: 0; z-index: 0; border-radius: 0; }
.fila__toque:hover { background: var(--superficie-2); }
.fila--rec > *:not(.fila__toque) { position: relative; z-index: 1; pointer-events: none; }
.fila--rec > .fila__extra { pointer-events: auto; }
.fila--rec .fila__sub { row-gap: 4px; }
.fila--pausada .ico-cat, .fila--pausada .fila__titulo, .fila--pausada .fila__importe { opacity: .55; }

/* =================== INFORMES =================== */
.inf-controles { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-4); }
.inf-nota-monedas { margin-bottom: var(--e-4); }
@media (min-width: 900px) { .inf-nota-monedas { margin-bottom: var(--e-5); } }
.inf-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); }
.inf-kpi { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inf-kpis__cab { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
.inf-provisional { color: var(--aviso-tinta); }
.inf-provisional svg { margin-right: 4px; }
.inf-kpi:last-child { grid-column: span 2; padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.inf-kpi .cifra { overflow-wrap: anywhere; }
.inf-kpi--ancho, .inf-kpi--personas { grid-column: 1 / -1; }
.inf-kpi__accion { align-self: flex-start; margin: 2px 0 0 calc(var(--e-3) * -1); }
.inf-personas { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); margin-top: 4px; }
.inf-personas li { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.inf-personas__nombre { color: var(--tinta-2); font-size: var(--t-sm); }
.inf-personas b { font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.inf-variacion { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-sm); font-weight: 600; margin-top: 2px; }
.inf-variacion svg { width: 16px; height: 16px; }
.inf-variacion--sube { color: var(--peligro-tinta); }
.inf-variacion--baja { color: var(--ok-tinta); }
.ranking { display: flex; flex-direction: column; gap: var(--e-3); }
.ranking__fila { display: flex; align-items: center; gap: var(--e-3); }
.ranking__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ranking__cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--e-3); font-size: var(--t-sm); font-weight: 550; }
.ranking__importe { font-weight: 650; white-space: nowrap; }
.ranking__barra-cont { display: flex; align-items: center; gap: var(--e-2); }
.ranking__pista { flex: 1; min-width: 24px; display: flex; }
.ranking__barra { display: block; height: 6px; border-radius: var(--r-full); background: var(--c); }
.ranking__pct { font-size: var(--t-xs); color: var(--tinta-3); white-space: nowrap; flex-shrink: 0; }

/* =================== AJUSTES =================== */
.aj-cab { margin-bottom: var(--e-4); display: flex; flex-direction: column; gap: 2px; }
.aj-perfil { display: flex; align-items: flex-end; gap: var(--e-4); }
.aj-acciones { display: flex; justify-content: flex-end; gap: var(--e-2); margin-top: var(--e-5); flex-wrap: wrap; }
.aj-miembros { display: flex; flex-direction: column; gap: var(--e-3); }
.aj-miembro { display: flex; align-items: center; gap: var(--e-3); }
.aj-miembro .fila__cuerpo { min-width: 0; }
.aj-email-miembro { overflow-wrap: anywhere; }
.aj-moneda-bloqueada { color: var(--tinta-2); }
.aj-miembro--inactivo { opacity: .55; }
.aj-invitar { margin-top: var(--e-5); padding-top: var(--e-5); border-top: 1px solid var(--linea); }
.aj-cat-tabs { padding: 0 var(--e-5) var(--e-2); }
.aj-cats { padding: 0 var(--e-2) var(--e-3); }
.aj-cat { display: flex; align-items: center; gap: var(--e-1); border-radius: var(--r-s); }
.aj-cat:hover { background: var(--superficie-2); }
.aj-cat__principal { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e-3); min-height: 52px; padding: 0 var(--e-3); font-weight: 550; }
.aj-cat__orden { display: flex; padding-right: var(--e-1); }
.aj-cat__orden .icono-btn { width: var(--toque); height: var(--toque); }   /* MOV-07: 44 × 44 sin solaparse */
.aj-cat__orden .icono-btn::before { content: none; }
.aj-cat__orden .icono-btn:disabled { opacity: .25; }
.aj-cat--archivada { opacity: .7; padding-right: var(--e-2); }
.aj-archivadas { padding: 0 var(--e-5) var(--e-4); }
.aj-archivadas summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--acento-tinta); min-height: var(--toque); display: flex; align-items: center; }
.aj-archivadas .aj-cats { padding: 0; margin: 0 calc(var(--e-3) * -1); }
.aj-umbral { max-width: 160px; }
.aj-estado-auto { display: flex; gap: var(--e-2); align-items: flex-start; margin-top: var(--e-2); padding: var(--e-3); border-radius: var(--r-s); background: var(--superficie-2); font-size: var(--t-sm); color: var(--tinta-2); }
.aj-estado-auto svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--acento-tinta); }
.aj-estado-auto b { color: var(--tinta); font-weight: 650; }
.aj-subtitulo { margin-bottom: var(--e-1); }
.aj-version { margin-top: var(--e-2); }
.aj-separador { height: 1px; background: var(--linea); margin: var(--e-3) 0; }
.aj-datos { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.aj-datos .btn { max-width: 100%; }
.fila-campos--emoji { grid-template-columns: 88px minmax(0, 1fr); }
/* v2.1: cuenta por defecto y compartir el plan (se guardan al momento) */
.aj-v21 { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: var(--e-3); }
.aj-v21 .campo + .aj-compartir-plan { margin-top: var(--e-1); }
/* v2.1: Tipos de cambio */
.aj-divisas__permiso { margin-bottom: var(--e-4); }
.aj-divisas__fuente { display: flex; flex-direction: column; gap: var(--e-2); }
.aj-divisas__fuente > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--e-3); padding: var(--e-2) var(--e-3); border-radius: var(--r-s); background: var(--superficie-2); }
.aj-divisas__fuente dt { font-size: var(--t-sm); color: var(--tinta-2); }
.aj-divisas__fuente dd { font-size: var(--t-sm); font-weight: 600; overflow-wrap: anywhere; }
.aj-divisas .aj-subtitulo { margin-top: var(--e-4); margin-bottom: var(--e-2); }
/* Arreglos QA v2.1: «Dar el permiso» (GAS-08) y tarea diaria del hogar (DQ27) */
.aj-divisas__permiso .nota__cuerpo, .aj-tarea-aviso .nota__cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.aj-divisas__permiso p, .aj-tarea-aviso p { overflow-wrap: anywhere; }
.aj-tarea-aviso { margin-bottom: var(--e-4); }
.aj-tarea-aviso .btn--borde { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.aj-divisas__nota { margin-top: var(--e-3); line-height: 1.45; }
.entrada--emoji { text-align: center; font-size: 24px; padding: 0; }

/* =================== ONBOARDING =================== */
.onb { min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; padding: calc(var(--seg-arriba) + var(--e-6)) var(--e-4) calc(var(--seg-abajo) + var(--e-8)); }
.onb__marco { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: var(--e-5); }
.onb__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.onb__marca { display: flex; align-items: center; gap: var(--e-3); font-weight: 700; font-size: var(--t-md); letter-spacing: -0.01em; }
.onb-pasos { display: flex; gap: 6px; }
.onb-pasos__p { width: 28px; height: 6px; border-radius: var(--r-full); background: var(--linea-fuerte); transition: background var(--dur-2), width var(--dur-2) var(--curva); }
.onb-pasos__p.hecho { background: var(--acento); opacity: .5; }
.onb-pasos__p.actual { background: var(--acento); width: 40px; }
.onb__tarjeta { background: var(--superficie); border-radius: var(--r-xl); box-shadow: var(--sombra-2); padding: var(--e-6) var(--e-5); }
.onb__titulo { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin-top: var(--e-1); }
.onb__sub { color: var(--tinta-2); margin-top: var(--e-2); }
.onb__cuerpo { margin-top: var(--e-6); }
.onb__acciones { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-8); }
.onb__acciones .btn--primario { min-width: 160px; }
.onb__pie { text-align: center; color: var(--tinta-3); font-size: var(--t-sm); overflow-wrap: anywhere; }
.onb__buscando { margin-top: var(--e-4); }
.onb-v1 { margin-top: var(--e-5); padding: var(--e-4); border-radius: var(--r-m); background: var(--acento-suave); }
.onb-v1__cab { display: flex; gap: var(--e-3); align-items: flex-start; margin-bottom: var(--e-2); }
.onb-v1__cab > svg { width: 24px; height: 24px; color: var(--acento-tinta); flex-shrink: 0; margin-top: 2px; }
.onb-v1 .etiqueta { color: var(--acento-tinta); opacity: .85; }
.onb-v1__perfiles { gap: var(--e-2); }
.onb-v1__mapa { display: flex; flex-direction: column; gap: 4px; margin-top: var(--e-2); overflow-wrap: anywhere; }
.onb-perfil { display: flex; align-items: flex-end; gap: var(--e-4); }
.onb-pareja--off { opacity: .5; }
.onb-sin-pareja { margin-top: var(--e-4); }
.onb-aviso-v1 { margin-top: var(--e-4); }
.onb-instalando { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.onb-instalando__giro {
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: var(--e-3);
  border: 4px solid var(--acento-suave); border-top-color: var(--acento);
  animation: girar 1s linear infinite;
}
.onb-instalando__lista { margin-top: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); color: var(--tinta-2); font-size: var(--t-sm); width: 100%; padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.onb-instalando__lista li { display: flex; align-items: center; gap: var(--e-2); overflow-wrap: anywhere; }
.onb-instalando__lista svg { color: var(--acento-tinta); flex-shrink: 0; }
.onb-resumen { display: flex; flex-direction: column; }
.onb-omitidos { margin-top: var(--e-2); display: flex; flex-direction: column; gap: var(--e-2); }
.onb-omitidos li { display: flex; flex-direction: column; gap: 2px; }
.onb-omitidos b { font-weight: 650; }
.onb-resumen div { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); }
.onb-resumen dt { color: var(--tinta-2); }
.onb-resumen dd { font-weight: 650; }
.onb-resumen__omitidos dt, .onb-resumen__omitidos dd { color: var(--aviso-tinta); }
@media (min-width: 900px) {
  .onb { align-items: center; }
  .onb__tarjeta { padding: var(--e-8); }
}

/* =================== PANTALLAS DE SISTEMA =================== */
.sistema { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--e-6) var(--e-4); }
.sistema__tarjeta { width: 100%; max-width: 520px; background: var(--superficie); border-radius: var(--r-xl); box-shadow: var(--sombra-2); padding: var(--e-8) var(--e-6); display: flex; flex-direction: column; gap: var(--e-3); }
.sistema__ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento-tinta); }
.sistema__ico svg { width: 28px; height: 28px; }
.sistema__ico--aviso { background: var(--aviso-suave); color: var(--aviso-tinta); }
.sistema__ico--peligro { background: var(--peligro-suave); color: var(--peligro-tinta); }
.sistema__titulo { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; margin-top: var(--e-2); }
.sistema__texto { color: var(--tinta-2); }
.sistema__email { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-4); background: var(--superficie-2); border-radius: var(--r-s); overflow-wrap: anywhere; }
.sistema__pasos { list-style: decimal; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--e-2); color: var(--tinta-2); font-size: var(--t-sm); }
.sistema__config { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); border-radius: var(--r-m); background: var(--superficie-2); }
.sistema__config dl { display: flex; flex-direction: column; gap: var(--e-2); }
.sistema__config dl div { display: flex; flex-direction: column; gap: 2px; padding: var(--e-3); background: var(--superficie); border-radius: var(--r-s); }
.sistema__config dt { font-size: var(--t-xs); color: var(--tinta-3); }
.sistema__config dd { font-weight: 650; }
.sistema__acciones { margin-top: var(--e-3); display: flex; flex-wrap: wrap; gap: var(--e-2); }
.sistema__permisos { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3) var(--e-4); border-radius: var(--r-s); background: var(--aviso-suave); color: var(--aviso-tinta); font-weight: 600; font-size: var(--t-sm); }
.sistema__permisos li { display: flex; align-items: flex-start; gap: var(--e-2); overflow-wrap: anywhere; }
.sistema__permisos svg { flex-shrink: 0; margin-top: 2px; }
details.sistema__config { display: block; padding: 0; }
details.sistema__config > summary { cursor: pointer; min-height: var(--toque); padding: 0 var(--e-4); display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); font-weight: 600; color: var(--acento-tinta); list-style: none; }
details.sistema__config > summary::-webkit-details-marker { display: none; }
details.sistema__config > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-1); }
details.sistema__config[open] > summary::after { transform: rotate(-135deg); }
details.sistema__config[open] { padding-bottom: var(--e-4); }
details.sistema__config > :not(summary) { margin: 0 var(--e-4) var(--e-3); }
details.sistema__config > :last-child { margin-bottom: 0; }

/* =================== v2.2 · F-VIS (optimista, DR13, Rendimiento) =================== */
/* Presupuestos · DR13: la línea no editable de lo compartido en «Mío» (lleva a «Hogar») y el desglose de la cabecera */
.pres-linea--compartida { border-top: 1px dashed var(--linea); }
.pres-linea__ico-hogar { --c: var(--acento); background: var(--acento-suave); }
.pres-linea__ico-hogar svg { color: var(--acento-tinta); }
.pres-linea__ir { display: inline-flex; color: var(--tinta-3); margin-left: auto; }
.pres-linea__ir svg { width: 16px; height: 16px; }
.pres-linea .actualizando { align-self: flex-start; }
.pres-linea__extra { font-size: var(--t-xs); margin-top: calc(var(--e-1) * -1); overflow-wrap: anywhere; }
/* v2.5 (B): «Te toca el 50 % del presupuesto del hogar» bajo «Compartido pagado por ti» */
.pres-linea__parte { font-size: var(--t-xs); margin-top: calc(var(--e-1) * -1); }
.pres-desglose { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.pres-desglose > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--e-3); min-width: 0; }
.pres-desglose dt { font-size: var(--t-sm); color: var(--tinta-2); }
.pres-desglose dd { font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pres-desglose dd .tinta-3 { font-weight: 500; }
.pres-mi-parte { margin-bottom: var(--e-4); }
.pres-mi-parte .actualizando { margin-left: var(--e-2); vertical-align: middle; }
.pres-total > .actualizando { margin-bottom: var(--e-3); }
/* Saldo · «Comprobando el saldo…» (P6) y saldo «actualizando» (P2) */
.saldar-comprobando { display: flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 112px; color: var(--tinta-2); font-weight: 600; font-size: var(--t-sm); text-align: center; }
.saldar-comprobando__ico { width: 18px; height: 18px; animation: latir-reloj 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .saldar-comprobando__ico { animation: none; } }
.saldo-hero[data-actualizando="true"] .saldo-hero__frase, [data-actualizando="true"] .netos b { opacity: .55; transition: opacity var(--dur-2); }
.saldo-hero > .actualizando { margin-bottom: calc(var(--e-2) * -1); }
/* Pagos fijos · «Generar ahora» sin confirmar */
.rec-atrasados .actualizando { vertical-align: middle; }
.fila--rec .fila__sub .actualizando { margin-left: var(--e-1); }
/* Informes · «Actualizando…» */
.inf-actualizando { margin-bottom: var(--e-4); align-items: center; }
.inf-actualizando .actualizando { flex-shrink: 0; }
/* Ajustes · Datos en este dispositivo y Rendimiento (DR9) */
.aj-acciones--izq { justify-content: flex-start; margin-top: var(--e-3); }
.aj-acciones--izq .btn { max-width: 100%; white-space: normal; text-align: left; }
.aj-rend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--e-3) var(--e-4); margin-bottom: var(--e-4); }
.aj-rend > div { min-width: 0; }
.aj-rend dt { font-size: var(--t-xs); color: var(--tinta-3); }
.aj-rend dd { margin-top: 2px; overflow-wrap: anywhere; }
.aj-rend dd b { font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.015em; }
.aj-rend__lentas { display: flex; flex-direction: column; margin-bottom: var(--e-2); }
.aj-rend__lentas li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid var(--linea); font-size: var(--t-sm); min-width: 0; }
.aj-rend__lentas li:last-child { border-bottom: 0; }
.aj-rend__accion { min-width: 0; overflow-wrap: anywhere; color: var(--tinta-2); }
.aj-rend__accion--sin-nombre { color: var(--tinta-3); }
.aj-rend__accion--sin-nombre[aria-busy="true"] { animation: latir-reloj 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .aj-rend__accion--sin-nombre[aria-busy="true"] { animation: none; } }
/* =================== v2.3 · F-VIS («Plan de ahorro sencillo y completo») =================== */
/* «Ver datos en tabla» de los gráficos (js_Graficos): la tabla se desplaza dentro de su marco y la página nunca se
   ensancha (letra al 200 % en 320 px: tres columnas de importes no caben). La etiqueta del mes se parte; las cifras no. */
.tabla-datos__marco { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.tabla-datos__marco:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r-s); }
.tabla-datos__marco .tabla-datos th:not(:first-child), .tabla-datos__marco .tabla-datos td:not(:first-child) { white-space: nowrap; }
.tabla-datos__marco .tabla-datos td:first-child { overflow-wrap: break-word; }
/* La cifra grande de una tarjeta («Nuestro hogar» en Inicio) y la de Pagos fijos: con la letra muy grande en un móvil
   estrecho encogen con el ancho de la pantalla en vez de salirse (nunca se parten). Con la letra normal no cambian
   (72 px = los márgenes de la pantalla y de la tarjeta en el móvil; una cifra de 11 caracteres cabe en 320 px). */
.tarjeta > .cifra-grande, .rec-cab__resumen .cifra-grande { font-size: min(var(--t-2xl), calc((100vw - 72px) / 6)); }
/* Informes · ranking: el porcentaje y la media pasan debajo de la barra si no caben (se parten por « · », no las cifras). */
.ranking__barra-cont { flex-wrap: wrap; row-gap: 2px; }
.ranking__pista { flex: 1 1 2.5rem; }
.ranking__pct { white-space: normal; flex-shrink: 1; min-width: 0; }
/* Pagos fijos y Presupuestos: lo que cuenta en el plan de ahorro (§4.6) */
.rec-cab__plan { margin-top: var(--e-1); line-height: 1.45; }
.pres-plan-fijos { margin-top: var(--e-3); line-height: 1.45; overflow-wrap: anywhere; }

/* ---- src/css_Eventos.html ---- *//* ============================================================
   BUDGETCOUPLE v2.1 — Estilos de Eventos (paquete F-EVT)
   Archivo: css_Eventos.html
   Lista de eventos, hoja de evento, detalle (panel, por persona, deudas,
   gastos y pagos), hoja «Saldar» y la sección de evento del formulario
   de movimiento (.fev). Solo tokens de css_Tokens: el modo oscuro sale solo.
   - Objetivos táctiles ≥ 44 px; a 320 px nada se sale (los textos se parten
     y las cifras pasan a otra línea).
   - Sin color-mix() (GAS-07): fondo sólido + capa de color con opacidad.
   - v2.2: «Comprobando lo pendiente…» de Saldar y las marcas de lo que aún no ha
     confirmado el servidor (reloj, cifras atenuadas con «Actualizando…»).
   - v2.3: presupuesto del viaje (`ev-presupuesto`, `evd-pres__*`, `evf-presupuesto`).
   ============================================================ */

/* ---------- Avatar de invitado (DV19 §5.6): borde discontinuo y su color ----------
   F-VIS puede moverlo a css_Componentes con el mismo nombre. */
.avatar.avatar--invitado { box-shadow: none; border: 2px dashed var(--linea-fuerte); }
.avatar--s.avatar--invitado { border-width: 1.5px; }
.avatar--l.avatar--invitado { border-width: 2.5px; }
.avatar.avatar--hogar::before { opacity: .22; }

/* Fila de avatares solapados */
.ev-avatares { display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.ev-avatares .avatar + .avatar { margin-left: -6px; }
.ev-avatares .avatar { outline: 2px solid var(--superficie); outline-offset: -1px; }
.ev-avatares__mas { margin-left: 4px; font-size: var(--t-xs); font-weight: 650; color: var(--tinta-3); }

/* ---------- Objetivos táctiles de 44 px reales (DV19) ----------
   En las vistas de eventos los botones pequeños miden 44 px (no solo su área ampliada con ::before). */
[data-vista="eventos"] .btn--peq, [data-vista="detalle-evento"] .btn--peq, .fev .btn--peq, .fev .segmentado__op { min-height: var(--toque); }
[data-vista="detalle-evento"] .icono-btn--peq { width: var(--toque); height: var(--toque); }

/* ---------- Lista de eventos ---------- */
.ev-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.ev-cab .segmentado { flex: 1 1 14rem; max-width: 26rem; }
.ev-archivados { min-height: var(--toque); }
.ev-archivados[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento-tinta); }
.ev-lista { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ev-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ev-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ev-tarjeta {
  display: flex; flex-direction: column; gap: var(--e-3); width: 100%; text-align: left; color: inherit;
  background: var(--superficie); border-radius: var(--r-l); box-shadow: var(--sombra-1); padding: var(--e-4) var(--e-4) var(--e-4);
  min-height: var(--toque); min-width: 0; transition: box-shadow var(--dur-2), transform var(--dur-1);
}
.ev-tarjeta:hover { box-shadow: var(--sombra-2); }
.ev-tarjeta:active { transform: scale(.995); }
.ev-tarjeta--archivada { opacity: .78; }
.ev-tarjeta__cab { display: flex; align-items: flex-start; gap: var(--e-3); min-width: 0; }
.ev-emoji {
  width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 28px; line-height: 1; background: var(--acento-suave); overflow: hidden; white-space: nowrap;
}
.ev-tarjeta__titulos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-tarjeta__nombre { font-size: var(--t-md); font-weight: 650; letter-spacing: -0.01em; overflow-wrap: anywhere; line-height: 1.25; }
.ev-tarjeta__fechas { font-size: var(--t-sm); color: var(--tinta-3); }
.ev-insignias { display: flex; flex-wrap: wrap; gap: 4px; }
.ev-tarjeta__cifras { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--e-3); }
.ev-tarjeta__total { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ev-tarjeta__mio { font-size: var(--t-sm); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ev-tarjeta__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--linea); }
.ev-pendiente { font-size: var(--t-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.ev-pendiente svg { width: 16px; height: 16px; flex-shrink: 0; }
.ev-pendiente--favor { color: var(--ok-tinta); }
.ev-pendiente--contra { color: var(--aviso-tinta); }
.ev-pendiente--paz { color: var(--tinta-3); font-weight: 550; }
.insignia--curso { background: var(--acento); color: var(--sobre-acento); }

/* ---------- Detalle de evento ---------- */
.evd-volver { display: inline-flex; align-items: center; gap: 2px; min-height: var(--toque); margin: -8px 0 var(--e-2) -8px; padding: 0 var(--e-3) 0 var(--e-1); border-radius: var(--r-full); color: var(--acento-tinta); font-weight: 600; font-size: var(--t-sm); }
.evd-volver:hover { background: var(--acento-suave); text-decoration: none; }
.evd-volver svg { width: 20px; height: 20px; }

.evd-panel {
  background: var(--panel); color: var(--panel-tinta); border-radius: var(--r-xl);
  padding: var(--e-5) var(--e-5) var(--e-5); position: relative; overflow: hidden; box-shadow: var(--sombra-2); min-width: 0;
}
.evd-panel::after {
  content: ""; position: absolute; right: -54px; top: -64px; width: 200px; height: 200px; border-radius: 50%;
  box-shadow: -70px 0 0 0 rgba(255,255,255,.05); background: rgba(255,255,255,.05); pointer-events: none;
}
.evd-panel > * { position: relative; z-index: 1; }
.evd-panel__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.evd-panel__titulo { font-size: var(--t-base); font-weight: 600; color: var(--panel-tinta-2); flex: 1 1 auto; min-width: 0; }
.evd-chip { font-size: var(--t-2xs); font-weight: 650; padding: 4px 8px; border-radius: var(--r-full); background: var(--panel-pista); color: var(--panel-tinta); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.evd-chip svg { width: 12px; height: 12px; }
.evd-total { font-size: min(var(--t-4xl), 12vw); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin-top: var(--e-2); font-variant-numeric: proportional-nums; }
/* UI-01 (DQ34): las cifras grandes nunca se parten; si no caben, App.formEvento.u.ajustarCifras reduce la letra. */
.ev-ajustable { white-space: nowrap; overflow-wrap: normal; overflow: hidden; max-width: 100%; min-width: 0; }
.ev-tarjeta__cifras > .ev-ajustable { flex: 0 1 auto; }
.evd-total-base { font-size: var(--t-md); color: var(--panel-tinta-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.evd-stats { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--panel-pista); }
.evd-stats > div { flex: 1 1 auto; min-width: 0; }
.evd-stats dt { font-size: var(--t-xs); color: var(--panel-tinta-2); }
.evd-stats dd { font-size: var(--t-md); font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.evd-panel .ev-avatares .avatar { outline-color: var(--panel); }
@media (min-width: 900px) {
  .evd-panel { padding: var(--e-8) var(--e-8) var(--e-6); }
  .evd-total { font-size: clamp(2.5rem, 4.2vw, 3.5rem); }
}

.evd-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.evd-acciones .btn { flex: 1 1 auto; }
@media (min-width: 900px) { .evd-acciones .btn { flex: 0 0 auto; } }

/* Por persona */
.evd-personas { display: flex; flex-direction: column; }
.evd-persona { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); padding: var(--e-3) 0; min-width: 0; }
.evd-persona + .evd-persona { border-top: 1px solid var(--linea); }
.evd-persona__cuerpo { flex: 1 1 9rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.evd-persona__nombre { font-weight: 600; overflow-wrap: break-word; }
.evd-persona__cifras { font-size: var(--t-sm); color: var(--tinta-3); display: flex; flex-wrap: wrap; gap: 0 var(--e-3); font-variant-numeric: tabular-nums; }
.evd-persona__cifras b { color: var(--tinta-2); font-weight: 600; }
.evd-persona__cifras > span { white-space: nowrap; }
.evd-persona__balance { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; max-width: 100%; }
.evd-persona__balance b { font-size: var(--t-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
.evd-persona__balance span { font-size: var(--t-xs); color: var(--tinta-3); }
.evd-nota-pie { font-size: var(--t-xs); color: var(--tinta-3); margin-top: var(--e-2); }

/* Para saldar */
.evd-deudas { display: flex; flex-direction: column; gap: var(--e-2); }
.evd-deuda {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2) var(--e-3); padding: var(--e-3);
  border-radius: var(--r-m); background: var(--superficie-2); min-width: 0;
}
.evd-deuda__flujo { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--tinta-3); }
.evd-deuda__flujo svg { width: 16px; height: 16px; }
.evd-deuda__frase { flex: 1 1 11rem; min-width: 0; font-weight: 600; overflow-wrap: break-word; }
/* UI-14: la frase tiene sitio para una o dos líneas; si el botón no cabe a su lado, pasa debajo, a la derecha. */
.evd-deuda .btn { flex-shrink: 0; margin-left: auto; }
.evd-paz { display: flex; align-items: center; gap: var(--e-2); color: var(--tinta-3); font-size: var(--t-sm); padding: var(--e-2) 0; }
.evd-paz svg { width: 20px; height: 20px; color: var(--ok); flex-shrink: 0; }
.evd-entre { margin-top: var(--e-3); }
.evd-entre .nota__cuerpo p + p { margin-top: 4px; }
.evd-entre .btn { margin-top: var(--e-2); }

/* Gastos y pagos */
.evd-lista .fila { padding-left: var(--e-4); padding-right: var(--e-4); }
.evd-gasto__sub { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.evd-gasto__sub > span { overflow-wrap: anywhere; }
/* El concepto se lee entero (hasta dos líneas) aunque la columna sea estrecha. */
.evd-gasto .fila__titulo { white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Con cifras largas (dongs, wones) el importe pasa debajo, a la derecha, en vez de partir el concepto. */
.evd-gasto { flex-wrap: wrap; row-gap: 2px; }
.evd-gasto .fila__cuerpo { flex: 1 1 8rem; }
.evd-gasto .fila__fin { margin-left: auto; max-width: 100%; }
.evd-pie-lista { padding: var(--e-3) var(--e-4) var(--e-4); }
.evd-pago { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); padding: var(--e-3) var(--e-4); min-height: 60px; position: relative; }
.evd-pago .fila__cuerpo { flex: 1 1 9rem; }
.evd-pago__fin { display: flex; align-items: center; gap: var(--e-1); margin-left: auto; flex-shrink: 0; }
.evd-pago + .evd-pago::before { content: ""; position: absolute; top: 0; left: 68px; right: var(--e-4); height: 1px; background: var(--linea); }
.evd-pago .fila__cuerpo .fila__titulo { white-space: normal; overflow-wrap: anywhere; }

/* ---------- Hoja «Nuevo / Editar evento» ---------- */
.evf-bloque { margin-top: var(--e-5); }
/* Campos en fila (fechas): alineados arriba, sin el margen de «campo + campo». */
.fila-campos.evf-bloque > .campo + .campo, .evs-campos .fila-campos > .campo + .campo { margin-top: 0; }
/* Pestañas Abiertos | Cerrados con 44 px de alto (DV19). */
.ev-cab .segmentado__op { min-height: 44px; }
.evf-bloque > .campo__etiqueta { display: block; margin-bottom: var(--e-2); }
.evf-emoji { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--e-3); align-items: start; }
.evf-emoji .entrada { text-align: center; font-size: 24px; padding: 0 var(--e-2); }
.evf-emoji .paleta { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
.evf-miembros { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.evf-miembros .chip { min-height: 44px; padding: 0 16px 0 14px; }
.evf-miembros .chip[aria-disabled="true"] { cursor: default; }
.evf-miembros .chip[aria-pressed="true"] { background: var(--superficie-2); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--c); }
.evf-miembros .chip .avatar { margin-left: -6px; }
.evf-ayuda { font-size: var(--t-xs); color: var(--tinta-3); margin-top: var(--e-2); display: flex; gap: 6px; align-items: flex-start; }
.evf-ayuda svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.evf-invitados { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-2); }
.evf-invitado { display: flex; align-items: center; gap: var(--e-3); padding: 6px 6px 6px var(--e-3); border-radius: var(--r-m); background: var(--superficie-2); min-width: 0; }
.evf-invitado__nombre { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.evf-invitado__uso { font-size: var(--t-xs); color: var(--tinta-3); font-weight: 500; display: block; margin-top: 2px; }
.evf-invitado__nombre.campo { gap: 0; }
.evf-invitado__entrada { min-height: var(--toque); font-weight: 600; background: var(--superficie); }
/* UI-07: «Eliminar» bloqueado se ve atenuado; al tocarlo dice por qué (y el motivo está escrito en la hoja). */
.evf-eliminar--bloqueado { opacity: .55; }
.evd-acompanante { margin-left: 6px; vertical-align: 1px; font-weight: 600; }
.evd-acompanante > span { display: none; }
.evf-anadir { display: flex; gap: var(--e-2); margin-top: var(--e-3); }
.evf-anadir .entrada { flex: 1; min-width: 0; }
.evf-anadir .btn { flex-shrink: 0; }

/* ---------- Hoja «Saldar» del evento ---------- */
.evs-flujo { display: flex; align-items: flex-start; justify-content: center; gap: var(--e-4); margin: var(--e-2) 0 var(--e-2); }
.evs-flujo__p { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-sm); max-width: 40%; text-align: center; overflow-wrap: anywhere; }
.evs-flujo__linea { color: var(--tinta-3); display: grid; align-self: center; margin-top: -18px; }
.evs-flujo__linea svg { width: 26px; height: 26px; }
.evs-texto { text-align: center; font-weight: 650; font-size: var(--t-md); }
.evs-campos { margin-top: var(--e-4); }
.evs-supera { margin-top: var(--e-3); }
/* v2.2 (§4.12, P6): la hoja se abre al tocar y la cifra llega del servidor; mismo alto para que no salte. */
.evs-cifra { min-height: 112px; display: flex; flex-direction: column; justify-content: center; }
.evs-comprobando {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 72px; margin: 0;
  color: var(--tinta-2); font-weight: 600; text-align: center;
}
.evs-comprobando svg { width: 18px; height: 18px; flex-shrink: 0; animation: latir-reloj 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .evs-comprobando svg { animation: none; } }
.evs-error { margin: 0; flex-wrap: wrap; }
.evs-error .btn { margin-left: auto; }

/* ---------- v2.2 · Lo que aún no ha confirmado el servidor (§3.8) ---------- */
/* Tarjeta de un evento sin confirmar y filas de gastos y pagos pendientes: el reloj junto al título. */
.ev-tarjeta__nombre .pendiente-reloj, .evd-gasto .fila__titulo .pendiente-reloj, .evd-pago .fila__titulo .pendiente-reloj { margin-left: 6px; }
.ev-tarjeta[data-pendiente="true"] { box-shadow: var(--sombra-1), inset 0 0 0 1px var(--linea-fuerte); }
.evd-pago[data-pendiente="true"] .fila__importe { opacity: .78; }
/* Cifras que recalcula el servidor: atenuadas con su insignia «Actualizando…». */
.ev-tarjeta[data-actualizando="true"] .ev-tarjeta__total, .ev-tarjeta[data-actualizando="true"] .ev-tarjeta__mio,
.ev-tarjeta[data-actualizando="true"] .ev-pendiente { opacity: .55; transition: opacity var(--dur-2); }
.ev-tarjeta__cifras > .actualizando { flex-basis: 100%; justify-self: start; width: max-content; }
.evd-panel[data-actualizando="true"] .evd-total, .evd-panel[data-actualizando="true"] .evd-total-base { opacity: .55; transition: opacity var(--dur-2); }
.evd-panel__cab > .actualizando { margin-left: auto; }
.tarjeta[data-actualizando="true"] .evd-deuda__frase, .tarjeta[data-actualizando="true"] .evd-persona__cifras,
.tarjeta[data-actualizando="true"] .evd-persona__balance, .tarjeta[data-actualizando="true"] .evd-entre .nota__cuerpo p { opacity: .55; transition: opacity var(--dur-2); }
.tarjeta__cab > .actualizando { margin-left: auto; }

/* ---------- v2.3 · Presupuesto del viaje (§4.4, DP6) ----------
   Lista: «de 1.200,00 € de presupuesto · 109 %» con la barra fina. Detalle: tarjeta «Presupuesto del viaje». Hoja: el
   campo con el símbolo de la moneda. El estado nunca va solo en el color: icono y texto (el del servidor, §2.13). */
.ev-presupuesto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ev-presupuesto .progreso { display: block; width: 100%; }
.ev-presupuesto__t { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--e-2); font-size: var(--t-xs); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ev-presupuesto__de { min-width: 0; overflow-wrap: anywhere; }
.ev-presupuesto__pct { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--tinta); white-space: nowrap; }
.ev-presupuesto__pct svg { width: 14px; height: 14px; flex-shrink: 0; }
.ev-presupuesto--ALERTA .ev-presupuesto__pct { color: var(--aviso-tinta); }
.ev-presupuesto--SUPERADO .ev-presupuesto__pct { color: var(--peligro-tinta); }
.ev-tarjeta[data-actualizando="true"] .ev-presupuesto { opacity: .55; transition: opacity var(--dur-2); }

.evd-pres__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-3); margin-bottom: var(--e-3); }
.evd-pres__frase { font-size: var(--t-md); font-weight: 650; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.evd-pres__frase small { font-size: var(--t-sm); font-weight: 600; color: var(--tinta-3); }
.evd-pres__frase .num { white-space: nowrap; }
.evd-pres__pct { font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta); }
.evd-pres__pct--ALERTA { color: var(--aviso-tinta); }
.evd-pres__pct--SUPERADO { color: var(--peligro-tinta); }
.evd-pres .nota { margin-top: var(--e-3); }
.evd-pres .nota--aviso .nota__cuerpo, .evd-pres .nota--peligro .nota__cuerpo { color: inherit; }
.evd-pres__parte { margin-top: var(--e-3); font-size: var(--t-sm); color: var(--tinta-2); overflow-wrap: anywhere; }
.evd-pres__parte b { color: var(--tinta); font-weight: 650; }
.evd-pres__parte .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.evd-pres__parte .actualizando { vertical-align: middle; }
.evd-pres__vacio { color: var(--tinta-3); font-size: var(--t-sm); }
/* DQ23-7: con acompañantes, lo que cuenta el presupuesto (solo los de casa), justo bajo «Gastado X de Y». */
.evd-pres__casa { display: flex; align-items: flex-start; gap: 6px; margin: calc(var(--e-2) * -1) 0 var(--e-3); font-size: var(--t-xs); color: var(--tinta-3); overflow-wrap: anywhere; }
.evd-pres__casa svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
/* DQ23-3: sin ningún cambio de la moneda del viaje, qué pasa y qué hacer (en vez de «≈ 0 ¥»). */
.evd-pres .evd-pres__sin-cambio { margin-top: var(--e-2); }
.evd-pres__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-top: var(--e-3); }
.evd-pres__acciones .btn { min-height: var(--toque); }
/* Lo que recalcula el servidor (un gasto en la cola; mi plan tras cambiar el presupuesto): atenuado con «Actualizando…». */
.evd-pres[data-actualizando="true"] .evd-pres__frase, .evd-pres[data-actualizando="true"] .evd-pres__pct,
.evd-pres[data-actualizando="true"] .evd-pres__barra, .evd-pres[data-actualizando="true"] .evd-pres__aviso,
.evd-pres[data-actualizando="true"] .evd-pres__parte .num { opacity: .55; transition: opacity var(--dur-2); }
.evf-presupuesto .entrada-con-sufijo .entrada { flex: 1 1 auto; min-width: 0; width: 100%; }
.evf-presupuesto .entrada:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Sección de evento del formulario de movimiento ---------- */
.fev { display: flex; flex-direction: column; gap: var(--e-4); }
.fev__bloque { min-width: 0; }
.fev__bloque > .campo__etiqueta { margin-bottom: var(--e-2); }
.fev__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-bottom: 4px; }
.fev__chips { gap: var(--e-2); }
.fev__chip { min-height: 44px; padding: 0 14px 0 12px; max-width: 100%; }
.fev__chip > span:not(.avatar):not(.sr):not(.fev__marca) { overflow: hidden; text-overflow: ellipsis; }
.fev__chip--invitado { box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.fev__para .fev__marca { display: none; width: 16px; height: 16px; margin-left: 2px; }
.fev__para .fev__marca svg { width: 16px; height: 16px; }
.fev__para[aria-pressed="true"] { background: var(--superficie-2); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--c); }
.fev__para[aria-pressed="true"] .fev__marca { display: inline-grid; }
.fev__para[aria-pressed="false"] { color: var(--tinta-3); }
.fev__para[aria-pressed="false"] .avatar { opacity: .55; }
.fev__preview { margin-top: var(--e-3); }
.fev__mia b { color: var(--acento-tinta); }
.fev__punto-inv { width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed var(--tinta-3); flex-shrink: 0; display: inline-block; }
.fev__nota { margin: 0; }
.fev__nota .btn { margin-left: auto; }
.fev__cargando { padding: var(--e-3) 0; }
.fev__error { margin-top: var(--e-2); }
.fev__personal .interruptor { padding: 2px 0; }
.interruptor--bloqueado { opacity: .6; cursor: not-allowed; }
.interruptor--bloqueado input:disabled + .interruptor__pista { background: var(--linea); }

/* ---- src/css_Patrimonio.html ---- *//* ============================================================
   BUDGETCOUPLE 2.3 — Estilos de Patrimonio, Detalle de cuenta y Plan de ahorro (paquete F-PAT)
   Archivo: css_Patrimonio.html
   Solo tokens de css_Tokens: el modo oscuro sale solo. Sin color-mix() (GAS-07).
   - Objetivos táctiles ≥ 44 px medidos en la propia caja (no solo con ::before).
   - A 320 px nada se sale: los datos pasan a otra fila; las cifras grandes nunca se parten (se reduce la letra, UI-01).
   - El panel de Patrimonio usa --panel (como «Mi mes», §5.6); el resto, tarjetas --superficie.
   ============================================================ */

/* ---------- Comunes ---------- */
.pat-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.pat-cab .pat-seg { flex: 1 1 14rem; max-width: 26rem; }
.pat-seg .segmentado__op { min-height: var(--toque); }
.pat-seg.segmentado--compacto .segmentado__op { min-height: var(--toque); padding: 4px var(--e-3); }
.pat-grupo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3);
  font-size: var(--t-xs); font-weight: 650; color: var(--tinta-3); letter-spacing: .02em;
  padding: var(--e-3) var(--e-5) var(--e-1); min-width: 0;
}
.pat-grupo .trunc { flex: 1; white-space: normal; overflow-wrap: anywhere; }
.pat-grupo__extra { font-weight: 550; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pat-grupo + .lista .fila:first-child { padding-top: var(--e-2); }

/* ---------- Panel principal (--panel) ---------- */
.pat-panel {
  background: var(--panel); color: var(--panel-tinta);
  border-radius: var(--r-xl); padding: var(--e-6) var(--e-5) var(--e-5);
  position: relative; overflow: hidden; box-shadow: var(--sombra-2); min-width: 0;
}
.pat-panel::after {
  content: ""; position: absolute; right: -60px; top: -70px; width: 210px; height: 210px; border-radius: 50%;
  background: rgba(255, 255, 255, .05); box-shadow: -74px 0 0 0 rgba(255, 255, 255, .04); pointer-events: none;
}
.pat-panel > * { position: relative; z-index: 1; }
.pat-panel__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); }
.pat-panel__titulo { font-size: var(--t-base); font-weight: 600; color: var(--panel-tinta-2); }
/* UI-11: los chips del panel van sobre una capa oscura (no la clara --panel-pista): texto ≥ 4,5:1 en claro y oscuro. */
.pat-panel__chip { font-size: var(--t-2xs); font-weight: 650; padding: 4px 8px; border-radius: var(--r-full); background: rgba(0, 0, 0, .22); color: var(--panel-tinta); white-space: nowrap; }
/* UI-01: las cifras grandes en una línea; si no caben, P.ajustarCifras reduce la letra (data-cifra). */
[data-cifra] { display: block; max-width: 100%; white-space: nowrap; overflow-wrap: normal; }
.pat-panel__cifra { font-size: min(var(--t-4xl), 12.5vw); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin-top: var(--e-2); }
.pat-monedas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--e-3); }
.pat-monedas__mas { color: var(--panel-tinta-2); font-weight: 600; }
.pat-moneda {
  display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%;
  padding: 5px 11px; border-radius: var(--r-full); background: rgba(0, 0, 0, .22); color: var(--panel-tinta);
  font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums;
}
.pat-moneda__cod { font-size: var(--t-2xs); font-weight: 750; letter-spacing: .05em; }
.pat-moneda__cifra { white-space: nowrap; }
.pat-fuente { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--e-3); font-size: var(--t-xs); color: var(--panel-tinta-2); line-height: 1.35; }
.pat-fuente svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.pat-fuente span { min-width: 0; overflow-wrap: anywhere; }
.pat-sin-red {
  display: flex; align-items: flex-start; gap: 8px; margin-top: var(--e-3); padding: var(--e-2) var(--e-3);
  border-radius: var(--r-s); background: var(--aviso-suave); color: var(--aviso-tinta); font-size: var(--t-xs); font-weight: 550; line-height: 1.35;
}
.pat-sin-red svg { width: 16px; height: 16px; flex-shrink: 0; }
.pat-sin-red span { min-width: 0; overflow-wrap: anywhere; }
.pat-mes { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--panel-pista); }
.pat-mes__titulo { font-size: var(--t-sm); font-weight: 600; color: var(--panel-tinta-2); }
.pat-mes__stats { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); margin-top: var(--e-2); }
.pat-mes__stats > div { flex: 1 1 auto; min-width: 0; }
.pat-mes__stats dt { font-size: var(--t-xs); color: var(--panel-tinta-2); }
.pat-mes__stats dd { font-size: var(--t-md); font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pat-mes__nota { font-size: var(--t-xs); color: var(--panel-tinta-2); margin-top: var(--e-3); }
@media (min-width: 900px) {
  .pat-panel { padding: var(--e-8) var(--e-8) var(--e-6); }
  .pat-panel__cifra { font-size: clamp(2.5rem, 4.2vw, 3.5rem); }
}

/* ---------- Cuentas ---------- */
.pat-cuentas__cab { margin-bottom: 0; flex-wrap: wrap; }
.pat-cuentas__nueva { margin: -6px 0; }
/* UI-01: el nombre conserva al menos el 40 % de la fila (no sale letra a letra) y, si el importe no cabe al lado, pasa debajo
   (alineado a la derecha). Los importes nunca se parten. */
.pat-cuenta { flex-wrap: wrap; }
.pat-cuenta .fila__cuerpo { flex: 1 1 40%; min-width: 40%; }
.pat-cuenta .fila__titulo { white-space: normal; overflow-wrap: break-word; }
.pat-cuenta .fila__fin { margin-left: auto; max-width: 100%; }
.pat-cuenta--archivada { opacity: .78; }
.pat-cuenta .fila__importe, .pat-cuenta .fila__mini { white-space: nowrap; text-align: right; }
/* Modo «Ordenar» (DQ35) */
/* «Ordenar»/«Hecho» en la fila del primer grupo («Tuyas … ⇅ Ordenar»): nunca compite con el título ni con «Añadir cuenta». */
.pat-grupo-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; padding-right: var(--e-3); }
.pat-grupo-cab .pat-grupo { flex: 1 1 auto; padding-top: var(--e-2); padding-bottom: var(--e-2); }
.pat-ordenar { flex-shrink: 0; margin: 0; white-space: nowrap; font-size: var(--t-sm); }
.pat-ordenar[aria-pressed="true"] { background: var(--acento-suave); }
.pat-orden__ayuda { padding: 0 var(--e-5) var(--e-1); }
.pat-cuenta--orden { flex-wrap: nowrap; }
.pat-cuenta--orden .fila__cuerpo { min-width: 0; }
.pat-orden { display: inline-flex; gap: var(--e-1); flex-shrink: 0; }
.pat-orden__btn { width: var(--toque); height: var(--toque); background: var(--superficie-2); }
.pat-orden__btn:disabled { opacity: .35; }
.pat-archivadas {
  display: flex; align-items: center; gap: var(--e-2); width: 100%; min-height: 52px; padding: 0 var(--e-5);
  border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: var(--t-sm); font-weight: 600; text-align: left;
}
.pat-archivadas:hover { background: var(--superficie-2); }
.pat-archivadas span { flex: 1; }
.pat-archivadas svg { width: 18px; height: 18px; flex-shrink: 0; }
.pat-lista-archivadas { border-top: 1px solid var(--linea); }
.pat-lista-archivadas[hidden] { display: none; }

/* ---------- Evolución ---------- */
.pat-evolucion__cab { flex-wrap: wrap; row-gap: var(--e-2); margin-bottom: var(--e-2); }
.pat-evolucion__cab .tarjeta__titulo { flex: 1 1 8rem; }
.pat-evolucion__sub { margin-bottom: var(--e-3); }
.pat-evolucion__poco { padding: var(--e-4) 0; }
.pat-evolucion__aviso { margin-bottom: var(--e-3); }

/* ---------- Gastos fijos ---------- */
.pat-grupo--fijos { color: var(--tinta-2); font-size: var(--t-sm); }
.pat-fijos-vacio { padding: 0 var(--e-4) var(--e-2); }

/* ---------- Vacíos y hoja de solo saldo ---------- */
.pat-vacio { padding-bottom: var(--e-6); }
.pat-vacio .vacio { padding-bottom: var(--e-3); }
.pat-vacio__nota { text-align: center; font-size: var(--t-sm); color: var(--tinta-3); max-width: 42ch; margin: 0 auto; }
.pat-vacio__accion { display: flex; justify-content: center; margin-top: var(--e-5); }
.pat-solo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-2); padding-top: var(--e-2); }
.pat-solo__cifra { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; width: 100%; text-align: center; }

/* ---------- Hoja de cuenta ---------- */
/* En una fila de campos (rejilla), el segundo campo no lleva el margen de «campo + campo». */
.hoja .fila-campos > .campo + .campo, .cta-identidad > .campo + .campo { margin-top: 0; }
.cta-identidad { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--e-3); align-items: end; }
.cta-emoji { text-align: center; font-size: 24px; padding: 0 4px; }
.cta-paleta { margin-top: var(--e-3); grid-template-columns: repeat(5, minmax(44px, 1fr)); }
@media (min-width: 560px) { .cta-paleta { grid-template-columns: repeat(5, 56px); } }
.cta-paleta .paleta__op { font-size: 20px; }
.cta-fila { margin-top: var(--e-4); }
.cta-campo { margin-top: var(--e-4); }
.cta-campo .campo__ayuda { margin-top: 2px; }
.cta-tipos { gap: var(--e-2); }
.cta-otra-fecha { align-self: flex-start; margin-top: var(--e-2); margin-left: calc(var(--e-3) * -1); }
.cta-ayuda { margin-top: var(--e-2); }
.cta-interruptores { margin-top: var(--e-4); display: flex; flex-direction: column; gap: var(--e-3); }
.cta-interruptores .interruptor + .interruptor { margin-top: 0; }
.cta-opciones { margin-top: var(--e-5); border-top: 1px solid var(--linea); }
/* DQ34: «Eliminar» de una cuenta con movimientos, deshabilitado de verdad y con el motivo a la vista. */
.cta-eliminar--no { cursor: not-allowed; }
.trn-motivo { margin: var(--e-3) 0 var(--e-4); }
.cta-eliminar--no, .cta-eliminar--no .fila__titulo, .cta-eliminar--no svg { color: var(--tinta-3) !important; }

/* Chips de elección de 44 px de alto (tipo de cuenta, fecha rápida). */
.chip.pat-chip { min-height: var(--toque); padding: 0 var(--e-4); }

/* ---------- Detalle de cuenta ---------- */
.cta-panel__cab { display: flex; align-items: center; gap: var(--e-4); min-width: 0; }
.cta-panel__textos { flex: 1; min-width: 0; }
.cta-panel__titulo { font-size: var(--t-sm); font-weight: 600; color: var(--tinta-3); }
.cta-panel__cifra { font-size: min(var(--t-3xl), 11vw); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: 2px; }
.cta-panel__cifra.negativo { color: var(--peligro-tinta); }
.cta-panel__base { margin-top: var(--e-3); font-size: var(--t-sm); color: var(--tinta-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cta-panel__aviso { display: flex; gap: 6px; align-items: flex-start; margin-top: var(--e-2); font-size: var(--t-xs); color: var(--aviso-tinta); font-weight: 550; }
.cta-panel__aviso svg { width: 16px; height: 16px; flex-shrink: 0; }
.cta-panel__insignias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e-3); }
.cta-panel__insignias:empty { display: none; }
.cta-archivada { margin-top: var(--e-4); }
.cta-archivada .nota__cuerpo { display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; }
.cta-acciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); margin-top: var(--e-5); }
.cta-accion {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; min-width: 0;
  padding: var(--e-2) var(--e-1); border-radius: var(--r-m); background: var(--acento-suave); color: var(--acento-tinta);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.2; text-align: center; overflow-wrap: anywhere;
  transition: filter var(--dur-1), transform var(--dur-1);
}
.cta-accion svg { width: 22px; height: 22px; flex-shrink: 0; }
.cta-accion:hover:not(:disabled) { filter: brightness(.97); }
.cta-accion:active:not(:disabled) { transform: scale(.98); }
.cta-accion:disabled { opacity: .45; cursor: not-allowed; }
.cta-resumen__titulo { margin-bottom: var(--e-3); }
.cta-resumen__stats { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); }
.cta-resumen__stats > div { flex: 1 1 auto; min-width: 0; }
.cta-resumen__stats dt { font-size: var(--t-xs); color: var(--tinta-3); }
.cta-resumen__stats dd { font-size: var(--t-md); font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cta-resumen__inicio { margin-top: var(--e-3); }
.cta-efectos__vacio { padding: 0 var(--e-4) var(--e-3); }
/* v2.4: recibos de una tarjeta (detalle) y su bloque en la hoja de cuenta */
.cta-recibos__pie { padding: var(--e-3) var(--e-5) var(--e-5); margin: 0; }
.cta-recibo > .interruptor { margin-bottom: var(--e-3); }
.cta-recibo .chips { margin: var(--e-2) 0 var(--e-3); }
.cta-efecto .fila__fin { max-width: 46%; }
.cta-efecto .fila__importe { white-space: nowrap; }
.cta-efecto__ico {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--superficie-3); color: var(--tinta-2);
}
.cta-efecto__ico svg { width: 22px; height: 22px; }
.cta-efecto__ico--ajuste { background: var(--aviso-suave); color: var(--aviso-tinta); }

/* ---------- Hoja Transferir ---------- */
.tra-cuentas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); align-items: end; }
.tra-cambiar { justify-self: center; transform: rotate(90deg); }
@media (min-width: 560px) {
  .tra-cuentas { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .tra-cambiar { transform: none; margin-bottom: 2px; }
}
.tra-importes { margin-top: var(--e-4); }
.tra-importes .campo[hidden] { display: none; }
.tra-cambio { margin-top: var(--e-3); padding: var(--e-2) var(--e-3); border-radius: var(--r-s); background: var(--superficie-2); color: var(--tinta-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tra-cambio[hidden], .tra-cambio:empty { display: none; }
.tra-campo { margin-top: var(--e-4); }
.tra-fechas { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.tra-fechas .chips { flex-wrap: nowrap; }
.tra-fecha { flex: 1 1 9rem; width: auto; }
.tra-ayuda { margin-top: var(--e-4); }

/* ---------- Hoja Ajustar saldo ---------- */
.aju-cab { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.aju-cab__textos { min-width: 0; }
.aju-cab__textos .titulo-3 { overflow-wrap: anywhere; }
.aju-campo { margin-top: var(--e-4); }
.aju-grande .entrada { min-height: 56px; font-size: var(--t-xl); font-weight: 650; font-variant-numeric: tabular-nums; }
.aju-diferencia {
  margin-top: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-s);
  background: var(--acento-suave); color: var(--acento-tinta); font-size: var(--t-sm); font-weight: 600; overflow-wrap: anywhere;
}
.aju-diferencia--cero { background: var(--superficie-2); color: var(--tinta-2); }

/* =================== PLAN DE AHORRO (2.3, §4.1–§4.3; la maqueta aprobada `pl3-*` pasada a plan-/plm-/plo-) =================== */
.plan-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.plan-cab .plan-seg { flex: 1 1 14rem; max-width: 26rem; }
.plan-anio .selector-mes__etiqueta { min-width: 96px; }
@media (max-width: 479px) { .plan-anio { width: 100%; } .plan-anio .selector-mes__etiqueta { flex: 1; } }
.plan-anio .icono-btn:disabled { opacity: .3; }

/* Tarjeta del año: cifras a la izquierda y gráfico a la derecha en escritorio */
.plan-panel { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .plan-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--e-6); align-items: start; } }
.plan-panel__datos { min-width: 0; }
.plan-panel__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; }
/* DQ23-9: el plan sin ingresos (nota con enlace a Ajustes, arriba de la tarjeta del año) */
.plan-sin-ingresos { margin-bottom: var(--e-4); min-height: var(--toque); text-decoration: none; align-items: center; }
.plan-sin-ingresos .nota__cuerpo { flex: 1; min-width: 0; }
.plan-sin-ingresos:hover .nota__cuerpo { text-decoration: underline; }
.plan-sin-ingresos:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.plan-panel__titulo { font-size: var(--t-base); font-weight: 600; color: var(--tinta-2); }
.plan-panel__cambiar { margin: -8px -8px -8px auto; }
.plan-panel__cifra { font-size: min(var(--t-4xl), 12vw); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin-top: var(--e-1); }
.plan-panel__origen { margin-top: 4px; }
.plan-panel__nota { margin-top: var(--e-3); }
.plan-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin-top: var(--e-4); }
.plan-cifras > div { background: var(--superficie-2); border-radius: var(--r-m); padding: var(--e-3); min-width: 0; }
.plan-cifras dt { font-size: var(--t-xs); color: var(--tinta-3); font-weight: 550; line-height: 1.3; }
.plan-cifras dd { font-size: clamp(0.875rem, 4.6vw, var(--t-md)); white-space: nowrap; font-weight: 650; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.plan-cifras dd.plan-cifras__desde { font-size: var(--t-2xs); font-weight: 550; color: var(--tinta-3); margin-top: 2px; white-space: normal; letter-spacing: 0; }
.plan-estado { display: flex; align-items: flex-start; gap: var(--e-2); margin-top: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-m); font-size: var(--t-sm); background: var(--superficie-2); color: var(--tinta-2); }
.plan-estado svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.plan-estado b { font-weight: 700; font-size: var(--t-base); display: block; color: inherit; }
.plan-estado span { min-width: 0; overflow-wrap: anywhere; }
.plan-estado--delante { background: var(--ok-suave); color: var(--ok-tinta); }
.plan-estado--detras { background: var(--aviso-suave); color: var(--aviso-tinta); }
.plan-estado--poco b, .plan-estado--sin b { color: var(--tinta); }
.plan-linea-texto { display: flex; align-items: flex-start; gap: var(--e-2); margin-top: var(--e-3); font-size: var(--t-sm); color: var(--tinta-2); }
.plan-linea-texto svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--tinta-3); }
.plan-linea-texto span { min-width: 0; overflow-wrap: anywhere; }
.plan-linea-texto--fuerte { color: var(--tinta); font-weight: 550; font-size: var(--t-base); }
.plan-linea-texto--fuerte b { font-weight: 700; white-space: nowrap; }
.plan-aviso { margin-top: var(--e-3); }
.plan-seguir { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.plan-seguir__texto svg { width: 14px; height: 14px; vertical-align: -2px; }

/* Gráfico del ahorro acumulado (§4.1: Real continua, Previsto discontinua, «Si sigues el plan» punteada, Meta fina) */
.plan-grafico { min-width: 0; }
.plan-grafico__titulo { font-size: var(--t-base); font-weight: 650; }
.plan-grafico__sub { margin: 2px 0 var(--e-3); }
.plan-leyenda { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); font-size: var(--t-xs); color: var(--tinta-2); margin-bottom: var(--e-2); }
.plan-leyenda__item { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.plan-leyenda__item b { font-weight: 650; color: var(--tinta); }
.plan-clave { width: 18px; height: 0; border-top: 2px solid var(--g-ingresos); display: inline-block; flex-shrink: 0; }
.plan-clave--previsto { border-top-style: dashed; border-top-color: var(--g-gastos); }
.plan-clave--proy { border-top-style: dotted; border-top-width: 3px; }
.plan-clave--meta { border-top-style: dotted; border-top-width: 2px; border-top-color: var(--tinta-3); }
.plan-graf { position: relative; min-height: 200px; }
.plan-graf svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.plan-graf svg:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; border-radius: 8px; }
.plan-graf text { font-family: var(--fuente); fill: var(--tinta-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.plan-graf .g-rejilla { stroke: var(--g-rejilla); stroke-width: 1; shape-rendering: crispEdges; }
.plan-graf .g-base { stroke: var(--g-base); stroke-width: 1; shape-rendering: crispEdges; }
.plan-graf .g-previsto { fill: none; stroke: var(--g-gastos); stroke-width: 2; stroke-dasharray: 6 4; stroke-linecap: round; stroke-linejoin: round; }
.plan-graf .g-real { fill: none; stroke: var(--g-ingresos); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-graf .g-proy { fill: none; stroke: var(--g-ingresos); stroke-width: 2.5; stroke-dasharray: 0.5 5; stroke-linecap: round; }
.plan-graf .g-area { fill: var(--g-ingresos); opacity: .10; }
.plan-graf .g-meta { stroke: var(--tinta-3); stroke-width: 1; stroke-dasharray: 2 3; }
.plan-graf .g-punto { stroke: var(--superficie); stroke-width: 2; }
.plan-graf .g-punto--real { fill: var(--g-ingresos); }
.plan-graf .g-punto--previsto { fill: var(--g-gastos); }
.plan-graf .g-cruz { stroke: var(--linea-fuerte); stroke-width: 1; }
.plan-graf .g-hoy { fill: var(--superficie-2); }
.plan-graf .g-texto-hoy { fill: var(--tinta-3); font-size: 10px; font-weight: 600; }
.tooltip .plan-clave { margin-right: 2px; }
.plan-datos { margin-top: var(--e-1); }
.plan-datos__scroll { overflow-x: auto; max-width: 100%; }
.plan-datos .tabla-datos td, .plan-datos .tabla-datos th { white-space: nowrap; }

/* «Mes a mes»: grupos y filas (cada fila es un botón; en escritorio, una tabla) */
.plan-meses__ayuda { padding: 0 var(--e-5) var(--e-2); margin-top: calc(var(--e-2) * -1); }
.plan-marcas-leyenda { display: flex; flex-wrap: wrap; gap: 4px var(--e-3); padding: 0 var(--e-5) var(--e-3); font-size: var(--t-xs); color: var(--tinta-3); }
.plan-grupo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); margin: 0;
  padding: var(--e-3) var(--e-5) var(--e-2); border-top: 1px solid var(--linea); background: var(--superficie-2);
  font-size: var(--t-xs); font-weight: 650; color: var(--tinta-2); letter-spacing: .01em;
}
.plan-grupo__s { font-weight: 550; color: var(--tinta-3); }
.plan-meses__lista { display: flex; flex-direction: column; }
.plan-mes {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre ahorro" "io io" "comp comp";
  gap: 2px var(--e-3); width: 100%; text-align: left; color: inherit; padding: var(--e-3) var(--e-5); min-height: 64px;
  border-top: 1px solid var(--linea); position: relative; align-items: center; transition: background var(--dur-1);
}
.plan-meses__lista > .plan-mes:first-child { border-top: 0; }
button.plan-mes:hover { background: var(--superficie-2); }
.plan-mes--cab { display: none; }
.plan-mes__nombre { grid-area: nombre; font-weight: 650; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.plan-mes__nota { flex-basis: 100%; font-weight: 500; font-size: var(--t-xs); color: var(--tinta-3); overflow-wrap: anywhere; }
.plan-mes__act { flex-basis: 100%; display: flex; }
.plan-mes__act .actualizando { margin-left: 0; }
.plan-mes__ahorro { grid-area: ahorro; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-mes__ahorro small { display: block; font-size: var(--t-2xs); font-weight: 550; color: var(--tinta-3); }
.plan-mes__io { grid-area: io; display: flex; flex-wrap: wrap; gap: 0 var(--e-3); font-size: var(--t-xs); color: var(--tinta-2); font-variant-numeric: tabular-nums; min-width: 0; }
.plan-mes__io > span { white-space: nowrap; }
.plan-mes__io .plan-etq { color: var(--tinta-3); }
.plan-mes__comp { grid-area: comp; display: flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-3); min-width: 0; }
.plan-mes__comp span { min-width: 0; overflow-wrap: anywhere; }
.plan-mes__comp svg { width: 14px; height: 14px; flex-shrink: 0; }
.plan-mes__comp:empty { display: none; }
.plan-mes__comp--mejor { color: var(--ok-tinta); }
.plan-mes__comp--peor { color: var(--aviso-tinta); }
.plan-mes--FUTURO .plan-mes__ahorro, .plan-mes--SIN_DATOS .plan-mes__ahorro { color: var(--tinta-2); }
.plan-mes--SIN_DATOS .plan-mes__mes { color: var(--tinta-2); }
.plan-mes--EN_CURSO { background: var(--acento-suave); }
.plan-mes--EN_CURSO .plan-etq, .plan-mes--EN_CURSO .plan-mes__ahorro small, .plan-mes--EN_CURSO .plan-mes__nota,
.plan-mes--EN_CURSO .plan-mes__comp:not(.plan-mes__comp--mejor):not(.plan-mes__comp--peor) { color: var(--tinta-2); }
button.plan-mes--EN_CURSO:hover { background: var(--acento-suave); filter: brightness(.98); }
.plan-marca {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: var(--r-full); font-size: 12px; font-weight: 700; line-height: 1; background: var(--superficie-3); color: var(--tinta-2);
}
.plan-marca--extra, .plan-marca--ajuste { background: var(--acento-suave); color: var(--acento-tinta); }
.plan-mes--EN_CURSO .plan-marca--extra, .plan-mes--EN_CURSO .plan-marca--ajuste { background: var(--superficie); }
@media (min-width: 720px) {
  .plan-meses .plan-mes {
    grid-template-columns: minmax(6.5rem, 1.2fr) minmax(6.5rem, 1fr) minmax(6.5rem, 1fr) minmax(7.5rem, 1fr) minmax(7rem, 1.5fr); grid-template-areas: none;
    gap: var(--e-3); min-height: 56px;
  }
  .plan-meses .plan-mes--cab {
    display: grid; min-height: 0; padding-top: var(--e-2); padding-bottom: var(--e-2); font-size: var(--t-xs); color: var(--tinta-3);
    font-weight: 600; border-top: 1px solid var(--linea);
  }
  .plan-mes--cab span:not(:first-child) { text-align: right; }
  .plan-mes--cab span:last-child { text-align: left; padding-left: var(--e-3); }
  .plan-mes__nombre, .plan-mes__ahorro, .plan-mes__comp { grid-area: auto; }
  .plan-mes__io { display: contents; }
  .plan-mes__io > span { text-align: right; font-size: var(--t-sm); color: var(--tinta); }
  .plan-mes--FUTURO .plan-mes__io > span { color: var(--tinta-2); }
  .plan-mes__io .plan-etq { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .plan-mes__nombre { order: 1; }
  .plan-mes__ing { order: 2; }
  .plan-mes__gas { order: 3; }
  .plan-mes__ahorro { order: 4; font-size: var(--t-base); }
  .plan-mes__comp { order: 5; padding-left: var(--e-3); font-size: var(--t-sm); }
  .plan-mes__comp:empty { display: flex; }
  .plan-mes__ahorro small { display: none; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .plan-mes__io > span { font-size: var(--t-xs); }
  .plan-mes__ahorro { font-size: var(--t-sm); }
  .plan-mes__comp { font-size: var(--t-xs); }
}

/* Pie de la vista: Patrimonio y «Compartir mi plan» */
.plan-pie { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .plan-pie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); } }
.plan-enlace { display: flex; align-items: center; gap: var(--e-3); min-height: var(--toque); color: var(--tinta); font-weight: 600; }
.plan-enlace:hover { text-decoration: none; }
.plan-enlace > svg { width: 20px; height: 20px; flex-shrink: 0; }
.plan-enlace span { flex: 1; min-width: 0; }
.plan-enlace small { display: block; font-weight: 500; color: var(--tinta-3); font-size: var(--t-sm); }
.plan-enlace .plan-enlace__flecha { color: var(--tinta-3); }
.plan-compartir__estado { margin-top: var(--e-2); }
.plan-compartir__nota { margin-top: var(--e-3); }

/* Empezar y no disponible */
.plan-empezar__vacio { padding-bottom: var(--e-4); }
.plan-empezar__texto { max-width: 40ch; }
.plan-no__interruptor { padding: 0 var(--e-2) var(--e-2); }

/* ---------- Hoja del mes (plm-*) ---------- */
.hoja__sub { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--tinta-3); letter-spacing: 0; margin-top: 2px; }
.plm-intro { font-size: var(--t-sm); color: var(--tinta-3); margin-bottom: var(--e-2); }
.plm-bloque { margin-top: var(--e-4); }
.plm-bloque__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); padding-bottom: var(--e-2); border-bottom: 1px solid var(--linea-fuerte); }
.plm-bloque__t { font-size: var(--t-sm); font-weight: 700; color: var(--tinta); letter-spacing: .01em; }
.plm-bloque__total { font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plm-linea.campo { display: block; gap: 0; padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); }
.plm-linea.campo + .plm-linea.campo { margin-top: 0; }
.plm-linea__fila { display: flex; align-items: center; gap: var(--e-2) var(--e-3); flex-wrap: wrap; }
.plm-linea__etq { flex: 1 1 7rem; min-width: 0; min-height: var(--toque); align-self: stretch; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plm-linea__campo { flex: 0 1 10.5rem; min-width: 8.5rem; margin-left: auto; }
.plm-linea__campo .entrada { text-align: right; font-variant-numeric: tabular-nums; min-height: var(--toque); padding-right: 40px; padding-left: var(--e-3); }
.plm-linea__campo .entrada-con-sufijo__sufijo { right: 12px; }
.plm-linea__campo .entrada::placeholder { color: var(--tinta-3); opacity: 1; }
.plm-linea--ajustada .plm-linea__campo .entrada { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); font-weight: 650; }
.plm-linea__valor { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plm-linea__origen { font-size: var(--t-xs); color: var(--tinta-3); margin-top: 6px; overflow-wrap: anywhere; line-height: 1.4; }
.plm-linea__origen b { color: var(--tinta-2); font-weight: 600; }
.plm-linea__llevas { display: flex; align-items: flex-start; gap: 4px; font-size: var(--t-xs); color: var(--tinta-2); margin-top: 4px; font-weight: 550; overflow-wrap: anywhere; }
.plm-linea__llevas svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.plm-linea__llevas--peor { color: var(--aviso-tinta); }
.plm-linea .campo__error { margin-top: 4px; }
.plm-ajuste { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-2); margin-top: 4px; font-size: var(--t-xs); color: var(--acento-tinta); font-weight: 600; }
.plm-ajuste:empty { display: none; }
.plm-ajuste > svg { width: 14px; height: 14px; flex-shrink: 0; }
.plm-ajuste > span { min-width: 0; overflow-wrap: anywhere; }
.plm-ajuste .btn { min-height: var(--toque); padding: 0 var(--e-2); font-size: var(--t-xs); margin-left: calc(var(--e-2) * -1); }
.plm-ajuste .btn svg { width: 16px; height: 16px; }
.plm-aplicar { margin-top: 2px; }
.plm-aplicar[hidden] { display: none; }
.plm-aplicar .interruptor__texto b { font-size: var(--t-sm); }
.plm-desglose { margin-top: 4px; }
.plm-desglose summary { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: var(--toque); font-size: var(--t-xs); font-weight: 650; color: var(--acento-tinta); list-style: none; }
.plm-desglose summary::-webkit-details-marker { display: none; }
.plm-desglose summary svg { width: 14px; height: 14px; transition: transform var(--dur-1); }
.plm-desglose[open] summary svg { transform: rotate(180deg); }
.plm-desglose ul { list-style: none; margin: 2px 0 0; padding: var(--e-2) var(--e-3); border-radius: var(--r-s); background: var(--superficie-2); }
.plm-desglose li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); padding: 4px 0; font-size: var(--t-xs); color: var(--tinta-2); }
.plm-desglose li + li { border-top: 1px solid var(--linea); }
.plm-desglose li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.plm-desglose li span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--tinta); }
.plm-desglose li small { display: block; color: var(--tinta-3); }
.plm-desglose li.plm-desglose__total span { font-weight: 700; color: var(--tinta); }
.plm-desglose--enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--e-3); }
.plm-enlace { display: inline-flex; align-items: center; gap: 2px; min-height: var(--toque); font-size: var(--t-xs); font-weight: 650; color: var(--acento-tinta); text-align: left; }
.plm-enlace svg { width: 14px; height: 14px; flex-shrink: 0; }
.plm-pasar-extra { margin: var(--e-1) 0 0 calc(var(--e-3) * -1); text-align: left; white-space: normal; }
.plm-instalar { margin: var(--e-3) 0 0; }
.plm-legado { margin-top: var(--e-3); }
.plm-todo { margin-top: var(--e-3); }
.plm-todo:empty { display: none; }
.plm-defecto { margin-left: calc(var(--e-3) * -1); }
.plm-nota-campo { margin-top: var(--e-4); }
.plm-pie-ahorro { flex: 1 1 auto; min-width: 0; }
.plm-pie-ahorro__etq { font-size: var(--t-xs); color: var(--tinta-3); font-weight: 600; }
.plm-pie-ahorro__cifra { font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; }
.plm-pie-ahorro__antes { font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.hoja__pie .btn--primario.plm-guardar { flex: 0 0 auto; min-width: 8.5rem; }
.plm-hoja .hoja__pie { flex-wrap: wrap; }
/* Mes cerrado: lo previsto frente a lo real */
.plm-resumen { display: flex; align-items: flex-start; gap: var(--e-2); padding: var(--e-3) var(--e-4); border-radius: var(--r-m); font-size: var(--t-sm); margin-bottom: var(--e-3); }
.plm-resumen svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.plm-resumen span { min-width: 0; overflow-wrap: anywhere; }
.plm-resumen--mejor { background: var(--ok-suave); color: var(--ok-tinta); }
.plm-resumen--peor { background: var(--aviso-suave); color: var(--aviso-tinta); }
.plm-comp { width: 100%; border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; table-layout: fixed; }
.plm-comp th, .plm-comp td { padding: 10px 0 10px 8px; border-bottom: 1px solid var(--linea); text-align: right; vertical-align: top; overflow-wrap: anywhere; }
.plm-comp th:first-child, .plm-comp td:first-child { text-align: left; padding-left: 0; width: 40%; }
.plm-comp thead th { font-size: var(--t-xs); color: var(--tinta-3); font-weight: 600; padding-top: 0; }
.plm-comp tbody th { font-weight: 600; }
.plm-comp tbody th small { display: block; font-weight: 500; color: var(--tinta-3); font-size: var(--t-xs); }
.plm-comp td small { display: block; font-size: var(--t-xs); font-weight: 650; }
.plm-comp tfoot th, .plm-comp tfoot td { font-weight: 700; border-bottom: 0; font-size: var(--t-base); }
/* DQ23-6: lo pagado por adelantado de un viaje posterior, en tono neutro bajo «Viajes y eventos» */
.plm-comp tr:has(+ .plm-comp__adelanto) > * { border-bottom: 0; padding-bottom: 4px; }
.plm-comp .plm-comp__adelanto td { text-align: left; padding: 0 0 10px; font-size: var(--t-xs); color: var(--tinta-2); }
.plm-dif--mejor { color: var(--ok-tinta); }
.plm-dif--peor { color: var(--aviso-tinta); }
.plm-dif--igual { color: var(--tinta-3); }
.plm-comp__nota { font-size: var(--t-xs); color: var(--tinta-3); margin-top: var(--e-3); }
.plm-evento-aviso { margin-top: var(--e-3); }
.plm-evento-aviso .plm-enlace { font-size: inherit; vertical-align: middle; }
.plm-cambiar { margin-top: var(--e-3); }
.plm-cambiar summary { cursor: pointer; display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--toque); font-weight: 650; color: var(--acento-tinta); list-style: none; font-size: var(--t-sm); }
.plm-cambiar summary::-webkit-details-marker { display: none; }
.plm-cambiar summary svg { width: 18px; height: 18px; }
/* ---------- Hoja de la meta (plo-*) ---------- */
.plo-auto { margin-top: var(--e-4); color: var(--tinta-2); font-size: var(--t-sm); }
.plo-campo { margin-top: var(--e-4); }
.plo-campo[hidden] { display: none; }
/* ---------- v2.2 «optimista» · lo que aún no ha confirmado el servidor (§3.8, DR6) ---------- */
/* Insignia «Actualizando…» junto al título de cada tarjeta; las cifras que va a recalcular el servidor, atenuadas. */
.tarjeta__titulo > .actualizando, .cta-panel__titulo > .actualizando, .pat-mes__titulo > .actualizando, .plan-panel__titulo > .actualizando {
  margin-left: 6px; vertical-align: middle; font-weight: 600; letter-spacing: 0;
}
.pat-panel__act { margin-top: var(--e-2); }
.pat-panel--act .pat-panel__cifra, .pat-panel--act .pat-monedas, [data-actualizando="true"] .pat-mes__stats dd,
[data-actualizando="true"] .cta-panel__cifra, [data-actualizando="true"] .cta-panel__base, [data-actualizando="true"] .cta-resumen__stats dd,
[data-actualizando="true"] .cta-resumen__inicio { opacity: .6; transition: opacity var(--dur-2); }
/* v2.3 (§5.4, CV23-10): en el plan solo se atenúa lo de la zona que recalcula el servidor (todo, real, calculado, mes). */
.plan-act, .plan-mes[data-actualizando="true"] .plan-mes__io, .plan-mes[data-actualizando="true"] .plan-mes__ahorro,
.plan-mes[data-actualizando="true"] .plan-mes__comp { opacity: .55; transition: opacity var(--dur-2); }
/* Saldo de una fila que espera al servidor: el último conocido atenuado con un reloj (o «—»). */
.cifra-act { display: inline-flex; align-items: center; gap: 4px; opacity: .6; }
.cifra-act__ico { width: 12px; height: 12px; flex-shrink: 0; }
.plan-no__act { display: flex; justify-content: center; margin-bottom: var(--e-2); }
.pat-cuenta .fila__titulo > .pendiente-reloj, .cta-efecto .fila__titulo > .pendiente-reloj { margin-left: 4px; }
/* Transferencia entre monedas sin un cambio fiable: la hoja espera al servidor (ESP, §5.3). */
.tra-espera { margin-top: var(--e-3); }