/* Lluvia (hasta el 25/09, «Finanzas») — hoja de estilos v3 (23/09).
   Dirección: fintech premium suave. Porcelana fría de fondo, piezas blancas
   "mecanizadas" con doble bisel (bandeja + núcleo), tinta casi negra para la
   acción principal y el color reservado a lo que significa algo: cada
   categoría, lo que entra y lo que sale.
   Tipografía: Bricolage Grotesque para cifras y títulos (con óptica y ancho
   variables), Onest para la interfaz.
   Movimiento: la píldora del menú viaja de la sección anterior a la nueva, las
   cifras ruedan como un marcador, la dona se dibuja por porciones y responde
   al tocarla, y todo lo que se aprieta devuelve algo. */

:root {
  --lienzo: #eef0f3;
  --bandeja: #e5e8ec;
  --anillo: rgb(16 20 24 / .07);
  --nucleo: #ffffff;
  --nucleo-2: #f4f6f8;
  --nucleo-3: #eaedf1;
  --tinta: #101418;
  --tinta-2: #4a525c;
  --tinta-3: #636b76;
  --linea: #e6e9ed;
  /* el aro de un campo sobre un fondo gris (se aclara solo en oscuro) */
  --campo-aro: color-mix(in srgb, var(--tinta-3) 36%, transparent);
  --accion: #101418;
  --accion-texto: #ffffff;
  --foco: #2f6fed;
  --verde: #1d7a50;
  --verde-suave: #e2f2e9;
  --rojo: #bf3a2f;
  --rojo-suave: #fbe8e5;
  --ambar: #8f5d06;
  --ambar-suave: #fbf0d7;
  /* F17: los otros dos tipos de "Cargar" (A cobrar y Entre cuentas), como el verde y el rojo de ingreso y gasto */
  --azul: #2458c6;
  --violeta: #7440c9;
  --sombra-c: rgb(30 44 66 / .16);
  --brillo: rgb(255 255 255 / .75);
  --sombra: 0 1px 1px rgb(30 44 66 / .04), 0 24px 48px -28px var(--sombra-c);
  --ambiente-1: rgb(120 150 200 / .16);
  --ambiente-2: rgb(214 170 130 / .12);

  --display: "Bricolage Grotesque", "Onest", system-ui, sans-serif;
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* escala de interfaz, razón ~1.2 */
  --t-xs: 12px; --t-sm: 13.5px; --t-base: 15px; --t-md: 17px; --t-lg: 21px; --t-xl: 28px;

  --r-bandeja: 28px;
  --r-nucleo: 22px;
  --r-control: 12px;

  /* un solo ritmo entre piezas: --hueco es la luz entre dos biseles vecinos,
     medida de aro a aro; --aro es lo que el bisel dibujado con sombras asoma
     por fuera de su caja (.panel, .cuenta, .kpi, .movs) */
  --hueco: 20px;
  --aro: 7px;

  /* la opción elegida de un selector sube sobre su riel */
  --elegido: var(--nucleo);
  --elegido-suave: var(--nucleo-2);
  /* fichas de categoría: cuánto color de fondo y cuánto se aclara el ícono */
  --cat-fondo: 15%;
  --cat-tinta: 100%;
  /* la píldora del menú: tinta en la isla de arriba */
  --pildora: var(--accion);
  --pildora-texto: var(--accion-texto);
  --r-pildora: 999px;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

  /* curvas: llegada segura (exponencial) y resorte corto para lo que viaja */
  --salida: cubic-bezier(.16, 1, .3, 1);
  --resorte: cubic-bezier(.32, .72, 0, 1);
  --rapida: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --lienzo: #0d1013; --bandeja: #14181d; --anillo: rgb(255 255 255 / .06); --nucleo: #191e24;
    --nucleo-2: #20262d; --nucleo-3: #283039; --tinta: #eef1f4; --tinta-2: #aab2bc; --tinta-3: #8a929d;
    --linea: #262c34; --accion: #eef1f4; --accion-texto: #0d1013; --foco: #7ea2ff;
    --verde: #5cc795; --verde-suave: #16291f; --rojo: #ff8a7b; --rojo-suave: #34201d;
    --ambar: #e6b450; --ambar-suave: #2f2614; --sombra-c: rgb(0 0 0 / .6); --brillo: rgb(255 255 255 / .05);
    --azul: #7fb0ff; --violeta: #c3a1ff;
    --ambiente-1: rgb(80 110 170 / .14); --ambiente-2: rgb(170 120 80 / .07);
    --elegido: #2e3640; --elegido-suave: var(--nucleo-3); --cat-fondo: 22%; --cat-tinta: 72%;
    --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1013' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --lienzo: #0d1013; --bandeja: #14181d; --anillo: rgb(255 255 255 / .06); --nucleo: #191e24;
  --nucleo-2: #20262d; --nucleo-3: #283039; --tinta: #eef1f4; --tinta-2: #aab2bc; --tinta-3: #8a929d;
  --linea: #262c34; --accion: #eef1f4; --accion-texto: #0d1013; --foco: #7ea2ff;
  --verde: #5cc795; --verde-suave: #16291f; --rojo: #ff8a7b; --rojo-suave: #34201d;
  --ambar: #e6b450; --ambar-suave: #2f2614; --sombra-c: rgb(0 0 0 / .6); --brillo: rgb(255 255 255 / .05);
  --azul: #7fb0ff; --violeta: #c3a1ff;
  --ambiente-1: rgb(80 110 170 / .14); --ambiente-2: rgb(170 120 80 / .07);
  --elegido: #2e3640; --elegido-suave: var(--nucleo-3); --cat-fondo: 22%; --cat-tinta: 72%;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1013' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  color-scheme: dark;
}
@media (max-width: 900px) {
  :root { --hueco: 14px; --pildora: var(--nucleo-2); --pildora-texto: var(--tinta); --r-pildora: 20px; }
}

/* --- base -------------------------------------------------------------------- */
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  scrollbar-color: var(--nucleo-3) transparent; scroll-behavior: smooth;
  background: var(--lienzo); -webkit-tap-highlight-color: transparent;
}
a, button, summary, label { touch-action: manipulation; }
body {
  margin: 0; min-height: 100dvh; color: var(--tinta); font: 400 var(--t-base)/1.55 var(--sans);
  background:
    radial-gradient(900px 520px at 12% -8%, var(--ambiente-1), transparent 70%),
    radial-gradient(700px 480px at 96% 4%, var(--ambiente-2), transparent 70%),
    var(--lienzo);
  background-attachment: fixed;
  caret-color: var(--foco);
}
::selection { background: color-mix(in srgb, var(--foco) 22%, transparent); color: var(--tinta); }
a { color: var(--tinta); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
    text-underline-offset: 3px; text-decoration-thickness: from-font; }
a:hover { text-decoration-color: currentColor; }
/* el contorno sigue la forma del control: no se le cambia el radio */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 6px; }
/* todas las cifras hablan con la misma voz: Bricolage */
.plata { font-family: var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ing { color: var(--verde); }
.egr { color: var(--rojo); }
.tenue { color: var(--tinta-2); }
.chico { font-size: var(--t-sm); }
.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 99px;
          background: var(--accion); color: var(--accion-texto); text-decoration: none; }
.saltar:focus { top: 12px; }

/* --- piezas: doble bisel -------------------------------------------------------
   La bandeja es un marco apenas más oscuro que el lienzo, con un anillo de un
   pelo; el núcleo es la pieza blanca con su brillo en el borde de arriba. Donde
   la plantilla no tiene los dos elementos (.panel, .movs, .cuenta, .kpi) la
   bandeja se dibuja con sombras, sin ocupar lugar. */
.bisel {
  padding: 6px; border-radius: var(--r-bandeja); background: var(--bandeja);
  box-shadow: inset 0 0 0 1px var(--anillo), var(--sombra); min-width: 0;
}
.nucleo {
  height: 100%; padding: 22px; border-radius: var(--r-nucleo); background: var(--nucleo);
  box-shadow: inset 0 1px 0 var(--brillo), 0 0 0 1px var(--anillo), 0 1px 2px rgb(30 44 66 / .05);
}
.panel, .cuenta, .kpi, .movs {
  background: var(--nucleo); border-radius: var(--r-nucleo);
  box-shadow: inset 0 1px 0 var(--brillo), 0 0 0 1px var(--anillo), 0 0 0 6px var(--bandeja),
              0 0 0 7px var(--anillo), 0 26px 50px -30px var(--sombra-c);
}
.panel { padding: 22px; margin: var(--aro); }
.panel + .panel { margin-top: calc(var(--hueco) + 2 * var(--aro)); }

/* --- navegación: isla flotante arriba, isla abajo en el celular --------------- */
.isla-arriba {
  position: sticky; top: 0; z-index: 30; display: flex; justify-content: center;
  padding: 14px 16px 0; pointer-events: none;
}
.isla {
  pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 6px;
  border-radius: 999px; background: color-mix(in srgb, var(--nucleo) 76%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--brillo), 0 0 0 1px var(--anillo), 0 18px 40px -22px var(--sombra-c);
}
.marca { display: flex; align-items: center; gap: 9px; padding: 4px 14px 4px 6px; text-decoration: none;
         font: 650 var(--t-md)/1 var(--display); letter-spacing: -.02em; }
.marca img { border-radius: 8px; box-shadow: 0 0 0 1px var(--anillo); }
.nav { position: relative; display: flex; gap: 2px; }
.nav a {
  position: relative; isolation: isolate; display: flex; align-items: center; padding: 8px 14px; border-radius: 999px;
  color: var(--tinta-2); font-weight: 500; font-size: var(--t-sm); text-decoration: none; white-space: nowrap;
  transition: color 180ms var(--salida), background-color 180ms var(--salida), transform 140ms var(--salida);
}
.nav a:hover { color: var(--tinta); background: var(--nucleo-2); }
.nav a[aria-current="page"] { color: var(--accion-texto); background: transparent; transition: transform 140ms var(--salida); }
/* La píldora es una pieza aparte, detrás del rótulo. */
.pildora { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--pildora); }
.rotulo { display: inline-flex; align-items: center; gap: 7px; }
/* Al cambiar de sección la píldora viaja desde la sección anterior (tema.js):
   sobre el menú se pone una copia con todos los rótulos en el color de la
   píldora, recortada con su forma. Lo que se mueve es el recorte, así cada
   letra toma, cuadro a cuadro, el color de lo que tiene debajo: nada funde por
   tiempo, la forma no se estira y el alto no cambia. Mientras viaja, el menú de
   abajo muestra la sección nueva como una más. */
.nav-tinta {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: inherit; grid-template-columns: inherit; align-items: inherit; gap: inherit; padding: inherit;
  background: var(--pildora); will-change: clip-path;
}
.nav-tinta :is(a, a:hover) { color: var(--pildora-texto); background: transparent; }
.viajando > a .pildora { visibility: hidden; }
.nav.viajando > a[aria-current="page"] { color: var(--tinta-2); }
.contador {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
  font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; background: var(--ambar); color: var(--nucleo);
}
.cargar {
  margin-left: 6px; padding: 5px 5px 5px 16px;
}

.isla-abajo { display: none; }
@media (max-width: 900px) {
  .isla-arriba { display: none; }
  .isla-abajo {
    position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 56px repeat(2, minmax(0, 1fr)); align-items: center; padding: 6px;
    border-radius: 26px; background: color-mix(in srgb, var(--nucleo) 80%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: inset 0 1px 0 var(--brillo), 0 0 0 1px var(--anillo), 0 18px 40px -18px var(--sombra-c);
  }
  .isla-abajo a {
    position: relative; isolation: isolate; display: grid; place-items: center; min-height: 52px; padding: 6px 0 5px;
    border-radius: var(--r-pildora); color: var(--tinta-3); font-size: var(--t-xs); font-weight: 500; letter-spacing: -.01em;
    text-decoration: none; white-space: nowrap;
    transition: color 180ms var(--salida), transform 140ms var(--salida);
  }
  .isla-abajo .rotulo { position: relative; display: grid; justify-items: center; gap: 3px; }
  .isla-abajo a .ic { width: 22px; height: 22px; transition: transform 260ms var(--resorte); }
  .isla-abajo a[aria-current="page"] { color: var(--tinta); transition: transform 140ms var(--salida); }
  .isla-abajo a[aria-current="page"] .ic, .isla-abajo .nav-tinta a .ic { transform: translateY(-1px); }
  .isla-abajo.viajando > a[aria-current="page"] { color: var(--tinta-3); }
  .isla-abajo.viajando > a[aria-current="page"] .ic { transform: none; }
  .isla-abajo .contador { position: absolute; top: -4px; left: calc(50% + 6px); min-width: 17px; height: 17px; font-size: 11px; }
  /* el "+" queda por encima de la copia que viaja: la píldora pasa por debajo */
  .isla-abajo .mas { position: relative; z-index: 2; }
  .isla-abajo .nav-tinta .mas { visibility: hidden; }
  .isla-abajo .mas {
    justify-self: center; width: 52px; height: 52px; padding: 0; border-radius: 18px;
    background: var(--accion); color: var(--accion-texto); box-shadow: 0 10px 22px -10px var(--sombra-c);
  }
  .isla-abajo .mas .ic { width: 24px; height: 24px; }
  .solo-compu { display: none !important; }
}
@media (min-width: 901px) { .solo-celu { display: none !important; } }
@media (max-width: 1080px) and (min-width: 901px) { .marca span { display: none; } .nav a { padding: 8px 11px; } }

main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 34px clamp(16px, 4vw, 44px) 120px; }
@media (max-width: 900px) { main { padding: 18px 14px 130px; } }

.cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin: 6px 7px 30px; }
.cabecera .acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
h1 {
  font: 600 clamp(30px, 4.4vw, 44px)/1.02 var(--display); letter-spacing: -.035em;
  font-optical-sizing: auto; font-stretch: 92%;
}
.bajada { color: var(--tinta-2); margin: 8px 0 0; max-width: 60ch; }
h2 { font: 600 var(--t-md)/1.2 var(--display); letter-spacing: -.015em; color: var(--tinta); }
h2 .ayuda { font: 400 var(--t-sm) var(--sans); letter-spacing: 0; color: var(--tinta-3); margin-left: 6px; }
.panel-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-cab h2 { min-width: 0; }
.pie-nota { margin: 16px 0 0; font-size: var(--t-sm); color: var(--tinta-3); }
.pie-nota.arriba { margin: -8px 0 10px; }
.enlace { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size: var(--t-sm); font-weight: 600; text-decoration: none; color: var(--tinta-2); white-space: nowrap; }
.enlace .ic { width: 15px; height: 15px; transition: transform 220ms var(--salida); }
.enlace:hover { color: var(--tinta); }
.enlace:hover .ic { transform: translateX(3px); }

/* --- controles ------------------------------------------------------------------ */
.boton, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 var(--t-sm)/1.2 var(--sans); border-radius: 999px; border: 0;
  background: var(--nucleo-2); color: var(--tinta); padding: 10px 16px; cursor: pointer; white-space: nowrap;
  text-decoration: none; box-shadow: inset 0 0 0 1px var(--anillo);
  transition: transform 140ms var(--rapida), background-color 180ms var(--salida), box-shadow 180ms var(--salida);
}
.boton:hover, button:hover { background: var(--nucleo-3); }
.boton:active, button:active { transform: scale(.97); }
.boton.primario, button.primario { background: var(--accion); color: var(--accion-texto); box-shadow: 0 8px 20px -12px var(--sombra-c); }
.boton.primario:hover, button.primario:hover { background: color-mix(in srgb, var(--accion) 86%, var(--lienzo)); }
button.peligro { color: var(--rojo); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ancho { width: 100%; justify-content: space-between; padding: 7px 7px 7px 20px; font-size: var(--t-base); }
.mini { padding: 6px 11px; font-size: var(--t-xs); }
.icono-solo, .mini.icono-solo { padding: 8px; }
/* En pantallas táctiles, todo lo que se toca responde en 44 × 44 como mínimo,
   aunque el círculo que se ve sea más chico. */
@media (pointer: coarse) {
  .pildoras a { min-width: 44px; text-align: center; }
  .filtros summary { min-height: 44px; }
  .icono-solo, .mov .acciones button, .meses a, .pildoras a, .cat-fila button, .cat-fila summary, .cuenta summary, .enlace, .boton { position: relative; }
  :is(.icono-solo, .mov .acciones button, .meses a, .pildoras a, .cat-fila button, .cat-fila summary, .cuenta summary, .enlace, .boton)::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
}
/* botón dentro de botón: el ícono vive en su propio círculo y se mueve solo */
.nido {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  transition: transform 320ms var(--resorte);
}
.ancho .nido { width: 36px; height: 36px; }
.nido .ic { width: 16px; height: 16px; }
.cargar:hover .nido { transform: rotate(90deg) scale(1.06); }
.ancho:hover .nido { transform: translateX(2px) scale(1.05); }

input, select, textarea {
  font: 400 var(--t-base) var(--sans); color: var(--tinta); background: var(--nucleo-2);
  border: 1px solid transparent; border-radius: var(--r-control); padding: 11px 13px; min-width: 0; width: 100%;
  transition: border-color 160ms var(--salida), box-shadow 160ms var(--salida), background-color 160ms var(--salida);
}
input:hover, select:hover { background: var(--nucleo-3); }
input:focus, select:focus, textarea:focus {
  border-color: var(--foco); outline: none; background: var(--nucleo);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--foco) 18%, transparent);
}
input::placeholder { color: var(--tinta-3); }
label { display: grid; gap: 6px; font-size: var(--t-sm); color: var(--tinta-2); font-weight: 500; }
@media (max-width: 900px) { input, select, textarea { font-size: 16px; } }
/* en una columna angosta del celu la fecha entra entera, con su almanaque */
@media (max-width: 640px) { input[type="date"] { padding-inline: 10px; } }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accion); }
/* Donde se edita en el lugar (una fila de Movimientos, el editor de una
   categoría) el fondo ya es gris: ahí los campos son blancos y con su aro, para
   que se lean como campos y no como texto suelto. */
:is(.mov.editando, .cat-fila:has(> details[open])) { --superficie: var(--nucleo-2); }
:is(.mov.editando, .cat-fila > details[open]) :is(input:not([type="radio"], [type="checkbox"]), select, textarea) {
  background-color: var(--nucleo); border-color: var(--campo-aro);
}
:is(.mov.editando, .cat-fila > details[open]) :is(input:not([type="radio"], [type="checkbox"]), select, textarea):hover { border-color: var(--tinta-3); }
:is(.mov.editando, .cat-fila > details[open]) :is(input, select, textarea):focus { border-color: var(--foco); }
:is(.mov.editando, .cat-fila > details[open]) .segmento { background: var(--nucleo-3); }
.cat-fila > details[open] .selector-iconos input:not(:checked) + span { background: var(--nucleo); }
.cat-fila > details[open] .selector-iconos label:hover input:not(:checked) + span { background: var(--nucleo-3); }

/* Los radios de los selectores quedan invisibles pero ocupan exactamente su
   opción: el toque cae en el radio y nada asoma fuera de la página. */
.segmento label, .selector-iconos label, .selector-colores label { position: relative; }
.segmento input, .selector-iconos input, .selector-colores input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer;
}

.segmento { display: flex; padding: 4px; gap: 4px; background: var(--nucleo-2); border-radius: 999px; }
.segmento label { flex: 1; display: flex; }
.segmento label > span {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
  padding: 9px 12px; border-radius: 999px; font-size: var(--t-sm); line-height: 1.3;
  font-weight: 600; color: var(--tinta-2); cursor: pointer;
  transition: background-color 220ms var(--salida), color 220ms var(--salida), box-shadow 220ms var(--salida);
}
.segmento label:hover > span { color: var(--tinta); }
.segmento .ic { width: 16px; height: 16px; }
.segmento .plata { display: block; font-weight: 600; }
.segmento.dos-lineas label > span { flex-direction: column; gap: 1px; }
/* un rótulo de control no se parte: si no entra, se achica el aire de adentro
   y, en el tema, se guardan los íconos (el texto ya dice Claro y Oscuro) */
.segmento:not(.dos-lineas) label > span { white-space: nowrap; }
@media (max-width: 640px) {
  .segmento { gap: 2px; }
  .segmento label > span { padding-inline: 8px; }
}
.ajuste .control { container-type: inline-size; }
@container (max-width: 295px) { .segmento.tema .ic { display: none; } }
.segmento input:checked + span {
  background: var(--elegido); color: var(--tinta);
  box-shadow: inset 0 1px 0 var(--brillo), 0 0 0 1px var(--anillo), 0 4px 12px -6px var(--sombra-c);
}
.segmento input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: -2px; }
.segmento.gasto input[value="gasto"]:checked + span { color: var(--rojo); }
.segmento.gasto input[value="ingreso"]:checked + span { color: var(--verde); }

.pildoras { display: flex; gap: 2px; padding: 4px; background: var(--nucleo-2); border-radius: 999px; }
.pildoras a { padding: 6px 13px; border-radius: 999px; color: var(--tinta-2); font-weight: 600; font-size: var(--t-sm); text-decoration: none;
              transition: background-color 200ms var(--salida), color 200ms var(--salida), transform 140ms var(--salida); }
.pildoras a:hover { color: var(--tinta); }
.pildoras a[aria-current="true"] {
  background: var(--elegido); color: var(--tinta);
  box-shadow: inset 0 1px 0 var(--brillo), 0 0 0 1px var(--anillo), 0 4px 10px -6px var(--sombra-c);
}
.meses { display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--nucleo-2); border-radius: 999px; }
.meses a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 99px; color: var(--tinta); text-decoration: none;
           transition: background-color 180ms var(--salida), transform 140ms var(--rapida); }
.meses a:hover { background: var(--nucleo); }
.meses a:active { transform: scale(.92); }
.meses .no { color: var(--tinta-3); opacity: .35; pointer-events: none; }
.meses span { min-width: 132px; text-align: center; font: 600 var(--t-base) var(--display); letter-spacing: -.01em; }

.aviso { display: flex; align-items: center; gap: 10px; border-radius: 999px; padding: 10px 18px; margin: 0 7px 22px; background: var(--nucleo); box-shadow: 0 0 0 1px var(--anillo); width: fit-content; max-width: 100%; }
.aviso.ok { background: var(--verde-suave); color: var(--verde); box-shadow: none; }
.aviso.error { background: var(--rojo-suave); color: var(--rojo); box-shadow: none; border-radius: 16px; }

.vacio { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 28px 12px; color: var(--tinta-2); }
.vacio .ic { width: 32px; height: 32px; color: var(--tinta-3); }
.vacio strong { color: var(--tinta); font: 600 var(--t-md) var(--display); }
.vacio.grande { padding: 56px 20px; gap: 12px; }
.vacio.grande .ic { width: 44px; height: 44px; }
.vacio.grande p { max-width: 46ch; margin: 0; }
.ejemplos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.ejemplos span { font-size: var(--t-sm); background: var(--nucleo-2); border-radius: 99px; padding: 7px 13px; color: var(--tinta); }

/* --- inicio: tablero asimétrico ------------------------------------------------ */
.tablero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); }
.resumen { grid-column: span 5; }
.dona-panel { grid-column: span 7; }
.meses-panel { grid-column: span 5; }
.ultimos-panel { grid-column: span 7; }
.ancho-total { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .resumen, .dona-panel, .meses-panel, .ultimos-panel { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nucleo { padding: 18px; }
  .meses span { min-width: 0; padding: 0 4px; font-size: var(--t-sm); }
  .resumen-cab { flex-wrap: nowrap; }
  .rotulo-grande { margin-top: 26px; }
}

.resumen .nucleo { display: flex; flex-direction: column; }
/* En compu la tarjeta del resumen mide lo que mide la de la dona: el aire que
   sobra se reparte arriba y abajo de la cifra, en vez de juntarse en un hueco. */
@media (min-width: 1101px) {
  .resumen .rotulo-grande { margin-top: auto; padding-top: 18px; }
  .resumen .dupla { padding-top: 18px; }
  /* la leyenda, más compacta: es la que fija el alto de la fila */
  .dona .leyenda { gap: 1px; }
  .dona .leyenda a { padding-block: 3px; }
  /* con ocho categorías o más se aprieta otro poco (fichas de 24 px, renglones
     de 28): así un mes con muchas no deja al resumen con aire muerto */
  .dona:has(.leyenda li:nth-child(8)) .leyenda { gap: 0; }
  .dona:has(.leyenda li:nth-child(8)) .leyenda a { padding-block: 2px; }
  .dona:has(.leyenda li:nth-child(8)) .chip-cat { width: 24px; height: 24px; border-radius: 8px; }
  .dona:has(.leyenda li:nth-child(8)) .chip-cat .ic { width: 14px; height: 14px; }
  /* y si la dona queda más baja que el resumen, su aire se reparte arriba y abajo */
  .dona-panel .nucleo { display: flex; flex-direction: column; }
  .dona-panel .dona { flex: 1; }
  /* las barras de "Últimos meses" llenan su tarjeta */
  .meses-panel .nucleo { display: flex; flex-direction: column; }
  .meses-panel .seis { flex: 1; height: auto; min-height: 176px; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .meses-panel .seis a { height: auto; }
}
.resumen-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.rotulo-grande { margin: 34px 0 4px; font: 500 var(--t-base)/1.3 var(--sans); letter-spacing: 0; color: var(--tinta-2); }
.cifra {
  margin: 0; font: 600 clamp(46px, 6.2vw, 78px)/1 var(--display); letter-spacing: -.028em;
  font-optical-sizing: auto; font-stretch: 86%; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.resumen .bajada { margin-top: 12px; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; padding-top: 26px; }
.dupla > div { display: grid; align-content: start; gap: 4px; padding: 16px 0 0; border-top: 1px solid var(--linea); min-width: 0; }
.dupla > div + div { padding-left: 18px; margin-left: 0; border-left: 1px solid var(--linea); }
.rot { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--tinta-2); font-weight: 500; }
.rot .ic { width: 16px; height: 16px; }
.cifra-m {
  font: 600 clamp(22px, 2.5vw, 28px)/1.1 var(--display); letter-spacing: -.012em; font-stretch: 90%;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.var { font-size: var(--t-xs); color: var(--tinta-3); }
.var .sube-malo, .var .baja-malo { color: var(--rojo); font-weight: 600; }
.var .sube-bueno, .var .baja-bueno { color: var(--verde); font-weight: 600; }
.var .ic { width: 13px; height: 13px; vertical-align: -2px; }
.nota { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; font-size: var(--t-sm); color: var(--ambar); }

/* ritmo del mes: lo gastado, lo proyectado y dónde cerró el mes pasado */
.ritmo-bloque { margin-top: 22px; }
.ritmo { position: relative; height: 10px; background: var(--nucleo-3); border-radius: 99px; box-shadow: inset 0 0 0 1px var(--anillo); }
.ritmo .gastado, .ritmo .proyectado { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; transform-origin: left; }
.ritmo .proyectado { width: var(--p); background: color-mix(in srgb, var(--rojo) 20%, transparent); }
.ritmo .gastado { width: var(--g); background: var(--rojo); }
.ritmo .muesca { position: absolute; top: -5px; bottom: -5px; left: min(var(--a), calc(100% - 1px)); width: 2px; margin-left: -1px; background: var(--tinta); border-radius: 2px; }
.ritmo-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: var(--t-sm); color: var(--tinta-2); }
.ritmo-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.l-proy { background: color-mix(in srgb, var(--rojo) 30%, transparent); }
.l-ant { background: var(--tinta); width: 2px !important; }
.l-ing { background: var(--verde); }
.l-egr { background: var(--rojo); }

/* cifras que ruedan: cada dígito sube desde abajo de su propia ventanita */
.rodillo { position: relative; }
.rodillo, .rodillo > [aria-hidden] { display: inline-flex; }
.rodillo .d { display: inline-block; overflow: hidden; padding-block: .08em; margin-block: -.08em; }
.rodillo .d > span, .rodillo .s { display: inline-block; }
.rodillo .s { white-space: pre; }

/* la dona */
.dona { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: 22px; align-items: center; }
@media (max-width: 640px) { .dona { grid-template-columns: 1fr; justify-items: center; } .leyenda { width: 100%; } }
.dona-figura { position: relative; width: 100%; max-width: 240px; aspect-ratio: 1; }
.dona-figura svg { width: 100%; height: 100%; overflow: visible; }
.pista-dona { fill: none; stroke: var(--nucleo-2); stroke-width: 26; }
.porcion {
  fill: none; stroke: var(--c); stroke-width: 26; cursor: pointer;
  transition: opacity 260ms var(--salida), stroke-width 320ms var(--resorte);
}
.dona.enfocada .porcion { opacity: .22; }
.dona.enfocada .porcion.activa { opacity: 1; stroke-width: 34; }
.dona-centro { position: absolute; inset: 22%; display: grid; place-items: center; text-align: center; pointer-events: none; }
.c-item {
  grid-area: 1 / 1; display: grid; justify-items: center; gap: 2px; opacity: 0; transform: translateY(6px) scale(.98);
  transition: opacity 220ms var(--salida), transform 320ms var(--salida); max-width: 100%;
}
.c-item.activo { opacity: 1; transform: none; }
.c-item .rot { color: color-mix(in srgb, var(--c, var(--tinta-2)) var(--cat-tinta), white); font-weight: 600; }
.c-item .cifra-m { font-size: clamp(20px, 2.3vw, 26px); max-width: 100%; }

.leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.leyenda a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 7px 10px 7px 7px; border-radius: 14px; color: var(--tinta); text-decoration: none;
  transition: background-color 180ms var(--salida), transform 140ms var(--salida);
}
.leyenda li.activa a, .leyenda a:hover { background: var(--nucleo-2); }
.leyenda .chip-cat { transition: transform 260ms var(--resorte); }
.leyenda .n { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-weight: 500; line-height: 1.3; }
.leyenda .n > span:first-child { overflow-wrap: anywhere; }
.leyenda .n .delta { flex: none; }
/* cifras chicas: Bricolage apenas angosta y sin tracking, así el punto de
   miles queda a la vista; en columnas, tabulares; dentro de una oración, no */
.leyenda .plata, td.plata, .ritmo-ley .plata, .segmento .plata, .bajada .plata {
  font-family: var(--display); font-weight: 600; font-stretch: 94%; letter-spacing: 0;
}
.leyenda .plata, td.plata { font-variant-numeric: tabular-nums; }
.ritmo-ley .plata, .bajada .plata { font-variant-numeric: proportional-nums; }
.leyenda .pct { width: 34px; text-align: right; font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
/* en oscuro el color de la categoría se aclara y el fondo sube, para que
   Nafta, Impuestos u Otros no se hundan en el núcleo */
.chip-cat, .cat-ic {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; flex: none;
  color: color-mix(in srgb, var(--c) var(--cat-tinta), white);
  background: color-mix(in srgb, var(--c) var(--cat-fondo), transparent);
}
.chip-cat .ic, .cat-ic .ic { width: 18px; height: 18px; }
.delta { font-size: var(--t-xs); font-weight: 600; padding: 2px 7px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.delta.sube { color: var(--rojo); background: var(--rojo-suave); }
.delta.baja { color: var(--verde); background: var(--verde-suave); }

/* seis meses: barras de ingreso y gasto */
.seis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; align-items: end; height: 176px; }
.seis a { display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 100%; padding: 8px 0 6px; border-radius: 14px;
          color: var(--tinta-3); font-size: var(--t-xs); font-weight: 500; text-align: center; text-decoration: none;
          transition: background-color 180ms var(--salida), color 180ms var(--salida), transform 140ms var(--salida); }
.seis a:hover { background: var(--nucleo-2); color: var(--tinta); }
.seis .par { display: flex; align-items: end; justify-content: center; gap: 4px; height: 100%; }
.seis .b { width: 34%; max-width: 16px; border-radius: 6px 6px 3px 3px; height: var(--h); transform-origin: bottom; }
.seis .b.i { background: var(--verde); }
.seis .b.e { background: var(--rojo); }
.seis a[aria-current="true"] { color: var(--tinta); font-weight: 700; background: var(--elegido-suave); }

/* --- listas de movimientos -------------------------------------------------------- */
.dia { margin: 0 7px 30px; }
.dia > h3 { font: 600 var(--t-sm)/1 var(--sans); color: var(--tinta-2); margin: 0 0 12px 4px; }
.movs { list-style: none; margin: 0; padding: 4px; }
.nucleo .movs, .panel .movs { box-shadow: none; background: transparent; border-radius: 0; padding: 0; margin: 0 -8px; }
.mov {
  position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 16px; transition: background-color 180ms var(--salida);
}
/* separadores rectos: una raya de 1 px entre filas, que se apaga al pasar.
   El gris de "pasar" sólo donde hay mouse: con el dedo quedaba pegado al tocar */
.mov + .mov::before, .cat-fila + .cat-fila::before {
  content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: var(--linea); transition: opacity 180ms var(--salida);
}
@media (hover: hover) {
  .mov:hover, .cat-fila:hover { background: var(--nucleo-2); }
  .mov:hover::before, .mov:hover + .mov::before, .cat-fila:hover::before, .cat-fila:hover + .cat-fila::before { opacity: 0; }
}
.mov.sin-check { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.mov .que { min-width: 0; }
/* se recorta el nombre, nunca el sello */
.mov .que strong { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.mov .que strong .nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov .que > span { display: block; color: var(--tinta-3); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov > .plata { display: grid; justify-items: end; font: 600 var(--t-md) var(--display); letter-spacing: -.01em; }
.mov > .plata .equiv { font: 500 var(--t-xs)/1.4 var(--sans); letter-spacing: 0; color: var(--tinta-3); }
.mov .acciones { display: flex; gap: 6px; }
/* con el dedo, 44 px de centro a centro: las áreas de toque no se pisan */
@media (pointer: coarse) { .mov .acciones { gap: 10px; --acciones-pend: 196px; } }
.mov.pendiente { background: color-mix(in srgb, var(--ambar) 5%, transparent); }
.sello {
  flex: none; display: inline-block; color: var(--ambar); font-size: var(--t-xs); line-height: 18px; font-weight: 600;
  background: var(--ambar-suave); border-radius: 99px; padding: 0 8px; white-space: nowrap;
}
.mov.editando { display: block; background: var(--nucleo-2); padding: 16px; }
.botonera { display: flex; flex-wrap: wrap; gap: 8px; }

/* la casilla: diseñada, de 20 px, dentro de un área de 44 */
.marcar { display: grid; place-items: center; width: 44px; height: 44px; margin: -12px; cursor: pointer; }
.marcar input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; display: block; flex: none; width: 20px; height: 20px; min-width: 0;
  margin: 0; padding: 0; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--nucleo) center / 13px no-repeat;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tinta-3) 55%, transparent);
  transition: background-color 160ms var(--salida), box-shadow 160ms var(--salida);
}
.marcar:hover input[type="checkbox"]:not(:checked) { box-shadow: inset 0 0 0 1.5px var(--tinta-2); }
.marcar input[type="checkbox"]:checked { background-color: var(--accion); background-image: var(--check); box-shadow: none; }
.marcar input[type="checkbox"]:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

@media (max-width: 640px) {
  .mov { grid-template-columns: auto auto minmax(0, 1fr) auto; row-gap: 6px; }
  .mov.sin-check { grid-template-columns: auto minmax(0, 1fr) auto; }
  /* si el sello no entra al lado del nombre, baja debajo: el nombre se lee entero */
  .mov .que strong { flex-wrap: wrap; row-gap: 2px; }
  /* los metadatos, completos en dos líneas */
  .mov .que > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
  /* con la fecha adelante (Inicio), la fecha va en su renglón y debajo categoría
     y cuenta, sin recortar: son tres datos cortos y los tres se leen */
  .mov.sin-check .que > span { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
  .mov .que .fecha { display: block; }
  .mov .que .fecha + .sep { display: none; }
  /* los cortes caen entre dato y dato: "Delivery ·" arriba, "Mercado Pago" abajo */
  .mov .que > span { text-wrap: balance; }
  /* pendientes: Confirmar, lápiz y tacho en su línea, debajo del texto */
  .mov .acciones { grid-column: 3 / -1; }
  .mov.sin-check .acciones { grid-column: 2 / -1; }
  /* confirmadas: dos pisos, con el lápiz y el tacho debajo del monto */
  .mov:not(.pendiente) { grid-template-areas: "chk ic que monto" "chk ic que acc"; }
  .mov.sin-check:not(.pendiente) { grid-template-areas: "ic que monto" "ic que acc"; }
  .mov:not(.pendiente) > .marcar { grid-area: chk; }
  .mov:not(.pendiente) > .cat-ic { grid-area: ic; }
  .mov:not(.pendiente) > .que { grid-area: que; }
  .mov:not(.pendiente) > .plata { grid-area: monto; }
  .mov:not(.pendiente) > .acciones { grid-area: acc; grid-column: auto; justify-self: end; }
}
.ultimos-panel .mov.sin-check, .pendientes .mov.sin-check { grid-template-columns: auto minmax(0, 1fr) auto auto; }
@media (max-width: 640px) {
  .ultimos-panel .mov.sin-check, .pendientes .mov.sin-check { grid-template-columns: auto minmax(0, 1fr) auto; }
}
/* compu: en un día con pendientes, los montos terminan todos en la misma x */
@media (min-width: 641px) {
  .movs:has(.pendiente) .mov .acciones { min-width: var(--acciones-pend, 186px); justify-content: flex-end; }
}
@media (min-width: 1101px) {
  .ultimos-panel .mov.sin-check .acciones { opacity: 0; transition: opacity 180ms var(--salida); }
  .ultimos-panel .mov.sin-check:hover .acciones, .ultimos-panel .mov.sin-check:focus-within .acciones { opacity: 1; }
}

.formulario { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: end; }
.formulario .a2 { grid-column: span 2; }
.formulario .a3 { grid-column: span 3; }
.formulario .a4 { grid-column: span 4; }
.formulario .todo { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulario .a2, .formulario .a3, .formulario .a4 { grid-column: span 2; }
  .formulario .lado { grid-column: span 1; }
}
.monto-grande {
  font: 600 40px/1.1 var(--display) !important; letter-spacing: -.035em; font-stretch: 88%;
  font-variant-numeric: tabular-nums; padding: 12px 16px !important; background: var(--nucleo-2);
}
/* el marcador de ejemplo no se confunde con un monto cargado */
.monto-grande::placeholder { color: color-mix(in srgb, var(--tinta-3) 55%, transparent); }

.filtros { margin: 10px 0 14px; }
.filtros summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--t-sm); color: var(--tinta-2); padding: 8px 4px; }
.filtros summary::-webkit-details-marker { display: none; }
.filtros[open] summary { color: var(--tinta); }
.filtros .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 7px 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--nucleo); box-shadow: 0 0 0 1px var(--anillo); color: var(--tinta); font-size: var(--t-sm); font-weight: 600; }
.buscar-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.buscador { position: relative; flex: 1; min-width: 200px; }
.buscador .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); }
.buscador input { padding-left: 42px; border-radius: 999px; background: var(--nucleo); box-shadow: 0 0 0 1px var(--anillo); text-overflow: ellipsis; }
.buscar-fila > button { padding-inline: 20px; }
.separado { margin-top: calc(var(--hueco) + var(--aro)); }
main > form[action="/movimientos"] { margin: 0 7px; }

/* la barra de "con los marcados" aparece sólo cuando hay algo marcado */
.lote {
  position: sticky; bottom: 20px; z-index: 15; display: none; flex-wrap: wrap; gap: 8px; align-items: center;
  width: fit-content; max-width: calc(100% - 14px); margin: 18px auto 0; padding: 8px 8px 8px 18px;
  background: var(--accion); color: var(--accion-texto); border-radius: 999px; box-shadow: 0 20px 40px -18px var(--sombra-c);
}
.lote select { width: auto; border-radius: 999px; padding: 8px 12px; }
body:has(.mov input[type="checkbox"]:checked) .lote { display: flex; }
@media (max-width: 900px) { .lote { bottom: 96px; border-radius: 22px; } }

/* --- tablas --------------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { font-size: var(--t-xs); font-weight: 600; color: var(--tinta-3); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
td { padding: 13px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color 160ms var(--salida); }
@media (hover: hover) { tbody tr:hover { background: var(--nucleo-2); } }
td.num, th.num { text-align: right; }
td a { font-weight: 600; text-decoration: none; }
.barrita { height: 7px; border-radius: 99px; background: var(--c); width: var(--w); margin: 3px 0; transform-origin: left; }

/* --- mes a mes: "Te quedó" es la respuesta de cada fila ------------------------------------------ */
.tabla-meses .pista { border-radius: 99px; background: var(--nucleo-3); margin: 4px 0; }
.tabla-meses .barrita { height: 9px; margin: 0; }
.tabla-meses .mes a { display: inline-flex; align-items: center; gap: 4px; font: 600 var(--t-md)/1.2 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.tabla-meses .ir { display: inline-flex; color: var(--tinta-3); opacity: 0; transition: opacity 180ms var(--salida); }
.tabla-meses .ir .ic { width: 16px; height: 16px; }
.tabla-meses tr:hover .ir, .tabla-meses tr:focus-within .ir { opacity: 1; }
.tabla-meses tbody tr:focus-within { background: var(--nucleo-2); }
.tabla-meses .quedo { font: 600 var(--t-lg)/1.1 var(--display); font-stretch: 94%; letter-spacing: -.01em; color: var(--tinta); }
.tabla-meses .quedo.egr { color: var(--rojo); }
.tabla-meses .pct { color: var(--tinta-2); }
/* la tabla necesita unos 800 px de panel: se muestra sólo con el menú de arriba */
@media (min-width: 901px) {
  .tabla-meses { overflow-x: auto; }
  .tabla-meses td { padding-block: 16px; }
  .tabla-meses .barras { min-width: 150px; }
  .tabla-meses .entro, .tabla-meses .salio { font-size: var(--t-sm); }
}
/* desde donde baja el menú (900 px), una ficha por mes: mes y Te quedó arriba,
   las barras, y Entró, Salió y el porcentaje con sus rótulos; nada se desplaza
   de costado */
@media (max-width: 900px) {
  .tabla-meses { padding: 4px 16px; }
  .tabla-meses thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-meses :is(table, tbody) { display: block; }
  .tabla-meses tr { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px 2px; border-bottom: 1px solid var(--linea); }
  .tabla-meses tr:last-child { border-bottom: 0; }
  .tabla-meses td { display: block; padding: 0; border: 0; text-align: left; }
  .tabla-meses .mes { order: 1; flex: 1 1 auto; min-width: 0; }
  .tabla-meses .quedo { order: 2; flex: none; text-align: right; }
  .tabla-meses .barras { order: 3; flex: 1 0 100%; }
  .tabla-meses :is(.entro, .salio, .pct) { order: 4; flex: 1 1 0; min-width: 0; font-size: var(--t-sm); }
  .tabla-meses .pct { text-align: right; }
  .tabla-meses .ir { display: none; }
  .tabla-meses td[data-rot]::before { content: attr(data-rot); display: block; font: 500 var(--t-xs)/1.4 var(--sans); color: var(--tinta-3); }
}
/* en la tableta y el celu apaisado la ficha aprovecha el ancho: dos renglones,
   y las barras y las tres cifras en columnas que se alinean de un mes al otro */
@media (min-width: 641px) and (max-width: 900px) {
  .tabla-meses { padding: 4px 22px; }
  .tabla-meses tr {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 7rem);
    grid-template-areas: "mes mes quedo quedo" "barras entro salio pct";
    column-gap: 24px; row-gap: 14px; align-items: end; padding: 18px 2px;
  }
  .tabla-meses .mes { grid-area: mes; }
  .tabla-meses .quedo { grid-area: quedo; justify-self: end; }
  .tabla-meses .barras { grid-area: barras; align-self: center; }
  .tabla-meses .entro { grid-area: entro; }
  .tabla-meses .salio { grid-area: salio; }
  .tabla-meses .pct { grid-area: pct; }
  .tabla-meses :is(.entro, .salio, .pct) { text-align: right; }
}

/* --- cuentas ----------------------------------------------------------------------------- */
/* El total es la primera tarjeta de la grilla de cuentas: mismo borde interno,
   misma ficha y la cifra más grande de la página. Ocupa una columna, así no le
   queda blanco muerto al costado; la cifra se achica si la columna es angosta. */
.kpi { padding: 20px; margin: 0; display: flex; flex-direction: column; }
/* el rótulo mide lo que el nombre de dos renglones de una cuenta: las fichas
   de la primera fila quedan a la misma altura */
.kpi .rot { gap: 12px; margin-bottom: 12px; min-height: calc(var(--t-base) * 1.55 + var(--t-sm) * 1.55); }
.kpi .rot .cat-ic { --c: var(--tinta-2); }
.kpi.total { container-type: inline-size; }
.kpi .num { font: 600 clamp(30px, 4vw, 40px)/1.05 var(--display); letter-spacing: -.018em; font-stretch: 88%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi.total .num {
  font: 600 min(clamp(46px, 6.2vw, 78px), 22cqi)/1 var(--display); font-stretch: 86%; letter-spacing: -.028em; font-optical-sizing: auto;
}
/* la nota de la cotización va al pie, a la altura de los enlaces de al lado */
.kpi .var { margin-top: auto; padding-top: 12px; }
/* En el total, la tarjeta mide lo que la más alta de su fila: el aire que sobra
   se reparte arriba y abajo de la cifra (como en el resumen del Inicio), y la
   nota sigue al pie. Los huecos son márgenes, así la caja mide lo que se ve. */
.kpi.total { gap: 12px; }
.kpi.total .rot { margin-bottom: 0; }
.kpi.total .num { margin-block: auto; }
.kpi.total .var { margin-top: 0; padding-top: 0; }
.kpi.total .var:empty { display: none; }
.cuentas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: calc(var(--hueco) + 2 * var(--aro)); margin: var(--aro) var(--aro) 0; }
/* en cada fila de tarjetas, "Cambiar…" y "Ver sus movimientos" caen a la misma altura */
.cuenta { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.cuenta details { margin-top: auto; }
.cuenta > .enlace { align-self: flex-start; }
.alerta-saldo { color: var(--ambar); }
.cuenta .cab { display: flex; align-items: center; gap: 12px; }
.cuenta .cab .cat-ic { --c: var(--tinta-2); }
.cuenta .saldo { font: 600 30px/1.05 var(--display); letter-spacing: -.018em; font-stretch: 88%; font-variant-numeric: tabular-nums; }
.cuenta details summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--t-sm); color: var(--tinta-2); font-weight: 600; list-style: none;
}
details summary::-webkit-details-marker { display: none; }
.cuenta details summary:hover { color: var(--tinta); }
.cuenta form { display: grid; gap: 10px; margin-top: 10px; }
/* "Nueva categoría" y "Nueva cuenta": cerradas son sólo el botón; abiertas,
   un panel con el formulario */
details.panel { margin: var(--aro) var(--aro) calc(var(--hueco) + var(--aro)); }
details.panel > summary { list-style: none; width: fit-content; }
details.panel[open] > summary { margin-bottom: 16px; }
details.panel:not([open]) { background: none; box-shadow: none; padding: 0; margin: 0 var(--aro) calc(var(--hueco) + var(--aro)); }
.cuentas + details.panel { margin-top: calc(var(--hueco) + 2 * var(--aro)); }
.cuentas + details.panel:not([open]) { margin-top: calc(var(--hueco) + var(--aro)); }

/* --- ajustes: qué a la izquierda, control a la derecha ----------------------------------------- */
.ajuste .que h2 + p { margin: 6px 0 0; max-width: 46ch; }
.ajuste + .ajuste { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linea); }
.ajuste .control { margin-top: 14px; min-width: 0; }
.segmento.cotizacion { max-width: 480px; }
.segmento.moneda { max-width: 260px; }
.segmento.tema { max-width: 440px; }
.ayuda-control { margin: 10px 0 0; }
.pie-ajuste { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linea); }
@media (min-width: 901px) {
  .ajuste, .pie-ajuste { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .ajuste .control { margin-top: 0; }
  .pie-ajuste > * { grid-column: 2; justify-self: start; }
}

/* --- categorías ------------------------------------------------------------------------------ */
.selector-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.selector-iconos label { display: block; }
.selector-iconos label > span:first-of-type { display: grid; place-items: center; height: 42px; border-radius: 12px; background: var(--nucleo-2); color: var(--tinta-2); cursor: pointer;
                        transition: background-color 160ms var(--salida), color 160ms var(--salida), transform 140ms var(--rapida); }
.selector-iconos label:hover > span:first-of-type { background: var(--nucleo-3); }
.selector-iconos label:active > span:first-of-type { transform: scale(.92); }
.selector-iconos input:checked + span { background: var(--accion); color: var(--accion-texto); }
.selector-iconos input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 1px; }
.selector-colores { display: flex; flex-wrap: wrap; gap: 8px; }
.selector-colores label { display: block; }
.selector-colores label > span:first-of-type { display: block; width: 28px; height: 28px; border-radius: 99px; background: var(--c); cursor: pointer; transition: transform 180ms var(--resorte), box-shadow 180ms var(--salida); }
.selector-colores label:hover > span:first-of-type { transform: scale(1.1); }
.selector-colores input:checked + span { box-shadow: 0 0 0 3px var(--superficie, var(--nucleo)), 0 0 0 5px var(--c); }
.selector-colores input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 4px; }
.grupo-cats > h2 { margin: 0 0 12px 4px; }
.rotulo-campo { display: block; margin-bottom: 5px; }
/* una línea por categoría: ficha, nombre y usos, y a la derecha el lápiz y
   Archivar; al abrir el lápiz, el editor ocupa todo el ancho debajo */
.cat-fila {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center;
  padding: 10px 12px; border-radius: 16px; transition: background-color 180ms var(--salida);
}
.cat-fila.archivada > :is(.cat-ic, .cat-nombre) { opacity: .5; }
.cat-nombre { min-width: 0; }
.cat-nombre .chico { white-space: nowrap; }
/* en el celu el nombre y sus usos van uno arriba del otro, siempre igual */
@media (max-width: 640px) {
  .cat-nombre { display: grid; line-height: 1.35; }
  .cat-nombre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cat-nombre .sep { display: none; }
}
/* El lápiz abre el editor sin moverse de su lugar: abierto, el details se
   disuelve en la fila (display: contents), el lápiz sigue en su columna y el
   contenido ocupa el renglón de abajo, a todo el ancho de la fila. */
.cat-fila > form { order: 3; }
.cat-fila > details, .cat-fila > details > summary { order: 2; }
.cat-fila > details[open] { display: contents; }
.cat-fila > details[open]::details-content { order: 9; grid-column: 1 / -1; padding: 6px 0 4px; }
@supports not selector(::details-content) {
  .cat-fila > details[open] { display: block; order: 9; grid-column: 1 / -1; padding: 6px 0 4px; }
}
.cat-fila details > summary { list-style: none; }
.cat-fila details[open] > summary { background: var(--accion); color: var(--accion-texto); box-shadow: none; }
.cat-fila details form { margin-top: 14px; }
/* la fila que se está editando queda marcada, sin rayas alrededor */
.cat-fila:has(> details[open]) { background: var(--nucleo-2); }
.cat-fila:has(> details[open])::before, .cat-fila:has(> details[open]) + .cat-fila::before { opacity: 0; }
/* Archivar es una acción terciaria: se ve, pero no compite con el nombre */
.terciario { background: none; box-shadow: none; color: var(--tinta-3); }
.terciario:hover, .terciario:focus-visible { color: var(--tinta); background: var(--nucleo-3); }
/* En compu, dos columnas que se leen como una lista: la izquierda de arriba
   abajo y la derecha la continúa. Cada fila calcula su lugar con su posición
   entre hermanas (sibling-index/sibling-count); la plantilla no cuenta nada.
   Al abrir un editor la fila crece en su columna y nada cambia de columna. */
@property --fila { syntax: "<integer>"; inherits: true; initial-value: 1; }
@media (min-width: 1101px) {
  .grupo-cats .movs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; align-items: start; }
  @supports (order: sibling-index()) {
    .grupo-cats .cat-fila {
      --filas: round(up, sibling-count() / 2, 1);
      --col: clamp(0, sibling-index() - var(--filas), 1);
      --fila: calc(sibling-index() - var(--col) * var(--filas));
      grid-column: calc(1 + var(--col)); grid-row: var(--fila);
    }
    /* la primera fila de cada columna no lleva raya arriba */
    .grupo-cats .cat-fila::before { scale: 1 clamp(0, var(--fila) - 1, 1); }
  }
  /* sin esas funciones, el orden va por renglones, como antes */
  @supports not (order: sibling-index()) {
    .grupo-cats .cat-fila:nth-child(2)::before { display: none; }
  }
}
@media (min-width: 1101px) and (hover: hover) {
  @supports not (order: sibling-index()) {
    .grupo-cats .cat-fila:hover + .cat-fila::before { opacity: 1; }
    .grupo-cats .cat-fila:hover + .cat-fila + .cat-fila::before { opacity: 0; }
  }
}

/* --- carga rápida: hoja que sube (celular) o ventana centrada (compu) ------------------------- */
.hoja {
  margin: auto; padding: 6px; border: 0; border-radius: var(--r-bandeja); width: min(580px, calc(100vw - 32px));
  background: var(--bandeja); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--anillo), 0 40px 90px -30px rgb(0 0 0 / .45);
}
.hoja::backdrop { background: rgb(10 14 18 / .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hoja .dentro { padding: 22px; border-radius: var(--r-nucleo); background: var(--nucleo); box-shadow: inset 0 1px 0 var(--brillo), 0 0 0 1px var(--anillo); }
.hoja .cab-hoja { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
/* F17, revisión: "A cobrar" y "A pagar" son más altos que la pantalla (934 y 958 px): la hoja no pasa del alto que hay
   y corre por dentro. El título y el ✕ quedan pegados arriba mientras bajan los campos (fondo propio: lo que corre
   pasa por debajo). Sin esto, la parte de arriba quedaba fuera de la pantalla y no había cómo llegar a cerrarla. */
.hoja .dentro { max-height: calc(100dvh - 44px); overflow-y: auto; overscroll-behavior: contain; }
.hoja .cab-hoja {
  position: sticky; top: -22px; z-index: 3; margin: -22px 0 4px; padding: 22px 0 12px; background: var(--nucleo);
}
.hoja .cab-hoja h2 { font-size: var(--t-lg); }
.hoja .consejo { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--nucleo-2); font-size: var(--t-sm); color: var(--tinta-2); }
@media (max-width: 900px) {
  .hoja { margin: auto 0 0; width: 100%; max-width: none; border-radius: 30px 30px 0 0; padding: 6px 6px 0; }
  .hoja .dentro { border-radius: 24px 24px 0 0; padding: 12px 18px calc(22px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 20px); }
  .hoja .dentro::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 5px; background: var(--nucleo-3); margin: 0 auto 2px; }
  .hoja .cab-hoja { top: -12px; margin-top: 0; padding-top: 12px; }
}

.entrar { max-width: 440px; margin: 14vh auto 0; }
.entrar .nucleo { padding: 34px 28px 26px; display: grid; gap: 4px; }
.entrar .logo { border-radius: 12px; margin-bottom: 14px; box-shadow: 0 0 0 1px var(--anillo); }
.entrar h1 { margin-bottom: 8px; }
/* la política de privacidad: la misma tarjeta, más ancha para leer */
.entrar.legal { max-width: 640px; margin-top: 6vh; margin-bottom: 6vh; }
.entrar.legal h2 { font-size: var(--t-md, 1.05rem); margin: 14px 0 0; }
.entrar.legal p { line-height: 1.55; text-wrap: pretty; }
.entrar form, .entrar p { margin: 8px 0; }

/* --- movimiento --------------------------------------------------------------------------------
   Todo lo de abajo corre sólo si la persona no pidió menos movimiento. El
   contenido se ve igual sin animaciones: ninguna es necesaria para leer. */
@media (prefers-reduced-motion: no-preference) {
  /* Entre páginas: la página nueva aparece entera, sin fundido (nada de doble
     exposición); la entrada la hace "llegar" y la píldora viaja por su cuenta. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }

  /* las piezas llegan en orden, cortas y sin desenfoque; sólo lo que se ve */
  .entrada, .cabecera, .panel, .kpi, .cuenta, main > .dia, main > .movs {
    animation: llegar 380ms var(--salida) both; animation-delay: calc(var(--n, 0) * 45ms);
  }
  main > .dia:nth-of-type(n+4) { animation: none; }
  .tablero > :nth-child(2), .cuentas > :nth-child(2), main > :nth-child(2) { --n: 1; }
  .tablero > :nth-child(3), .cuentas > :nth-child(3), main > :nth-child(3) { --n: 2; }
  .tablero > :nth-child(n+4), .cuentas > :nth-child(n+4), main > :nth-child(n+4) { --n: 3; }
  @keyframes llegar { from { opacity: 0; transform: translateY(10px); } }

  /* lo que se aprieta se hunde un poco */
  .nav a:active, .isla-abajo a:active, .leyenda a:active, .seis a:active, .pildoras a:active { transform: scale(.97); }
  /* en la leyenda sólo crece la ficha: montos y porcentajes no se mueven */
  .leyenda li.activa .chip-cat { transform: scale(1.08); }

  /* cifras que ruedan: cada dígito, un poquito después del anterior */
  .rodillo .d > span { animation: rodar 760ms var(--salida) both; animation-delay: calc(180ms + var(--i) * 42ms); }
  @keyframes rodar { from { transform: translateY(105%); filter: blur(2px); } }

  /* la dona se dibuja porción por porción mientras gira a su lugar */
  .dona-figura svg { animation: dona-llega 1100ms var(--salida) both; }
  @keyframes dona-llega { from { transform: rotate(-70deg) scale(.9); opacity: 0; } }
  .porcion { animation: dibujar 1000ms var(--salida) both; animation-delay: calc(160ms + var(--i) * 70ms); }
  @keyframes dibujar { from { stroke-dasharray: 0 10000; } }
  .leyenda li { animation: llegar-x 520ms var(--salida) both; animation-delay: calc(220ms + var(--i) * 45ms); }
  @keyframes llegar-x { from { opacity: 0; transform: translateX(-8px); } }

  /* barras que crecen desde su base */
  .relleno, .barrita, .ritmo .gastado, .ritmo .proyectado { animation: crecer-x 900ms var(--salida) both; animation-delay: 260ms; }
  .ritmo .proyectado { animation-delay: 380ms; }
  .seis .b { animation: crecer-y 800ms var(--salida) both; animation-delay: calc(200ms + var(--i, 0) * 60ms); }
  .seis a .b.e { animation-delay: calc(260ms + var(--i, 0) * 60ms); }
  @keyframes crecer-x { from { transform: scaleX(0); } }
  @keyframes crecer-y { from { transform: scaleY(0); } }

  /* filas que llegan o se van por HTMX */
  .mov.htmx-added { animation: aparecer 380ms var(--salida) both; }
  @keyframes aparecer { from { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }
  .mov.htmx-swapping { opacity: 0; transform: translateX(12px); transition: opacity 180ms var(--salida), transform 180ms var(--salida); }

  /* la hoja de carga */
  .hoja { transition: opacity 240ms var(--salida), transform 420ms var(--resorte), overlay 420ms allow-discrete, display 420ms allow-discrete; }
  .hoja:not(:popover-open) { opacity: 0; transform: translateY(16px) scale(.97); }
  @starting-style { .hoja:popover-open { opacity: 0; transform: translateY(16px) scale(.97); } }
  @media (max-width: 900px) {
    .hoja:not(:popover-open) { transform: translateY(100%); opacity: 1; }
    @starting-style { .hoja:popover-open { transform: translateY(100%); opacity: 1; } }
  }
  .hoja::backdrop { transition: background-color 300ms var(--salida), backdrop-filter 300ms var(--salida), overlay 300ms allow-discrete, display 300ms allow-discrete; }
  @starting-style { .hoja:popover-open::backdrop { background-color: transparent; backdrop-filter: blur(0); } }
  .aviso.ok { animation: aparecer 420ms var(--salida) both; }
}

/* con menos movimiento: sin desplazamientos, pero los cambios de estado siguen fundiendo */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .porcion, .c-item, .leyenda a, .leyenda .chip-cat, .nido, .isla-abajo a .ic { transition-property: opacity, background-color, color; }
}

/* F4 · Presupuestos: tarjetas de tope, barra con muesca, panel del Inicio ------------------------
   Reusa la tarjeta de Cuentas (.cuenta: bisel, cabecera, cifra, details al pie).
   El color dice el estado: el de la categoría si va bien, ámbar cerca del tope,
   rojo pasado. Los anchos (--p) y la muesca (--u) vienen hechos del servidor. */
.tope .cab { align-items: flex-start; }
.tope .cab-nombre { flex: 1; min-width: 0; }
.tope .cab-nombre strong { display: block; overflow-wrap: anywhere; }
.tope .cab .sello { margin-top: 5px; }
.sello.pasado { color: var(--rojo); background: var(--rojo-suave); }
.sello.sugerido { color: var(--tinta-2); background: var(--nucleo-2); box-shadow: inset 0 0 0 1px var(--anillo); }
.tope .saldo .pre { display: block; margin-bottom: 4px; font: 500 var(--t-sm)/1.3 var(--sans); letter-spacing: 0; color: var(--tinta-2); }
.tope .saldo.egr .pre { color: var(--rojo); }
.tope .saldo { white-space: nowrap; }
.tope .equiv { display: block; margin-top: 3px; font: 500 var(--t-xs)/1.4 var(--sans); letter-spacing: 0; color: var(--tinta-3); }
.tope .de-donde .equiv { display: inline; margin: 0 0 0 3px; }
.tope .detalle, .tope .de-donde, .tope .sugerencia { margin: 0; }
.tope :is(.detalle, .de-donde, .sugerencia) .plata { font-weight: 600; font-stretch: 94%; color: var(--tinta); font-variant-numeric: proportional-nums; }
.tope .un-toque { display: flex; margin-top: 0; }
.tope > .un-toque { align-self: flex-start; }
.tope details .quitar { margin-top: 8px; }
.tope details[open] > summary { color: var(--tinta); }
.tope .error-tope { margin: 0; }
.sugerencia-fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px;
  padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--nucleo-2);
}
.sugerencia-fila .un-toque { margin-left: auto; }
.sugerencia-fila .terciario { color: var(--tinta-2); }
.sugerencia-fila .terciario:hover { background: var(--nucleo); }
/* una sugerida no tiene subtítulo: el nombre queda centrado con su ficha */
.tope.sugerido .cab { align-items: center; }
.tope.sugerido .cab .sello { margin-top: 0; }

/* la barra: pista, relleno hasta el 100% y una muesca donde salta el aviso */
.tope-barra { position: relative; display: block; height: 10px; border-radius: 99px; background: var(--nucleo-3); box-shadow: inset 0 0 0 1px var(--anillo); }
.tope-barra .relleno-tope {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: inherit; transform-origin: left;
  background: color-mix(in srgb, var(--c) var(--cat-tinta), white);
}
:is(.tope, .ficha-tope).cerca .relleno-tope { background: var(--ambar); }
:is(.tope, .ficha-tope).pasado .relleno-tope { background: var(--rojo); }
.tope-barra .muesca { position: absolute; top: -4px; bottom: -4px; left: var(--u); width: 2px; margin-left: -1px; border-radius: 2px; background: var(--tinta); opacity: .6; }
.tope-barra.chica { height: 6px; }
.tope-barra.chica .muesca { top: -3px; bottom: -3px; }

/* resumen de arriba y lo que no suma */
.topes-resumen { margin-bottom: 14px; }
.chip.cerca { color: var(--ambar); background: var(--ambar-suave); box-shadow: none; }
.chip.pasado { color: var(--rojo); background: var(--rojo-suave); box-shadow: none; }
a.chip { color: var(--tinta-2); text-decoration: none; transition: background-color 180ms var(--salida), color 180ms var(--salida); }
a.chip:hover { color: var(--tinta); background: var(--nucleo-2); }
.chip .ic { width: 15px; height: 15px; }
.topes-notas { display: grid; gap: 6px; margin: 0 7px 24px; }
.topes-notas .nota { margin: 0; }
.nota.suave { color: var(--tinta-2); }
.nota.suave .ic { color: var(--tinta-3); }
.nota .plata { font-weight: 600; font-stretch: 94%; }
.nota a { font-weight: 600; }
.sin-historial { display: flex; gap: 16px; align-items: flex-start; margin-bottom: calc(var(--hueco) + 2 * var(--aro)); }
.sin-historial > .ic { width: 28px; height: 28px; margin-top: 1px; color: var(--ambar); }
.sin-historial p { margin: 6px 0 0; max-width: 64ch; }
.topes + details.panel { margin-top: calc(var(--hueco) + 2 * var(--aro)); }
.topes + details.panel:not([open]) { margin-top: calc(var(--hueco) + var(--aro)); }
.otras-topes .cat-fila details form { align-items: end; }
.cat-fila:has(> details[open]) input:not([type="radio"], [type="checkbox"]) { background-color: var(--nucleo); border-color: var(--campo-aro); }
select.aviso-topes { max-width: 280px; }

/* Inicio: "Topes del mes", hasta cuatro fichas en fila (una debajo de otra en el celu) */
.fichas-topes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ficha-tope a {
  display: grid; gap: 10px; height: 100%; padding: 14px; border-radius: 16px; background: var(--nucleo-2);
  color: var(--tinta); text-decoration: none; transition: background-color 180ms var(--salida), transform 140ms var(--salida);
}
.ficha-tope a:hover { background: var(--nucleo-3); }
.ficha-tope .fila-1 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ficha-tope .chip-cat { width: 28px; height: 28px; border-radius: 9px; }
.ficha-tope .chip-cat .ic { width: 16px; height: 16px; }
.ficha-tope .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ficha-tope .pct { font: 600 var(--t-md)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ficha-tope.cerca .pct { color: var(--ambar); }
.ficha-tope.pasado .pct { color: var(--rojo); }
.invitacion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--tinta-2); }
.invitacion > .ic { color: var(--tinta); }
@media (max-width: 1100px) { .fichas-topes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fichas-topes { grid-template-columns: 1fr; gap: 8px; } }

/* En pantallas táctiles, Aceptar, Usar, Guardar tope y Quitar el tope responden en
   44 × 44, con el mismo recurso que la lista general de (pointer: coarse). Quitar
   se aleja un poco más de Guardar para que las dos áreas no se pisen. Los summary
   ("Cambiar tope", "Otro monto" y "Poner tope") ya los cubre esa lista general
   (.cuenta summary y .cat-fila summary): la caja mide 21 o 30 px de alto, pero su
   ::after responde en 44. */
@media (pointer: coarse) {
  .tope :is(.un-toque, details) button { position: relative; }
  .tope :is(.un-toque, details) button::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .tope details .quitar { margin-top: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* la barra crece desde la izquierda, como el ritmo del Inicio */
  .relleno-tope { animation: crecer-x 900ms var(--salida) both; animation-delay: 260ms; }
  .ficha-tope .relleno-tope { animation-delay: calc(260ms + var(--i, 0) * 60ms); }
  .ficha-tope a:active, a.chip:active { transform: scale(.97); }
}

/* F5 · Gastos fijos: tarjeta de cada fijo, estado del vencimiento, próximo y formulario por frecuencia --
   Reusa la tarjeta de Cuentas (.cuenta) y las piezas de F4 (.sello.pasado, .chip.cerca, .chip.pasado).
   El estado no pinta la tarjeta entera: sólo el bloque que dice qué falta, en el color de su urgencia. */
.fijo .cab { align-items: flex-start; }
.fijo .cab-nombre { flex: 1; min-width: 0; }
.fijo .cab-nombre strong { display: block; overflow-wrap: anywhere; }
.fijo .cab .sello { margin-top: 5px; }
.fijo .regla { text-wrap: pretty; }
.fijo .saldo { white-space: nowrap; }
.fijo .equiv { display: block; margin-top: 3px; font: 500 var(--t-xs)/1.4 var(--sans); letter-spacing: 0; color: var(--tinta-3); }
.estado-fijo {
  display: grid; gap: 10px; justify-items: start; margin: 0; padding: 10px 12px; border-radius: 14px;
  background: var(--nucleo-2); font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2);
}
.estado-fijo p { margin: 0; text-wrap: pretty; }
.fijo.atrasado .estado-fijo { background: var(--rojo-suave); color: var(--rojo); }
.fijo.vence_hoy .estado-fijo { background: var(--ambar-suave); color: var(--ambar); }
.estado-fijo.al-dia { display: flex; gap: 8px; align-items: flex-start; padding: 0; background: none; }
.estado-fijo.al-dia .ic { color: var(--verde); margin-top: 1px; }
.estado-fijo .plata { font-weight: 600; font-stretch: 94%; color: var(--tinta); }
.proximo-fijo { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); }
.proximo-fijo .ic { color: var(--tinta-3); margin-top: 1px; }
.fijo .un-toque { display: flex; margin-top: 0; }
.fijo details .baja { margin-top: 8px; }
.fijo details[open] > summary { color: var(--tinta); }
.fijo details .par { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.fijo details p { margin: 0; }
.fijos + details.panel { margin-top: calc(var(--hueco) + 2 * var(--aro)); }
.fijos + details.panel:not([open]) { margin-top: calc(var(--hueco) + var(--aro)); }
.fijos-resumen { margin-bottom: 14px; }
.segmento.frecuencia { max-width: 420px; }
.nota-fijo { margin: 0; }

/* El alta muestra sólo los campos de la frecuencia marcada, sin JavaScript. */
.formulario.form-fijo :is(.solo-anual, .solo-semanal) { display: none; }
.formulario.form-fijo:has(input[name="frecuencia"][value="anual"]:checked) .solo-anual { display: grid; }
.formulario.form-fijo:has(input[name="frecuencia"][value="semanal"]:checked) .solo-semanal { display: grid; }
.formulario.form-fijo:has(input[name="frecuencia"][value="semanal"]:checked) .solo-mes { display: none; }
/* categoría y cuenta, siempre en su propio renglón, pase lo que pase con los días */
.formulario.form-fijo .fila-nueva { grid-column: 1 / span 3; }
@media (max-width: 700px) { .formulario.form-fijo .fila-nueva { grid-column: 1 / -1; } }

/* En pantallas táctiles, Confirmar, Guardar y Dar de baja responden en 44 × 44. */
@media (pointer: coarse) {
  .fijo :is(.un-toque, details) button { position: relative; }
  .fijo :is(.un-toque, details) button::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .fijo details .baja { margin-top: 16px; }
}

/* F5b · Traspasos y dólar personalizado: pasar plata desde Cuentas y la carga rápida, la fila de un traspaso
   y el cuarto dólar de Ajustes ----------------------------------------------------------------------------
   Reusa .formulario, details.panel.nueva, .cuenta y .mov. Un traspaso no es gasto ni ingreso: su monto va en
   tinta, sin el rojo ni el verde de lo que sale y entra, y su ficha es neutra como la de una cuenta. */
.cuenta .enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
details.panel.pasar + .cuentas { margin-top: 0; }
.form-traspaso .nota-traspaso { margin: 0; max-width: 62ch; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-3); text-wrap: pretty; }

/* lo que llega: el servidor lo arma; vacío (sin las dos cuentas) no ocupa lugar */
.llega { display: grid; gap: 6px; }
.llega:not(:has(*)) { display: none; }
.llega label { max-width: 320px; }
.llega-campo { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 600; }
.llega-nota { margin: 0; max-width: 62ch; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.llega-nota .plata { font-weight: 600; color: var(--tinta); }
.llega-nota.error { color: var(--rojo); }

/* la fila: de una cuenta a la otra, sin signo */
.mov.traspaso .ic-traspaso { --c: var(--tinta-2); }
.mov.traspaso > .plata { color: var(--tinta); }
.mov.traspaso .que em { font-style: normal; color: var(--ambar); }
/* entre monedas, en el celu las dos puntas van una arriba de la otra: el nombre no se come */
@media (max-width: 640px) { .mov.traspaso .puntas > span { display: block; text-align: end; } }
/* "Pasar plata" de una tarjeta baja hasta el formulario sin que lo tape el menú de arriba */
@media (min-width: 901px) { details.panel.pasar { scroll-margin-top: 112px; } }

/* Carga rápida: "Entre cuentas" esconde moneda y categoría y muestra a dónde va y lo que llega, sin JavaScript.
   En compu, fecha, de dónde sale y a dónde va entran en un renglón; en el celu la fecha va sola. */
.formulario.rapida:not(:has(input[name="tipo"][value="transferencia"]:checked)) .solo-traspaso { display: none; }
.formulario.rapida:has(input[name="tipo"][value="transferencia"]:checked) .solo-mov { display: none; }
@media (min-width: 701px) {
  .formulario.rapida:has(input[name="tipo"][value="transferencia"]:checked) :is(.fecha-rapida, .origen-rapida, .destino-rapida) { grid-column: span 2; }
}
@media (max-width: 700px) {
  .formulario.rapida:has(input[name="tipo"][value="transferencia"]:checked) .fecha-rapida { grid-column: 1 / -1; }
}

/* Ajustes: cuatro dólares. Si el control es angosto, de a dos por renglón. El valor del personalizado
   aparece sólo con "Personalizado" marcado. */
@container (max-width: 440px) {
  .segmento.cotizacion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
  .segmento.cotizacion label > span { border-radius: 18px; }
}
.personalizado { display: none; gap: 8px; max-width: 480px; margin-top: 14px; }
.personalizado label { max-width: 240px; }
.personalizado input { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 600; }
.personalizado p { margin: 0; line-height: 1.45; text-wrap: pretty; }
.ajuste:has(input[name="cotizacion_casa"][value="personalizado"]:checked) .personalizado { display: grid; }


/* F5c · Tarjetas: la tarjeta dibujada, con cuál pagar hoy, lo que hay que pagar y lo que viene, y las cuotas
   en la carga rápida -------------------------------------------------------------------------------------
   Reusa .cuenta (bisel, cabecera, cifra, details al pie), .formulario, .segmento y .tope-barra. El color de
   cada red vive en estos tokens y sólo pinta la tarjeta dibujada y su punto; el resto de la pieza sigue en
   tinta, con ámbar para lo que hay que pagar y rojo para lo que venció. */
:root {
  --red-visa: #1f3f86; --red-mastercard: #9c3b22; --red-amex: #1f6b8a; --red-otra: #3b4450;
  --plastico-tinta: #f6f8fb;
}
.red-punto, .plastico { --red: var(--red-otra); }
:is(.red-punto, .plastico)[data-red="visa"] { --red: var(--red-visa); }
:is(.red-punto, .plastico)[data-red="mastercard"] { --red: var(--red-mastercard); }
:is(.red-punto, .plastico)[data-red="amex"] { --red: var(--red-amex); }

/* con cuál pagar hoy: la respuesta es una frase, con los días de aire como su cifra */
.con-cual { display: grid; gap: 14px; }
.con-cual-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.con-cual-cuerpo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.con-cual-cuerpo p { margin: 0; }
.con-cual .mejor { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--t-xl)/1.1 var(--display); letter-spacing: -.025em; font-stretch: 92%; }
.red-punto { width: 12px; height: 12px; border-radius: 99px; background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }
.con-cual .aire { color: var(--tinta-2); font-weight: 600; }
.con-cual .aire .plata { font-size: var(--t-xl); font-weight: 600; color: var(--verde); letter-spacing: -.02em; }
.con-cual .cuando { flex-basis: 100%; color: var(--tinta-2); text-wrap: pretty; }
.con-cual .cuando strong { color: var(--tinta); font-family: var(--display); font-variant-numeric: tabular-nums; }
.con-cual .cambio {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding-top: 14px; border-top: 1px solid var(--linea);
  font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; max-width: 72ch;
}
.con-cual .cambio .ic { color: var(--tinta-3); margin-top: 1px; }
.con-cual + :is(details.panel, .tarjetas, .panel) { margin-top: calc(var(--hueco) + 2 * var(--aro)); }

/* las piezas: una por tarjeta, en la grilla de Cuentas */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: calc(var(--hueco) + 2 * var(--aro)); margin: var(--aro); }
.tarjetas:empty { display: none; }
.tarjetas + details.panel { margin-top: calc(var(--hueco) + 2 * var(--aro)); }
.tarjetas + details.panel:not([open]) { margin-top: calc(var(--hueco) + var(--aro)); }
.tarjeta-pieza { gap: 16px; scroll-margin-top: 112px; }
.tarjeta-pieza p { margin: 0; }

/* la tarjeta dibujada: el color de su red, un brillo de lado y el número tapado */
.plastico {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  min-height: 124px; padding: 16px 18px; border-radius: 16px; overflow: hidden;
  color: var(--plastico-tinta);
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(255 255 255 / .22), transparent 55%),
    linear-gradient(135deg, var(--red), color-mix(in srgb, var(--red) 62%, black));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 14px 28px -18px color-mix(in srgb, var(--red) 70%, black);
}
.plastico-arriba, .plastico-abajo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.plastico strong { font: 600 var(--t-md)/1.2 var(--display); letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plastico .red { flex: none; font: 700 var(--t-sm)/1 var(--display); font-style: italic; letter-spacing: .02em; opacity: .9; }
.plastico-abajo { font-size: var(--t-sm); opacity: .88; }
.plastico .numero { font-family: var(--display); font-variant-numeric: tabular-nums; letter-spacing: .08em; white-space: nowrap; }

/* lo que se debe y el disponible */
.deuda { display: grid; gap: 8px; }
.deuda .rot { display: block; font-size: var(--t-sm); color: var(--tinta-2); margin-bottom: 2px; }
.deuda .saldo { display: block; }
.disponible { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: var(--t-sm); color: var(--tinta-2); }
.disponible .plata { font-weight: 600; color: var(--tinta); }
.disponible .plata.egr { color: var(--rojo); }
.tope-barra.uso { height: 8px; }
.tope-barra.uso .relleno-tope { background: var(--tinta-2); }
.tope-barra.uso.cerca .relleno-tope { background: var(--ambar); }
.tope-barra.uso.pasado .relleno-tope { background: var(--rojo); }
.nota-chica { font-size: var(--t-xs); line-height: 1.45; color: var(--tinta-3); text-wrap: pretty; }
.fechas-tarjeta { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.fechas-tarjeta .ic { color: var(--tinta-3); margin-top: 1px; }
.fechas-tarjeta strong { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }

/* los resúmenes: lo que hay que pagar (ámbar), lo que venció (rojo), el ciclo abierto y lo que viene */
.resumen-tarjeta { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--nucleo-2); }
.resumen-tarjeta.a_pagar { background: var(--ambar-suave); }
.resumen-tarjeta.vencido { background: var(--rojo-suave); }
.ciclo, .viene { display: grid; gap: 4px; padding: 0 2px; }
.rz-titulo { font-size: var(--t-sm); font-weight: 600; color: var(--tinta); }
.resumen-tarjeta.a_pagar .rz-titulo { color: var(--ambar); }
.resumen-tarjeta.vencido .rz-titulo { color: var(--rojo); }
.rz-titulo .tenue { font-weight: 500; }
.rz-monto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.rz-monto .plata { font: 600 var(--t-lg)/1.15 var(--display); letter-spacing: -.015em; font-stretch: 92%; }
.viene-lista { list-style: none; margin: 4px 0 0; padding: 0; }
.viene-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: var(--t-sm); color: var(--tinta-2); }
.viene-lista li + li { border-top: 1px solid var(--linea); }
.viene-lista .plata { font-weight: 600; color: var(--tinta); }

/* pagar, registrar un consumo y cambiar los datos, al pie; el que se abre ocupa el ancho */
.acciones-tarjeta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.tarjeta-pieza .acciones-tarjeta details { margin-top: 0; }
.acciones-tarjeta details[open] { flex: 1 1 100%; }
.acciones-tarjeta details[open] > summary { color: var(--tinta); }
.pagar-tarjeta[data-hay] > summary { color: var(--ambar); }
.tarjeta-pieza .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tarjeta-pieza .formulario :is(.a2, .a3, .a4) { grid-column: span 1; }
.tarjeta-pieza .formulario .todo { grid-column: 1 / -1; }
.completar .nota-completar { margin: 0 0 14px; max-width: 64ch; }
.cuenta-tarjeta .fechas-cuenta { margin: 0; }
.red-campo .segmento { max-width: 360px; }

/* Movimientos: dónde están las cuotas que vienen */
.nota.cuotas-vienen { margin: 0 7px 22px; max-width: 76ch; line-height: 1.45; }

/* las cuotas de una compra: cuántas, qué es el monto y la vista previa del servidor.
   En la carga rápida aparecen sólo con Gasto y una tarjeta en "¿Con qué?", sin JavaScript (:has). */
.formulario.rapida:not(:has(#rapida-origen option.tarjeta:checked)) .solo-tarjeta,
.formulario.rapida:not(:has(input[name="tipo"][value="gasto"]:checked)) .solo-tarjeta { display: none; }
.formulario.rapida:has(input[name="tipo"][value="gasto"]:checked):has(#rapida-origen option.tarjeta:checked):has(input[name="forma"][value="distintas"]:checked) .monto-rapida,
.formulario:is(.compra, .form-compra):has(input[name="forma"][value="distintas"]:checked) label:has(> input[name="monto"]) { display: none; }
.cuotas-bloque { display: grid; gap: 14px; container-type: inline-size; padding: 14px; border-radius: 16px; background: var(--nucleo-2); }
.mov.editando .cuotas-bloque { background: var(--nucleo-3); }
.cuotas-bloque legend { font-size: var(--t-sm); font-weight: 500; color: var(--tinta-2); }
.cuotas-bloque fieldset { display: grid; gap: 8px; }
.cuotas-bloque .segmento { background: var(--nucleo); }
.mov.editando .cuotas-bloque .segmento { background: var(--nucleo-2); }
.segmento.cuotas label > span { font-variant-numeric: tabular-nums; padding-inline: 6px; }
.cuotas-bloque :is(.cuotas-otra, .solo-tasa) { display: none; max-width: 240px; }
.cuotas-bloque:has(input[name="cuotas"][value="otra"]:checked) .cuotas-otra { display: grid; }
.cuotas-bloque:has(input[name="forma"][value="tasa"]:checked) .solo-tasa { display: grid; }
@container (max-width: 520px) {
  .segmento.forma { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
  .segmento.forma label > span { border-radius: 18px; }
}
.cuota-vista { display: grid; gap: 8px; }
.cuota-vista:not(:has(*)) { display: none; }
.cuota-vista p { margin: 0; }
.cuota-resumen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 600; }
.cuota-resumen .sep { color: var(--tinta-3); }
.cuota-resumen .mas { color: var(--ambar); }
.cuota-nota { max-width: 68ch; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.cuota-nota strong { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.cuota-nota .plata { font-weight: 600; color: var(--tinta); }
.cuota-nota.error { color: var(--rojo); }
.cuotas-distintas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cuotas-distintas .vence { color: var(--tinta-3); font-weight: 400; }
.cuota-campo { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 600; }
.form-compra .cab-compra { margin: 0; font-size: var(--t-sm); }
.cuota-rot { display: block; }
.cuenta-tarjeta .debes { display: grid; gap: 2px; }
.completar.al-pie form + .nota-completar { margin-top: 22px; }
/* en el celu, dentro de una tarjeta, los campos de a mitad no entran: uno por renglón */
@media (max-width: 640px) { .tarjeta-pieza .formulario .a3 { grid-column: 1 / -1; } }

/* con el dedo, las cuotas, la forma y los botones de cada tarjeta responden en 44 px */
@media (pointer: coarse) {
  .cuotas-bloque .segmento label > span { min-height: 44px; }
  :is(.tarjeta-pieza, .completar, details.panel.nueva#nueva) form button { min-height: 44px; }
}
/* F8 · Racha: la pieza del Inicio (cifra + grilla de 12 semanas tipo GitHub) y /racha
   (tres cifras y un calendario por mes). Un día con carga se pinta con la tinta,
   no con verde ni rojo: en esta app esos colores dicen "entró" y "salió". */
.racha-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 40px; }
.racha-dato { min-width: 0; }
.racha-num { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.racha-num .n {
  font: 600 clamp(44px, 5vw, 60px)/.95 var(--display); letter-spacing: -.028em;
  font-optical-sizing: auto; font-stretch: 86%; font-variant-numeric: tabular-nums;
}
.racha-num .u { font: 500 var(--t-md)/1 var(--sans); color: var(--tinta-2); }
.racha-num.en-cero .n { color: var(--tinta-3); }
.racha-rot { margin: 6px 0 0; font-size: var(--t-sm); color: var(--tinta-2); }
.racha-hoy {
  display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 0; max-width: 46ch;
  font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty;
}
.racha-hoy .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--tinta-3); }
.racha-hoy.ok .ic { color: var(--verde); }
.racha-hoy.en-juego { color: var(--tinta); }
.racha-hoy.en-juego .ic { color: var(--ambar); }

/* una columna por semana: fila 1 el mes, filas 2 a 8 de lunes a domingo */
.grilla-racha { --c: 18px; display: flex; gap: 4px; justify-self: end; }
.g-sem { display: grid; grid-template-rows: 16px repeat(7, var(--c)); grid-template-columns: var(--c); gap: 4px; }
.g-mes .r-angosto { display: none; }
@media (max-width: 1100px) {
  .g-sem:not(.g-dias):nth-last-child(n+13) { display: none; }
  .g-mes .r-ancho { display: none; }
  .g-mes .r-angosto { display: inline; }
}
.g-mes, .g-dia { font-size: var(--t-xs); line-height: 1; color: var(--tinta-3); white-space: nowrap; }
.g-mes { align-self: start; }
.g-dia { align-self: center; }
.celda { display: block; border-radius: 5px; background: var(--nucleo-3); }
.celda.con { background: var(--accion); }
.celda.hoy { box-shadow: 0 0 0 2px var(--nucleo), 0 0 0 3.5px var(--tinta-2); }
.celda.futuro { background: none; box-shadow: inset 0 0 0 1px var(--linea); }
@media (max-width: 700px) {
  .racha-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .grilla-racha { justify-self: start; }
}

.racha-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.racha-cifras > div { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 0 22px; }
.racha-cifras > div:first-child { padding-left: 0; }
.racha-cifras > div + div { border-left: 1px solid var(--linea); }
.racha-cifras .cifra-m { overflow: visible; }
.racha-cifras .u { font: 500 var(--t-base)/1 var(--sans); letter-spacing: 0; color: var(--tinta-2); }
.racha-cifras p { margin: 2px 0 0; line-height: 1.45; text-wrap: pretty; }
@media (max-width: 700px) {
  .racha-cifras { grid-template-columns: minmax(0, 1fr); }
  .racha-cifras > div { padding: 16px 0 0; }
  .racha-cifras > div:first-child { padding-top: 0; }
  .racha-cifras > div + div { border-left: 0; border-top: 1px solid var(--linea); margin-top: 16px; }
}

/* los meses se separan con el gap de la grilla: ningún panel lleva margen arriba ni
   abajo (el de .panel + .panel desalineaba las filas); sólo el aro a los costados */
.meses-racha {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: calc(var(--hueco) + 2 * var(--aro)) var(--hueco); margin-top: calc(var(--hueco) + var(--aro));
}
.meses-racha > .panel { margin-block: 0; }
.mes-racha h2::first-letter { text-transform: uppercase; }
.mes-racha .panel-cab { margin-bottom: 10px; }
.mes-racha .panel-cab .chico { white-space: nowrap; }
.cal-racha { width: calc(100% + 8px); margin: -4px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.cal-racha :is(th, td) { border: 0; }
.cal-racha th { padding: 0 0 2px; font-size: var(--t-xs); font-weight: 500; color: var(--tinta-3); text-align: center; }
.cal-racha abbr { text-decoration: none; }
.cal-racha td {
  height: auto; padding: 0; border-radius: 10px; text-align: center; background: var(--nucleo-2);
  font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--tinta-2);
}
/* una celda de tabla no respeta aspect-ratio: lo cuadrado lo pone el número adentro */
.cal-racha td > span[aria-hidden] { display: grid; place-items: center; aspect-ratio: 1; }
.cal-racha td:empty { background: none; }
.cal-racha td.con { background: var(--accion); color: var(--accion-texto); font-weight: 600; }
.cal-racha td.hoy { box-shadow: 0 0 0 2px var(--nucleo), 0 0 0 3.5px var(--tinta-2); color: var(--tinta); font-weight: 600; }
.cal-racha td.hoy.con { color: var(--accion-texto); }
.cal-racha td.futuro { background: none; color: var(--tinta-3); }

/* F6 · Piso personal y "Para mirar" en el Inicio, resúmenes en Ajustes ---------------------------
   El piso comparte fila con "Para mirar" (5 + 7 columnas, como el resumen y la dona); sin nada para
   mirar va a lo ancho. La cuenta del piso se despliega renglón por renglón, con el total al pie. */
.piso-panel:not(.ancho-total) { grid-column: span 5; }
.mirar-panel { grid-column: span 7; }
@media (max-width: 1100px) { .piso-panel:not(.ancho-total), .mirar-panel { grid-column: 1 / -1; } }
.piso-panel .panel-cab { justify-content: flex-start; align-items: center; margin-bottom: 12px; }
.piso-cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.piso-cifra .plata {
  font: 600 clamp(34px, 4vw, 46px)/1 var(--display); letter-spacing: -.024em; font-stretch: 88%;
  font-optical-sizing: auto;
}
.piso-cifra .por-mes { font-size: var(--t-base); font-weight: 500; color: var(--tinta-2); }
.piso-que { margin: 8px 0 0; max-width: 52ch; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.piso-que .plata { color: var(--tinta); font-weight: 600; }
.piso-espera { margin: 0; max-width: 44ch; font: 500 var(--t-md)/1.4 var(--sans); color: var(--tinta); text-wrap: pretty; }
.piso-espera b { font-weight: 650; }
.piso-panel .enlace { margin-top: 14px; }
/* al lado de "Para mirar", la fila la mide la más alta: el título queda arriba y el cuerpo
   (cifra, cobertura y "Cómo se calcula", en ese orden y sin huecos) se centra en lo que sobra */
@media (min-width: 1101px) {
  .piso-panel:not(.ancho-total) .nucleo { display: flex; flex-direction: column; }
  .piso-panel:not(.ancho-total) .piso-cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}

/* cuánto de lo que entró este mes cubre el piso */
.piso-cubre { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linea); }
.barra-cubre { position: relative; height: 8px; overflow: hidden; border-radius: 99px; background: var(--nucleo-3); box-shadow: inset 0 0 0 1px var(--anillo); }
.barra-cubre span { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: color-mix(in srgb, var(--verde) 70%, var(--nucleo-3)); transform-origin: left; }
.barra-cubre.cubierto span { background: var(--verde); }
.piso-cubre p { margin: 10px 0 0; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.piso-cubre b { font-weight: 600; color: var(--tinta); }

/* cómo se calcula: la cuenta a la vista */
.como-se-calcula { margin-top: 16px; }
.como-se-calcula > summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; cursor: pointer; list-style: none;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
}
.como-se-calcula > summary:hover, .como-se-calcula[open] > summary { color: var(--tinta); }
.como-se-calcula > summary .ic { width: 15px; height: 15px; transition: transform 220ms var(--salida); }
.como-se-calcula[open] > summary .ic { transform: rotate(90deg); }
.cuenta-piso { margin-top: 8px; padding: 14px 16px; border-radius: 16px; background: var(--nucleo-2); font-size: var(--t-sm); }
.cuenta-piso > p { margin: 0 0 4px; line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.cuenta-piso ul { list-style: none; margin: 0; padding: 0; }
.cuenta-piso ul + p { margin-top: 14px; }
.cuenta-piso li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 7px 0; }
.cuenta-piso li + li { border-top: 1px solid var(--linea); }
.cuenta-piso li > small { grid-column: 1 / -1; margin-top: 2px; font-size: var(--t-xs); color: var(--tinta-3); }
.cuenta-piso li > span:first-child small { margin-left: 4px; font-size: var(--t-xs); color: var(--tinta-3); white-space: nowrap; }
.cuenta-piso li a {
  color: var(--tinta); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--tinta-3) 45%, transparent);
}
.cuenta-piso li a:hover { text-decoration-color: currentColor; }
.cuenta-piso .plata { font-weight: 600; text-align: end; color: var(--tinta); }
.cuenta-piso li.paso { font-weight: 600; border-top-color: color-mix(in srgb, var(--tinta-3) 40%, transparent); }
.cuenta-piso li.total .plata { font-size: var(--t-md); }
.cuenta-piso .pie-nota { margin-top: 12px; font-size: var(--t-xs); line-height: 1.5; text-wrap: pretty; }

/* para mirar: un renglón por cosa, cada uno lleva a lo suyo */
.mirar { display: grid; gap: 2px; margin: 0 -8px; padding: 0; list-style: none; }
.mirar a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 44px; padding: 10px 8px; border-radius: 14px; color: var(--tinta); text-decoration: none;
  transition: background-color 180ms var(--salida);
}
.mirar a:hover { background: var(--nucleo-2); }
.mirar .que { display: grid; gap: 2px; min-width: 0; }
.mirar .que strong { font-weight: 600; overflow-wrap: anywhere; }
.mirar .que > span { font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.mirar .que .plata { font-weight: 600; font-stretch: 94%; color: var(--tinta); }
.mirar .ir { width: 16px; height: 16px; color: var(--tinta-3); transition: transform 220ms var(--salida); }
.mirar a:hover .ir { transform: translateX(3px); }

/* Ajustes: los tres controles de los resúmenes, en fila; en el celu, uno debajo del otro */
.resumenes-control { display: flex; flex-wrap: wrap; gap: 12px; }
.resumenes-control label { flex: 1 1 140px; max-width: 200px; }
@media (max-width: 480px) { .resumenes-control label { max-width: none; } }

@media (pointer: coarse) { .como-se-calcula > summary { min-height: 44px; } }
@media (prefers-reduced-motion: no-preference) {
  .barra-cubre span { animation: crecer-x 900ms var(--salida) both; animation-delay: 260ms; }
}

/* F9 · Cuánto cobrar ----------------------------------------------------------------------------
   Los números a la izquierda (5 columnas) y la tarifa con su cuenta a la derecha (7); el chequeo de
   un cliente abajo, a lo ancho, con la misma partición. El paso a paso va abierto: es lo mejor de la
   calculadora. Los campos llevan su signo o su unidad adentro del mismo recuadro. */
.cobrar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
.cobrar > .cobrar-aviso { grid-column: 1 / -1; margin: 0 7px; }
.cobrar-datos { grid-column: span 5; }
.cobrar-salida { grid-column: span 7; }
.cobrar-chequeo { grid-column: 1 / -1; }
@media (max-width: 1100px) { .cobrar-datos, .cobrar-salida { grid-column: 1 / -1; } }
.cobrar-datos .panel-cab { align-items: center; flex-wrap: wrap; }

/* Pesos | Dólares: el mismo riel que .segmento, con botones (rehacen el formulario) */
.moneda-cobrar { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--nucleo-2); }
.moneda-cobrar button { padding: 7px 14px; background: transparent; box-shadow: none; color: var(--tinta-2); }
.moneda-cobrar button:hover { background: transparent; color: var(--tinta); }
.moneda-cobrar button[aria-pressed="true"] {
  background: var(--elegido); color: var(--tinta);
  box-shadow: inset 0 1px 0 var(--brillo), 0 0 0 1px var(--anillo), 0 4px 12px -6px var(--sombra-c);
}

.cobrar .grupo + .grupo { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); }
/* flotando, la leyenda deja de montarse sobre el borde del fieldset */
.cobrar legend { float: left; width: 100%; margin-bottom: 12px; font: 600 var(--t-base)/1.3 var(--display); letter-spacing: -.01em; color: var(--tinta); }
.cobrar legend + * { clear: both; }
.campo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.campo + .campo { margin-top: 16px; }
.par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.par .campo + .campo { margin-top: 0; }
@media (max-width: 360px) { .par { grid-template-columns: 1fr; } }

/* el recuadro es el campo: el signo adelante, la unidad atrás, el aro al enfocar */
.campo-unidad {
  display: flex; align-items: center; gap: 6px; padding: 0 13px; border: 1px solid transparent;
  border-radius: var(--r-control); background: var(--nucleo-2); cursor: text;
  transition: border-color 160ms var(--salida), box-shadow 160ms var(--salida), background-color 160ms var(--salida);
}
.campo-unidad:hover { background: var(--nucleo-3); }
.campo-unidad:focus-within {
  border-color: var(--foco); background: var(--nucleo);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--foco) 18%, transparent);
}
.campo-unidad:has(input[aria-invalid="true"]) { border-color: var(--rojo); }
.campo-unidad input, .campo-unidad input:hover, .campo-unidad input:focus {
  flex: 1; min-width: 0; padding: 11px 0; border: 0; background: transparent; box-shadow: none; outline: none;
  font: 500 var(--t-md)/1.2 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.campo-unidad .pre, .campo-unidad .suf { flex: none; font-size: var(--t-sm); font-weight: 500; color: var(--tinta-3); }
.ayuda-campo { margin: 0; max-width: 58ch; font-size: var(--t-xs); line-height: 1.5; color: var(--tinta-3); text-wrap: pretty; }
.ayuda-campo .plata { font-weight: 600; color: var(--tinta); }
.pie-cobrar { display: flex; justify-content: flex-end; margin-top: 22px; }

/* la tarifa: la cifra grande, las otras tres y la cuenta */
.cobrar-salida .panel-cab { flex-wrap: wrap; margin-bottom: 8px; }
.cot-cobrar .plata { font-weight: 600; color: var(--tinta-2); }
.tarifa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; }
.tarifa .plata {
  font: 600 clamp(44px, 5.4vw, 64px)/1 var(--display); letter-spacing: -.03em; font-stretch: 88%;
  font-optical-sizing: auto;
}
.tarifa .por { font-size: var(--t-md); font-weight: 500; color: var(--tinta-2); }
.equiv-grande { margin: 6px 0 0; font-size: var(--t-sm); color: var(--tinta-2); }
.salidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--linea); }
.salidas > div { min-width: 0; }
.salidas dt { font-size: var(--t-sm); font-weight: 500; color: var(--tinta-2); }
.salidas dd { margin: 0; }
.salidas dd.plata { margin-top: 4px; font: 600 var(--t-lg)/1.2 var(--display); letter-spacing: -.015em; font-stretch: 94%; }
.salidas .u { font: 500 var(--t-sm) var(--sans); letter-spacing: 0; color: var(--tinta-2); }
.salidas .equiv { margin-top: 2px; font-size: var(--t-xs); color: var(--tinta-3); }
@media (max-width: 560px) {
  .salidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .salidas > div:last-child { grid-column: 1 / -1; }
}

.pasos-titulo { margin: 28px 0 10px; font: 600 var(--t-base)/1.3 var(--display); letter-spacing: -.01em; }
.pasos { counter-reset: paso; margin: 0; padding: 4px 16px; list-style: none; border-radius: 16px; background: var(--nucleo-2); }
.pasos li {
  counter-increment: paso; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: baseline;
  column-gap: 10px; padding: 10px 0;
}
.pasos li::before { content: counter(paso); font: 600 var(--t-xs)/1 var(--display); font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.pasos li + li { border-top: 1px solid color-mix(in srgb, var(--tinta-3) 18%, transparent); }
/* el título y el resultado en el mismo renglón; la cuenta abajo, a todo el ancho (en el celu no se aprieta) */
.pasos .que { display: contents; }
.pasos li::before { grid-row: 1; grid-column: 1; }
.pasos .t { grid-row: 1; grid-column: 2; min-width: 0; font-size: var(--t-sm); font-weight: 600; line-height: 1.35; color: var(--tinta); }
.pasos .c { grid-row: 2; grid-column: 2 / -1; margin-top: 2px; font-size: var(--t-xs); line-height: 1.45; color: var(--tinta-2); overflow-wrap: anywhere; text-wrap: pretty; }
.pasos .v { grid-row: 1; grid-column: 3; font-size: var(--t-sm); font-weight: 600; text-align: end; color: var(--tinta); }
.pasos li.destacado .v { font-size: var(--t-md); }
.volver-piso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }
.volver-piso p { margin: 0; max-width: 48ch; }
.errores-cobrar { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.errores-cobrar li {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: var(--rojo-suave); font-size: var(--t-sm); line-height: 1.45; color: var(--tinta);
}
.errores-cobrar .ic { margin-top: 1px; color: var(--rojo); }
.errores-cobrar a { font-weight: 600; }

/* el chequeo de un cliente: los tres campos y la respuesta, con la partición de arriba */
.chequeo-grilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 36px; }
@media (max-width: 1100px) { .chequeo-grilla { grid-template-columns: 1fr; } }
.chequeo-que { margin: 6px 0 18px; max-width: 52ch; }
.chequeo-salida { align-self: start; min-width: 0; }
.chequeo-cifra { margin: 0; font: 600 clamp(22px, 2.4vw, 28px)/1.2 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.chequeo-salida .barra-cubre { margin-top: 14px; }
.chequeo-bajo { margin: 10px 0 16px; line-height: 1.5; text-wrap: pretty; }
.chequeo-bajo .plata { font-weight: 600; color: var(--tinta); }
.chequeo-vacio {
  margin: 0; padding: 26px 20px; border-radius: 16px; text-align: center; font-size: var(--t-sm); color: var(--tinta-2);
  border: 1px dashed color-mix(in srgb, var(--tinta-3) 45%, transparent); text-wrap: pretty;
}
@media (min-width: 1101px) { .chequeo-salida { padding-top: 4px; } }

/* el enlace desde la tarjeta del piso, en su propio renglón */
.piso-panel .piso-cobrar { display: flex; width: fit-content; }
@media (pointer: coarse) { .moneda-cobrar button { min-height: 44px; } }
@media (prefers-reduced-motion: no-preference) {
  .chequeo-salida .barra-cubre span { animation: crecer-x 900ms var(--salida) both; }
}
/* F9: el botón por defecto del formulario (Enter en un campo) existe pero no se ve ni se tabula */
.cobrar > .por-defecto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }

/* F9: los campos con unidad llegan a 44 px en pantallas táctiles */
@media (pointer: coarse) { .campo-unidad input { min-height: 44px; } }
/* F7 · Metas y ahorro: "pagate a vos primero", el ahorro (pool), las metas y la pieza del Inicio -------------
   Reusa .bisel/.nucleo, .panel-cab, .cuenta, .tope-barra, .segmento, .formulario, .sello, .chip y la leyenda del
   ritmo. Verde es lo apartado (lo tuyo), rojo lo gastado; lo que queda es la pista vacía. Todos los anchos
   (--w, --p) vienen hechos del servidor. */
.metas-hoja { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--hueco); align-items: start; }
@media (max-width: 1100px) { .metas-hoja { grid-template-columns: minmax(0, 1fr); } }
.metas-hoja h3, .titulo-seccion { font: 600 var(--t-md)/1.2 var(--display); letter-spacing: -.015em; margin: 0; }
.titulo-seccion { margin: calc(var(--hueco) + 2 * var(--aro) + 8px) 7px 18px; font-size: var(--t-lg); }
.regla-chip .ic { color: var(--verde); }
.regla-panel .panel-cab, .pool-panel .panel-cab { flex-wrap: wrap; }
.regla-chip { white-space: nowrap; }
.invitacion-regla { margin: 0; max-width: 60ch; color: var(--tinta-2); }

/* las dos cifras: lo tuyo y lo que queda para vivir */
.regla-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.medida { display: grid; align-content: start; gap: 4px; padding-top: 14px; border-top: 1px solid var(--linea); min-width: 0; }
.medida + .medida { padding-left: 20px; border-left: 1px solid var(--linea); }
.medida .cifra-m { margin: 2px 0 0; overflow: visible; white-space: normal; }
.medida .cifra-m small, .cifra-s small, .meta .saldo small {
  font: 500 var(--t-sm)/1.3 var(--sans); letter-spacing: 0; color: var(--tinta-2); font-stretch: 100%; white-space: nowrap;
}
.dice { margin: 4px 0 0; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); max-width: 44ch; }
.dice .plata { font-weight: 600; font-stretch: 94%; color: var(--tinta); font-variant-numeric: proportional-nums; }
.dice.falta, .dice.falta .plata { color: var(--ambar); }
.dice.listo { display: flex; gap: 6px; align-items: center; color: var(--verde); font-weight: 600; }
@media (max-width: 640px) {
  .regla-cifras { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .medida + .medida { padding-left: 0; border-left: 0; }
}

/* lo que entró, partido: primero lo tuyo, después lo gastado; lo vacío es lo que queda */
.reparto {
  display: flex; height: 14px; margin-top: 22px; border-radius: 99px; overflow: hidden;
  background: var(--nucleo-3); box-shadow: inset 0 0 0 1px var(--anillo);
}
.reparto > span { flex: 0 0 var(--w); min-width: 3px; transform-origin: left; }
.reparto > span + span { box-shadow: -2px 0 0 var(--nucleo); }
.p-apartado, .l-apartado { background: var(--verde); }
.p-falta, .l-falta { background: color-mix(in srgb, var(--verde) 30%, var(--nucleo-3)); }
.p-gastado, .l-gastado { background: var(--rojo); }
.p-gastado.pasado { background: color-mix(in srgb, var(--rojo) 80%, var(--tinta)); }
.l-queda { background: var(--nucleo-3); box-shadow: inset 0 0 0 1px var(--anillo); }
.reparto-ley { margin-top: 10px; }

/* apartar y cambiar la regla: botones que se abren en el lugar, con los campos sobre gris */
.regla-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.regla-acciones > details { min-width: 0; }
.regla-acciones > details[open] { flex: 1 0 100%; order: 2; }
.regla-acciones > details > summary { list-style: none; width: fit-content; }
.regla-acciones form { margin-top: 14px; padding: 18px; border-radius: 18px; background: var(--nucleo-2); }
.regla-acciones form :is(input:not([type="radio"], [type="checkbox"]), select) { background-color: var(--nucleo); border-color: var(--campo-aro); }
.regla-acciones form :is(input:not([type="radio"], [type="checkbox"]), select):hover { border-color: var(--tinta-3); }
.regla-acciones form :is(input, select):focus { border-color: var(--foco); }
.regla-acciones form .segmento { background: var(--nucleo-3); }
.regla-acciones .nota { margin: 14px 0 0; }
.nota-form { margin: 0; max-width: 62ch; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-3); text-wrap: pretty; }
.campo-plata { font-family: var(--display); font-variant-numeric: tabular-nums; font-weight: 600; }
.campo-plata::placeholder { font-weight: 500; }

/* la regla muestra sólo los campos de su modo, sin JavaScript */
.regla-form :is(.solo-pct, .solo-fijo, .pct-otro) { display: none; }
.regla-form:has(input[name="modo"][value="pct"]:checked) .solo-pct:not(.pct-otro) { display: grid; }
.regla-form:has(input[name="modo"][value="pct"]:checked):has(input[name="pct"][value="otro"]:checked) .pct-otro { display: grid; }
.regla-form:has(input[name="modo"][value="fijo"]:checked) .solo-fijo { display: grid; }
.regla-form:has(input[name="modo"]:is([value="manual"], [value="nada"]):checked) .solo-aviso { display: none; }
.segmento.modo-regla { max-width: 560px; }
.segmento.atajos { max-width: 400px; }
@media (max-width: 640px) {
  .segmento.modo-regla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
  .segmento.modo-regla label > span { border-radius: 18px; }
}
.regla-sim, .sugerencia-meta { min-height: 1.45em; }
.nota-sugerencia { margin: 0; max-width: 62ch; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.nota-sugerencia .plata { font-weight: 600; font-stretch: 94%; color: var(--tinta); font-variant-numeric: proportional-nums; }
label.casilla { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--tinta); font-weight: 500; cursor: pointer; }
label.casilla input { flex: none; }

/* meses anteriores de la regla */
.historial-regla { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--linea); }
.historial-regla ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.historial-regla li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 6px 0; font-size: var(--t-sm); }
.historial-regla .mes-h { color: var(--tinta-2); font-weight: 500; }
.historial-regla .plata { font-weight: 600; font-stretch: 94%; }
.sello.cumplio { color: var(--verde); background: var(--verde-suave); }
@media (max-width: 640px) {
  .historial-regla li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .historial-regla .sello { grid-column: 2; justify-self: end; }
}

/* tu ahorro: lo que hay, lo reservado y lo libre */
.pool + .pool { margin-top: 20px; }
.pool-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pool-cifras > div { display: grid; align-content: start; gap: 2px; min-width: 0; }
.pool-cifras .rot { line-height: 1.3; }
.cifra-s { font: 600 var(--t-lg)/1.15 var(--display); letter-spacing: -.01em; font-stretch: 90%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pool-barra { margin-top: 12px; }
.pool-barra .relleno-tope { background: var(--tinta); }
.pool .nota { margin-top: 12px; color: var(--rojo); }
@media (max-width: 640px) { .pool-cifras .cifra-s { font-size: var(--t-md); } }

.cuentas-ahorro { list-style: none; margin: 20px -8px 0; padding: 0; }
.cuentas-ahorro li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; }
.cuentas-ahorro li + li::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--linea); }
.cuentas-ahorro .cat-ic { --c: var(--tinta-2); }
.cuentas-ahorro li.es-ahorro .cat-ic { --c: var(--verde); }
.cuentas-ahorro .n { display: grid; min-width: 0; line-height: 1.35; }
.cuentas-ahorro .n strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuentas-ahorro .n .plata { font-stretch: 94%; }
/* el interruptor: una llave de verdad, que dice lo que es */
.interruptor { gap: 10px; padding: 6px 12px 6px 6px; min-height: 36px; background: var(--nucleo-2); color: var(--tinta-2); font-weight: 600; }
.interruptor .perilla {
  position: relative; flex: none; width: 34px; height: 20px; border-radius: 99px; background: var(--nucleo-3);
  box-shadow: inset 0 0 0 1px var(--anillo); transition: background-color 220ms var(--salida);
}
.interruptor .perilla::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 99px; background: var(--nucleo);
  box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform 260ms var(--resorte);
}
.interruptor[aria-pressed="true"] { color: var(--tinta); }
.interruptor[aria-pressed="true"] .perilla { background: var(--verde); }
.interruptor[aria-pressed="true"] .perilla::after { transform: translateX(14px); }

.plan-mes { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); display: grid; gap: 10px; justify-items: start; }
.plan-mes p { margin: 0; }
.plan-mes ul { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 4px; }
.plan-mes li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px; border-radius: 12px; background: var(--nucleo-2); font-size: var(--t-sm); }
.plan-mes li .plata { font-weight: 600; font-stretch: 94%; }

/* una meta: la tarjeta de Cuentas, con su barra y su plan en renglones */
.cuentas.metas { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }
.meta .cab { align-items: flex-start; }
.meta .cab-nombre { flex: 1; min-width: 0; }
.meta .cab-nombre strong { display: block; overflow-wrap: anywhere; }
.meta .cab .sello { margin-top: 5px; }
.emoji-meta {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px;
  background: var(--nucleo-2); box-shadow: inset 0 0 0 1px var(--anillo); font-size: 21px; line-height: 1;
}
.meta .saldo { white-space: normal; }
.meta-barra .relleno-tope { background: var(--verde); }
.equiv-meta { margin: -4px 0 0; font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.equiv-meta b { color: var(--tinta); font-weight: 600; }
.plan-meta { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 8px; }
.plan-meta li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.plan-meta li .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--tinta-3); }
.plan-meta li.bien .ic { color: var(--verde); }
.plan-meta li.atencion .ic { color: var(--ambar); }
.plan-meta li.mal .ic { color: var(--rojo); }
.plan-meta li.suave { color: var(--tinta-3); }
.plan-meta .plata { font-weight: 600; font-stretch: 94%; color: var(--tinta); font-variant-numeric: proportional-nums; }
.acciones-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 4px; }
.acciones-meta > details { margin-top: 0; min-width: 0; }
.acciones-meta > details[open] { flex: 1 0 100%; order: 2; }
.acciones-meta > details[open] > summary { color: var(--tinta); }
.form-meta { display: grid; gap: 10px; margin-top: 10px; }
.form-meta p { margin: 0; }
.form-meta .par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form-meta .par-emoji { grid-template-columns: 76px minmax(0, 1fr); }
.form-meta button { justify-self: start; }
.segmento.sentido { max-width: 260px; }
.campo-emoji { text-align: center; font-size: 20px; padding-block: 8px; }
.cierre-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.cuentas.metas + details.panel { margin-top: calc(var(--hueco) + 2 * var(--aro)); }
.cuentas.metas + details.panel:not([open]) { margin-top: calc(var(--hueco) + var(--aro)); }

/* alta: el emoji en su cajita al lado del nombre */
.form-nueva-meta .emoji-nueva { grid-column: span 1; }
.form-nueva-meta .nombre-nueva { grid-column: span 5; }
.form-nueva-meta .ayuda-tasa { margin: 0; align-self: center; line-height: 1.45; }
.sugerencia-meta { display: grid; gap: 8px; }
.sugerencia-meta label { max-width: 320px; }
@media (max-width: 700px) {
  .form-nueva-meta { grid-template-columns: 84px minmax(0, 1fr); }
  .form-nueva-meta .emoji-nueva, .form-nueva-meta .nombre-nueva { grid-column: span 1; }
  .form-nueva-meta > :not(.emoji-nueva, .nombre-nueva, input) { grid-column: 1 / -1; }
}

/* cumplidas y archivadas */
details.cerradas > summary { list-style: none; }
.lista-cerradas { list-style: none; margin: 0 -8px; padding: 0; }
.lista-cerradas li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; }
.lista-cerradas li + li::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--linea); }
.lista-cerradas .n { display: grid; min-width: 0; line-height: 1.4; }
.lista-cerradas .plata { font-weight: 600; font-stretch: 94%; color: var(--tinta); }
.chico-emoji { width: 32px; height: 32px; border-radius: 11px; font-size: 17px; }

/* Inicio: tres datos cortos que llevan a Metas y ahorro */
.datos-ahorro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 10px; }
.datos-ahorro .dato {
  display: grid; align-content: start; gap: 6px; padding: 14px; border-radius: 16px; background: var(--nucleo-2);
  color: var(--tinta); text-decoration: none; transition: background-color 180ms var(--salida), transform 140ms var(--salida);
}
.datos-ahorro .dato:hover { background: var(--nucleo-3); }
.datos-ahorro .rot { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahorro-barra .relleno-tope { background: var(--verde); }

/* En pantallas táctiles, todo lo de acá responde en 44 × 44. */
@media (pointer: coarse) {
  .regla-acciones summary, .interruptor, .cierre-meta button, .lista-cerradas button, .form-meta button { min-height: 44px; }
  .acciones-meta summary { position: relative; }
  .acciones-meta summary::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* lo que entró se reparte de izquierda a derecha: primero lo tuyo */
  .reparto > span { animation: crecer-x 820ms var(--salida) both; animation-delay: 240ms; }
  .reparto > .p-falta { animation-delay: 360ms; }
  .reparto > .p-gastado { animation-delay: 480ms; }
  .datos-ahorro .dato:active, .interruptor:active { transform: scale(.97); }
}

/* F10 · Barra lateral, "Más" y cuentas que se borran ------------------------------------------------
   La navegación sale de navegacion.SECCIONES. En compu, la isla de arriba se vuelve una barra al
   costado (el mismo vidrio, su aro y su sombra: es fija, así que el desenfoque se justifica): la marca,
   "Cargar movimiento" en tinta con el "+" en su nido, los grupos y, pegado al pie, el de configurar.
   Desde 1280 px con nombres; de 901 a 1279, sólo íconos, con el nombre en un globito al pasar o
   enfocar. Hasta 900 px, la barra de abajo de siempre y "Más" abre una hoja con la misma lista. La
   píldora (la tinta) viaja por la barra como viajaba por la isla (tema.js). */
:root { --barra: 256px; }
.barra { display: none; }
@media (min-width: 901px) {
  body.con-barra { display: grid; grid-template-columns: var(--barra) minmax(0, 1fr); align-items: start; }
  body.con-barra > main { grid-column: 2; grid-row: 1; padding-top: 30px; padding-inline: clamp(20px, 3vw, 44px); }
  .barra { display: block; grid-column: 1; grid-row: 1; position: sticky; top: 0; z-index: 30; height: 100dvh; padding: 14px 0 14px 14px; }
  /* "Pasar plata" de una tarjeta ya no tiene un menú arriba que lo tape */
  details.panel.pasar { scroll-margin-top: 24px; }
}
.barra-panel {
  height: 100%; display: flex; flex-direction: column; padding: 12px;
  border-radius: var(--r-bandeja); background: color-mix(in srgb, var(--nucleo) 74%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--brillo), 0 0 0 1px var(--anillo), 0 18px 40px -22px var(--sombra-c);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.barra-panel::-webkit-scrollbar { display: none; }
.barra-marca {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 0 14px; border-radius: 14px;
  font: 650 var(--t-md)/1 var(--display); letter-spacing: -.02em; color: var(--tinta); text-decoration: none;
}
.barra-marca img { flex: none; border-radius: 9px; box-shadow: 0 0 0 1px var(--anillo); }
.barra-cargar {
  width: 100%; justify-content: space-between; margin: 0 0 22px; padding: 6px 6px 6px 18px;
  background: var(--accion); color: var(--accion-texto); box-shadow: 0 10px 22px -14px var(--sombra-c);
}
.barra-cargar:hover { background: color-mix(in srgb, var(--accion) 86%, var(--lienzo)); }
.barra-cargar:hover .nido { transform: rotate(90deg) scale(1.06); }

.secciones { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; gap: 20px; }
.secciones > .nav-tinta { display: flex; flex-direction: column; gap: 20px; padding: 0; background: var(--pildora); }
.secciones ul, .hoja-mas ul { list-style: none; margin: 0; padding: 0; }
.secciones ul { display: grid; gap: 2px; }
.grupo-titulo { margin: 0 0 6px; padding: 0 14px; font: 600 var(--t-xs)/1.3 var(--sans); letter-spacing: .01em; color: var(--tinta-3); }
/* lo que se configura, al pie, separado por aire y una línea de un pelo */
.secciones .grupo-abajo { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linea); }
.secciones a {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; min-height: 40px; padding: 8px 12px 8px 14px; border-radius: 999px;
  color: var(--tinta-2); font-size: var(--t-sm); font-weight: 500; text-decoration: none;
  transition: color 180ms var(--salida), background-color 180ms var(--salida), transform 140ms var(--salida);
}
.secciones a .ic { width: 20px; height: 20px; }
.secciones a .etq { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secciones a:hover { color: var(--tinta); background: var(--nucleo-2); }
.secciones a[aria-current="page"] { color: var(--accion-texto); background: transparent; }
.secciones .contador { justify-self: end; }
/* mientras la píldora viaja, el destino se ve como uno más: la copia entintada lo va pintando */
.secciones.viajando .pildora { visibility: hidden; }
.secciones.viajando a[aria-current="page"] { color: var(--tinta-2); }
.secciones .nav-tinta :is(a, a:hover) { color: var(--pildora-texto); background: transparent; }
.secciones .nav-tinta .grupo-abajo { border-top-color: transparent; }
.secciones .nav-tinta .grupo-titulo { visibility: hidden; }

/* 901 a 1279 px: sólo íconos. El nombre sigue en el enlace (lo lee el lector de pantalla) y se
   ve en un globito a la derecha al pasar o al enfocar con el teclado. */
@media (min-width: 901px) and (max-width: 1279px) {
  :root { --barra: 92px; }
  .barra-panel { align-items: center; padding: 12px 8px; overflow: visible; }
  .barra-marca { padding: 6px; margin-bottom: 12px; }
  .barra-marca span { display: none; }
  .barra-cargar { position: relative; width: 52px; height: 52px; margin-bottom: 18px; padding: 0; justify-content: center; border-radius: 18px; }
  .barra-cargar .nido { background: transparent; width: 24px; height: 24px; }
  .barra-cargar .nido .ic { width: 22px; height: 22px; }
  .barra-cargar .rot-cargar, .secciones .grupo-titulo {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .secciones, .secciones > .nav-tinta { width: 100%; gap: 10px; }
  .secciones .grupo + .grupo { padding-top: 10px; border-top: 1px solid var(--linea); }
  .secciones .nav-tinta .grupo + .grupo { border-top-color: transparent; }
  .secciones ul { justify-items: center; gap: 4px; }
  .secciones a { grid-template-columns: 1fr; justify-items: center; width: 52px; min-height: 0; height: 48px; padding: 0; border-radius: 16px; }
  .secciones a .ic { width: 22px; height: 22px; }
  .secciones a .etq {
    position: absolute; left: calc(100% + 14px); top: 50%; z-index: 2; overflow: visible;
    padding: 7px 11px; border-radius: 11px; background: var(--accion); color: var(--accion-texto);
    font-size: var(--t-xs); font-weight: 600; line-height: 1.2; pointer-events: none;
    box-shadow: 0 12px 26px -12px var(--sombra-c);
    opacity: 0; transform: translate(-4px, -50%);
    transition: opacity 140ms var(--salida), transform 140ms var(--salida);
  }
  .secciones a:hover .etq, .secciones a:focus-visible .etq { opacity: 1; transform: translate(0, -50%); }
  .secciones .nav-tinta a .etq { display: none; }
  .secciones .contador { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10.5px; }
}
/* nada de la barra se aplasta. F26: los escalones que apretaban los ítems en las ventanas bajas (F10 a F22) se
   fueron: los ítems miden siempre lo mismo y, si la lista no entra, se desplaza ella sola (el bloque de F26, al final) */
.barra-panel > * { flex-shrink: 0; }

/* hasta 900 px: la barra de abajo con "Más" como botón (abre la hoja). Las columnas salen de cuántas
   secciones van a cada lado del "+" (--antes, --despues: las cuenta el servidor). */
@media (max-width: 900px) {
  .isla-abajo { grid-template-columns: repeat(var(--antes, 2), minmax(0, 1fr)) 56px repeat(var(--despues, 2), minmax(0, 1fr)); }
  .isla-abajo .mas-secciones {
    position: relative; isolation: isolate; display: grid; place-items: center; min-height: 52px; padding: 6px 0 5px;
    border-radius: var(--r-pildora); background: transparent; box-shadow: none; color: var(--tinta-3);
    font: 500 var(--t-xs)/1.55 var(--sans); letter-spacing: -.01em; white-space: nowrap;
    transition: color 180ms var(--salida), transform 140ms var(--salida);
  }
  .isla-abajo .mas-secciones:hover { background: transparent; }
  .isla-abajo .mas-secciones .ic { width: 22px; height: 22px; transition: transform 260ms var(--resorte); }
  .isla-abajo .mas-secciones[aria-current="page"] { color: var(--tinta); }
  .isla-abajo .mas-secciones[aria-current="page"] .ic { transform: translateY(-1px); }
  .isla-abajo.viajando > .mas-secciones[aria-current="page"] { color: var(--tinta-3); }
  .isla-abajo.viajando > .mas-secciones[aria-current="page"] .ic { transform: none; }
  .isla-abajo .nav-tinta .mas-secciones { color: var(--pildora-texto); }
  .isla-abajo .nav-tinta .mas-secciones .ic { transform: translateY(-1px); }
}

/* la hoja "Más": las mismas secciones, en los mismos grupos, de a dos por fila */
.hoja-mas .dentro { max-height: min(88dvh, 760px); overflow-y: auto; overscroll-behavior: contain; }
.hoja-mas .grupo + .grupo { margin-top: 16px; }
.hoja-mas .grupo-abajo { padding-top: 16px; border-top: 1px solid var(--linea); }
.hoja-mas .grupo-titulo { padding: 0 4px; margin-bottom: 8px; }
.hoja-mas ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hoja-mas a {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px;
  border-radius: 16px; background: var(--nucleo-2); color: var(--tinta); font-size: var(--t-sm); font-weight: 600;
  text-decoration: none; transition: background-color 180ms var(--salida), transform 140ms var(--salida);
}
.hoja-mas a:hover { background: var(--nucleo-3); }
.hoja-mas a .ic { width: 20px; height: 20px; color: var(--tinta-2); }
.hoja-mas a .etq { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoja-mas a[aria-current="page"] { background: var(--accion); color: var(--accion-texto); }
.hoja-mas a[aria-current="page"] .ic { color: inherit; }
.hoja-mas .contador { margin-left: auto; }
@media (min-width: 901px) { .hoja-mas { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .secciones a:active, .hoja-mas a:active { transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .secciones a .etq { transition-property: opacity; }
}

/* Las pantallas se acomodan al ancho que les deja la barra, no al de la ventana: la dona del Inicio
   achica su figura cuando su pieza es angosta (a 1101 con íconos o a 1280 con nombres la leyenda
   cortaba "Supermer-cado"), y la cifra grande del resumen no pasa de un quinto de su pieza. Con cqi
   sobre la pieza, nunca sobre main (que tiene hijos fijos). */
.dona-panel .nucleo, .resumen .nucleo { container-type: inline-size; }
@media (min-width: 641px) {
  @container (max-width: 540px) {
    .dona-panel .dona { grid-template-columns: minmax(140px, 168px) minmax(0, 1fr); gap: 16px; }
    .dona-panel .leyenda a { gap: 8px; }
    /* el centro usa más del hueco del anillo (r 80, trazo 26: el hueco es el 67%) y una cifra más chica */
    .dona-panel .dona-centro { inset: 18%; }
    .dona-panel .c-item .cifra-m { font-size: 19px; }
  }
}
.resumen .cifra { font-size: min(clamp(46px, 6.2vw, 78px), 21cqi); }

/* F10 · Cuentas que se borran: "¿Qué hacemos con X?", Archivadas y Categorías -------------------------
   Lo que tiene la cuenta a la izquierda (queda a la vista mientras se leen las opciones) y una pieza por
   opción: la que se puede deshacer primero. Lo que se pierde, en rojo; lo que queda, en verde; los
   botones que borran, rojos llenos. Todos los números vienen del servidor. */
.enlace.volver { margin: 0 0 10px -2px; }
.enlace.volver .ic { width: 15px; height: 15px; }
.enlace.volver:hover .ic { transform: translateX(-3px); }
.pantalla-baja { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--hueco) + 2 * var(--aro)) var(--hueco); align-items: start; }
@media (min-width: 1101px) {
  .pantalla-baja { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .baja-cuenta { position: sticky; top: 24px; }
}
.cab-baja { display: flex; align-items: center; gap: 12px; }
.cab-baja .cat-ic { --c: var(--tinta-2); }
.cab-baja .cab-nombre { flex: 1; min-width: 0; }
.cab-baja h2 { overflow-wrap: anywhere; }
.cab-baja p { margin: 2px 0 0; }
.rot-baja { margin: 26px 0 4px; font-size: var(--t-sm); font-weight: 500; color: var(--tinta-2); }
.cifra-baja {
  margin: 0; font: 600 clamp(34px, 3.4vw, 44px)/1.05 var(--display); letter-spacing: -.024em; font-stretch: 88%;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.hechos { display: grid; gap: 0; margin: 20px 0 14px; }
.hechos > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 10px 0; }
.hechos > div + div { border-top: 1px solid var(--linea); }
.hechos dt { font-size: var(--t-sm); color: var(--tinta-2); }
.hechos dd { margin: 0; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hechos dd .tenue { font-weight: 500; }

.opcion { padding: 22px 24px; }
.opcion-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.opcion-cab h2 { font-size: var(--t-lg); }
.opcion-cab .sello { margin-left: auto; }
.ic-opcion {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; flex: none;
  background: var(--nucleo-2); color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--anillo);
}
#juntar .ic-opcion, #borrar .ic-opcion { background: var(--rojo-suave); color: var(--rojo); box-shadow: none; }
.opcion > p { margin: 0; max-width: 62ch; color: var(--tinta-2); line-height: 1.55; text-wrap: pretty; }
.opcion > form:not(.form-baja) { margin-top: 18px; }
.opcion > p .plata, .que-pasa .plata { font-weight: 600; color: var(--tinta); font-stretch: 94%; font-variant-numeric: proportional-nums; }
.form-baja { display: grid; gap: 14px; margin-top: 18px; justify-items: start; }
.form-baja label { width: 100%; max-width: 420px; }
.nota-baja { display: flex; gap: 8px; align-items: flex-start; margin: -4px 0 0; max-width: 62ch; font-size: var(--t-sm); color: var(--tinta-3); line-height: 1.5; }
.nota-baja .ic { width: 16px; height: 16px; margin-top: 2px; }

.que-pasa { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.opcion > .que-pasa { margin: 16px 0 18px; }
.que-pasa li { display: flex; gap: 10px; align-items: flex-start; max-width: 64ch; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.que-pasa li .ic { width: 17px; height: 17px; margin-top: 1px; color: var(--tinta-3); }
.que-pasa li.pierde .ic { color: var(--rojo); }
.que-pasa li.queda .ic, .que-pasa li.resultado .ic { color: var(--verde); }
.que-pasa li.resultado { color: var(--tinta); font-size: var(--t-base); }
.que-pasa li.resultado b { font-weight: 650; }
/* la vista previa de juntar: el resultado arriba, como un recibo */
.vista-juntar { width: 100%; padding: 16px 18px; border-radius: 18px; background: var(--nucleo-2); }
.vista-juntar:empty { display: none; }
.motivo { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 0; max-width: 62ch; font-size: var(--t-sm); line-height: 1.5; color: var(--ambar); text-wrap: pretty; }
.motivo .ic { width: 17px; height: 17px; margin-top: 1px; }
.opcion > .motivo + .enlace { margin-top: 14px; }
.por-que .ic-opcion { color: var(--tinta-3); }

/* lo que borra: rojo lleno, con el texto del lienzo (en oscuro el rojo se aclara y el texto se oscurece) */
button.boton-borrar, .boton.boton-borrar {
  background: var(--rojo); color: var(--nucleo);
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--rojo) 70%, transparent);
}
button.boton-borrar:hover, .boton.boton-borrar:hover { background: color-mix(in srgb, var(--rojo) 86%, var(--tinta)); }
.peligro-suave { color: var(--rojo); }
.terciario.peligro-suave:hover, .terciario.peligro-suave:focus-visible { color: var(--rojo); background: var(--rojo-suave); }

/* Cuentas: el enlace a borrar o archivar, más callado que los otros; y las archivadas al final */
.enlace.baja-enlace { color: var(--tinta-3); }
.enlace.baja-enlace .ic { width: 15px; height: 15px; }
.enlace.baja-enlace:hover { color: var(--tinta); }
.enlace.baja-enlace:hover .ic { transform: none; }
details.panel.archivadas > summary .ic { width: 17px; height: 17px; }
.nota-archivadas { margin: 0 0 12px; max-width: 70ch; }
.lista-archivadas { list-style: none; margin: 0 -8px; padding: 0; }
.lista-archivadas li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 10px 8px; }
.lista-archivadas li + li::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--linea); }
.lista-archivadas .cat-ic { --c: var(--tinta-3); }
.lista-archivadas .n { display: grid; min-width: 0; line-height: 1.4; }
.lista-archivadas .n strong { font-weight: 600; overflow-wrap: anywhere; }
.lista-archivadas .plata { font-weight: 600; font-stretch: 94%; }
.acciones-archivada { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 16px; }
@media (max-width: 640px) {
  .lista-archivadas li { grid-template-columns: auto minmax(0, 1fr); }
  .acciones-archivada { grid-column: 2; justify-content: flex-start; }
}
.enlaces-tarjeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }

/* Categorías: "Borrar" o "Archivar" abren, debajo de la fila, lo que pasa y el botón que confirma */
.cat-fila > details.confirmar, .cat-fila > details.confirmar > summary { order: 3; }
/* "Archivar", "Borrar" y "Reactivar" miden lo mismo: el lápiz queda en la misma columna en todas las filas */
.cat-fila > details.confirmar > summary, .cat-fila > form > button { min-width: 78px; }
.cat-fila.con-dos { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.cat-fila details.confirmar > summary { list-style: none; }
.confirmar-baja {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-top: 4px; padding: 12px 14px; border-radius: 14px; background: var(--nucleo); box-shadow: 0 0 0 1px var(--anillo);
}
.confirmar-baja p { display: flex; gap: 8px; align-items: flex-start; margin: 0; max-width: 64ch; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.confirmar-baja p .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--tinta-3); flex: none; }
.confirmar-baja .plata { font-weight: 600; color: var(--tinta); }
.nota-no-borra { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.nota-no-borra .ic { width: 15px; height: 15px; margin-top: 2px; flex: none; }
@media (pointer: coarse) {
  .cat-fila details.confirmar > summary { position: relative; }
  .cat-fila details.confirmar > summary::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .acciones-archivada button, .form-baja button, .opcion form button { min-height: 44px; }
}

/* Mes a mes: la tabla necesita ~820 px de panel. Con la barra de íconos, entre 901 y 1080 px no los tiene:
   ahí va la misma ficha por mes de la tableta (dos renglones, las cifras en columnas que se alinean). */
@media (min-width: 901px) and (max-width: 1080px) {
  .tabla-meses { overflow-x: visible; padding: 4px 22px; }
  .tabla-meses thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-meses :is(table, tbody) { display: block; }
  .tabla-meses tr {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 7rem);
    grid-template-areas: "mes mes quedo quedo" "barras entro salio pct";
    column-gap: 24px; row-gap: 14px; align-items: end; padding: 18px 2px; border-bottom: 1px solid var(--linea);
  }
  .tabla-meses tr:last-child { border-bottom: 0; }
  .tabla-meses td, .tabla-meses td.num { display: block; padding: 0; border: 0; text-align: left; }
  .tabla-meses .mes { grid-area: mes; }
  .tabla-meses .quedo { grid-area: quedo; justify-self: end; }
  .tabla-meses .barras { grid-area: barras; align-self: center; min-width: 0; }
  .tabla-meses .entro { grid-area: entro; }
  .tabla-meses .salio { grid-area: salio; }
  .tabla-meses .pct { grid-area: pct; }
  .tabla-meses :is(.entro, .salio, .pct) { text-align: right; font-size: var(--t-sm); }
  .tabla-meses .ir { display: none; }
  .tabla-meses td[data-rot]::before { content: attr(data-rot); display: block; font: 500 var(--t-xs)/1.4 var(--sans); color: var(--tinta-3); }
}

/* F10 · Gastos fijos (hallazgo H-001): al pie de cada fijo, "Cambiar" y la baja a la vista, lado a lado.
   El que se abre ocupa el ancho de la tarjeta y el otro queda donde estaba (nada salta de lugar). */
.pie-fijo { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.pie-fijo > details { margin-top: 0; }
.pie-fijo > details[open] { flex-basis: 100%; }
.pie-fijo > .baja-fijo > summary { color: var(--tinta-3); }
.pie-fijo > .baja-fijo > summary:hover, .pie-fijo > .baja-fijo[open] > summary { color: var(--tinta); }
.baja-fijo .confirmar-baja { margin-top: 10px; background: var(--nucleo-2); box-shadow: none; }
.baja-fijo .que-pasa li { max-width: none; }
.pie-fijo .confirmar-baja > form { margin-top: 0; }
.pie-fijo .form-baja-fijo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; width: 100%; }
.form-baja-fijo label.casilla { font-size: var(--t-sm); }
@media (pointer: coarse) {
  /* cada rótulo ya mide 44 px de alto: entre renglones no hace falta más aire */
  .pie-fijo { row-gap: 0; }
  .pie-fijo > details > summary { min-height: 44px; }
}

/* F10 · En celu nada queda debajo de la barra de abajo (hallazgo H-006). La isla mide 64 px y flota a 10 px
   del borde, más el área segura del iPhone. El pie de cada página deja ese alto y aire; lo que el navegador
   lleva a la vista (el foco con el teclado, un ancla, un formulario que se abre) se detiene arriba de ella. */
:root { --alto-abajo: calc(74px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) {
  main { padding-bottom: calc(var(--alto-abajo) + 56px); }
  html { scroll-padding-bottom: calc(var(--alto-abajo) + 16px); }
}

/* F10 · "De ahorro" en cada cuenta: la llave de Metas y ahorro (F7), arriba a la derecha de la tarjeta.
   Encendida, el ícono de la cuenta toma el verde del ahorro: se ve de lejos cuáles lo son. */
.cuenta .cab .cab-nombre { flex: 1; min-width: 0; }
.cuenta .cab .cab-nombre strong { overflow-wrap: anywhere; }
.cuenta .cab .form-ahorro { display: block; margin: 0; flex: none; align-self: flex-start; }
.cuenta.es-ahorro .cab .cat-ic { --c: var(--verde); }
.cuenta .aviso-cuenta { display: flex; gap: 8px; align-items: flex-start; width: auto; margin: 0; padding: 10px 12px; border-radius: 14px; font-size: var(--t-sm); line-height: 1.45; text-wrap: pretty; }
.cuenta .aviso-cuenta .ic { flex: none; margin-top: 2px; }

/* F10 · revisión: las cifras de las notas de "¿Qué hacemos con X?" (lo apartado del mes, lo sin cotizar) se leen
   como las de la lista de qué pasa, y no se parten entre el signo y el número. */
.nota-baja .plata { font-weight: 600; color: var(--tinta); white-space: nowrap; font-stretch: 94%; }

/* F10 · revisión: con el dedo, lo que se toca mide 44 px de verdad, no sólo por su área invisible (el ::after
   de "controles", que se pisa con el vecino): los botones y lo que se ve como botón (también los .mini y los de
   un ícono), las píldoras, los chips que llevan a algo, las flechas de mes, los campos, los enlaces sueltos, los
   rótulos de <details> de las tarjetas y los meses del piso y de Mes a mes. Los enlaces dentro de un renglón de
   texto quedan como están (la pauta los exime). */
@media (pointer: coarse) {
  main :is(button, .boton, .pildoras a, a.chip, .meses a) { min-height: 44px; }
  main :is(button, .boton).icono-solo, main .meses a { min-width: 44px; }
  main :is(input:not([type="radio"], [type="checkbox"]), select) { min-height: 44px; }
  main :is(.enlace, .cuenta details > summary, .como-se-calcula > summary) { min-height: 44px; }
  main :is(.cuenta-piso li > a, .tabla-meses .mes a) { display: inline-flex; align-items: center; min-height: 44px; }
  main .pildoras a { display: inline-flex; align-items: center; justify-content: center; }
  /* cada enlace ya mide 44: entre renglones no hace falta más aire */
  .cuenta .enlaces { row-gap: 0; }
  /* la fila de un pendiente: Confirmar y los dos íconos de 44, con su aire */
  .mov .acciones { --acciones-pend: 212px; }
}

/* F10 · revisión: en la tarjeta de /tarjetas, "Red" (cuatro opciones que no se parten) va en su propio renglón
   del formulario de dos columnas SÓLO donde no entra en media columna. Vuelta 2: se mide el formulario, no la
   ventana. Los cuatro botones piden 248 px; la media columna mide 155 a 240 px de 800 a 1279 px (a 920 se salía de
   la pantalla) y 199 a 236 de 1280 a 1440 (con la barra de 256 px, "Otra" quedaba cortada), y 274 a 344 de 641 a
   768 y a 901, donde entra y ahora queda al lado del nombre. Con el formulario en 540 px o menos, la media columna
   no llega a 264 (248 y un margen por la fuente). Y un fieldset no se estira más que su lugar. */
.tarjeta-pieza .formulario:has(> .red-campo) { container: datos-tarjeta / inline-size; }
@container datos-tarjeta (max-width: 540px) { .tarjeta-pieza .formulario .red-campo { grid-column: 1 / -1; } }
fieldset.red-campo { min-inline-size: 0; }
/* F11 · Calendario y a cobrar: la grilla del mes con sus marcas, el detalle del día, lo real y cómo
   quedarías, las tarjetas de lo a cobrar y la franja del Inicio ------------------------------------------
   Reusa .bisel/.nucleo, .panel-cab, .meses, .pildoras, .cuenta.fijo (las tarjetas, con .estado-fijo y
   .proximo-fijo), .sello, .chips, .segmento, .formulario, details.panel.nueva, .como-se-calcula/.cuenta-piso
   (F6) y .titulo-seccion (F7). Las marcas: verde lleno lo que entró, rojo lleno lo que salió, anillo verde lo
   que va a entrar (todavía no es real), anillo ámbar lo que vence, y el atraso con un triángulo rojo en la
   esquina. Relleno o anillo, un orden fijo y el texto del detalle: el color nunca es la única pista. */
.cal-mes { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--hueco); align-items: start; }
@media (max-width: 1100px) { .cal-mes { grid-template-columns: minmax(0, 1fr); } }
.cal-cab { align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.cal-cab-der { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* los puntos: también en la leyenda, el detalle y el Inicio */
.cal-punto { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 99px; }
.cal-punto.m-entro { background: var(--verde); }
.cal-punto.m-salio { background: var(--rojo); }
.cal-punto.m-cobrar { box-shadow: inset 0 0 0 2px var(--verde); }
.cal-punto.m-vence { box-shadow: inset 0 0 0 2px var(--ambar); }
.cal-punto.m-cierre { box-shadow: inset 0 0 0 2px var(--tinta-3); }

/* la grilla: una tabla de 7 columnas; cada día es un link que llena su celda */
.cal-grilla { width: calc(100% + 8px); margin: -4px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.cal-grilla :is(th, td) { padding: 0; border: 0; }
.cal-grilla th { padding-bottom: 2px; text-align: center; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-3); }
.cal-grilla abbr { text-decoration: none; }
.cal-grilla td { height: 1px; vertical-align: top; }
@media (hover: hover) { .cal-grilla tbody tr:hover { background: none; } }
.cal-dia {
  position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 92px;
  padding: 9px 9px 10px; border-radius: 12px; background: var(--nucleo-2); color: var(--tinta); text-decoration: none;
  transition: background-color 160ms var(--salida), box-shadow 160ms var(--salida), transform 140ms var(--rapida);
}
@media (hover: hover) { .cal-dia:hover { background: var(--nucleo-3); } }
.cal-dia .cal-num { align-self: flex-start; font: 600 var(--t-sm)/1 var(--display); font-variant-numeric: tabular-nums; color: var(--tinta-2); }
td.hoy .cal-num {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin: -4px 0 -3px -4px; padding: 0 5px;
  border-radius: 99px; background: var(--accion); color: var(--accion-texto);
}
td.elegido .cal-dia { background: var(--elegido); box-shadow: inset 0 0 0 1.5px var(--tinta), 0 10px 22px -14px var(--sombra-c); }
.cal-marcas { display: grid; gap: 4px; min-width: 0; }
.cal-marca {
  display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 var(--t-xs)/1.15 var(--display);
  font-stretch: 94%; font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--tinta-2); white-space: nowrap;
}
.cal-marca .cal-punto { width: 7px; height: 7px; }
.cal-marca .cal-monto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cal-marca.m-entro .cal-monto { color: var(--verde); }
.cal-marca.m-salio .cal-monto { color: var(--rojo); }
.cal-dia .cal-alerta { position: absolute; top: 8px; right: 8px; display: grid; color: var(--rojo); }
.cal-dia .cal-alerta .ic { width: 14px; height: 14px; }
.cal-ley { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--tinta-2); }
.cal-ley li { display: inline-flex; align-items: center; gap: 7px; }
.cal-ley .ic { width: 14px; height: 14px; color: var(--rojo); }
.cal-nota { margin-top: 12px; }

/* el detalle del día */
.dia-panel h2::first-letter { text-transform: uppercase; }
.dia-panel .panel-cab { margin-bottom: 12px; }
.dia-vacio { margin: 0; color: var(--tinta-2); }
.dia-grupo + .dia-grupo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); }
.dia-rot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; font: 600 var(--t-sm)/1.3 var(--sans); color: var(--tinta-2); }
.dia-rot > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.dia-rot .plata { font: 600 var(--t-md)/1.2 var(--display); font-stretch: 94%; }
.dia-lista { list-style: none; margin: 0 -8px; padding: 0; display: grid; gap: 2px; }
.dia-lista > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 10px; align-items: start; padding: 8px; border-radius: 12px; }
.dia-lista .cat-ic { width: 28px; height: 28px; border-radius: 9px; }
.dia-lista .cat-ic .ic { width: 16px; height: 16px; }
.dia-lista > li > .cat-ic:not([style]) { --c: var(--tinta-2); }
.dia-lista .que { display: grid; gap: 2px; min-width: 0; line-height: 1.35; }
.dia-lista .que strong { font-size: var(--t-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-lista .que > span { font-size: var(--t-xs); color: var(--tinta-3); text-wrap: pretty; }
.dia-lista .que > .estado-dia { color: var(--tinta-2); }
.dia-lista > li.atrasado .estado-dia { color: var(--rojo); font-weight: 600; }
.dia-lista > li > .plata { display: grid; justify-items: end; font: 600 var(--t-sm)/1.35 var(--display); font-stretch: 94%; font-variant-numeric: tabular-nums; }
.dia-lista .plata .equiv { font: 500 var(--t-xs)/1.4 var(--sans); color: var(--tinta-3); }
.dia-lista .plata.tenue { color: var(--tinta-3); }
.acciones-dia { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.acciones-dia .un-toque { display: flex; margin: 0; }
.ya-llego > summary { list-style: none; width: fit-content; }
.ya-llego[open] { flex: 1 1 100%; }
.form-llego {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; padding: 12px;
  border-radius: 14px; background: var(--nucleo-2);
}
.form-llego .todo { grid-column: 1 / -1; }
.form-llego :is(input, select) { background-color: var(--nucleo); border-color: var(--campo-aro); }
.form-llego :is(input, select):focus { border-color: var(--foco); }
.form-llego button { justify-self: start; }
.dia-mas { margin-top: 6px; }
.dia-anotar { margin-top: 18px; }

/* lo real y cómo quedarías */
.cal-numeros { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--hueco); margin-top: var(--hueco); align-items: start; }
.cal-numeros > .ancho-total { grid-column: 1 / -1; }
@media (max-width: 1100px) { .cal-numeros { grid-template-columns: minmax(0, 1fr); } }
/* lo real y la proyección son la misma cuenta a la vista: renglones que suman y el resultado bajo la raya */
.proy-suma { margin: 0; }
.proy-suma > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.proy-suma > div:nth-last-child(2) { border-bottom: 0; }
.proy-suma dt { font-size: var(--t-sm); font-weight: 500; color: var(--tinta-2); }
.proy-suma dt small {
  display: inline-grid; place-items: center; min-width: 20px; margin-left: 6px; padding: 1px 6px; border-radius: 99px;
  background: var(--nucleo-2); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.proy-suma dd { margin: 0; font: 600 var(--t-md)/1.2 var(--display); font-stretch: 94%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proy-suma > .total { margin-top: 2px; padding-top: 14px; border-top: 2px solid var(--tinta); border-bottom: 0; }
.proy-suma .total dt { font: 600 var(--t-base)/1.3 var(--sans); color: var(--tinta); }
.proy-suma .total dd { font: 600 clamp(30px, 3.4vw, 40px)/1 var(--display); letter-spacing: -.024em; font-stretch: 88%; font-optical-sizing: auto; }
.proy-nota { margin-top: 14px; }

/* lo a cobrar: la tarjeta de Fijos, con sus estados */
.cobros-resumen { margin-bottom: 14px; }
.cobro .estado-fijo .enlace { color: inherit; }
.estado-fijo.en-curso .ic, .estado-fijo.no-vino .ic { color: var(--tinta-3); }
.vacio-cobros + details.panel { margin-top: calc(var(--hueco) + var(--aro)); }
.formulario.form-cobro .solo-mensual { display: none; }
.formulario.form-cobro:has(input[name="frecuencia"][value="mensual"]:checked) .solo-mensual { display: grid; }
.formulario.form-cobro:has(input[name="frecuencia"][value="mensual"]:checked) .solo-una-vez { display: none; }
.formulario.form-cobro .fila-nueva { grid-column: 1 / span 3; }
.form-cobro label small, .form-cambiar-cobro label small { font-weight: 400; }
@media (max-width: 700px) {
  .formulario.form-cobro .fila-nueva { grid-column: 1 / -1; }
  .formulario.form-cobro :is(.solo-una-vez, .solo-mensual) { grid-column: span 1; }
}

/* el Inicio: lo que viene esta semana */
.semana-panel .panel-cab { margin-bottom: 12px; }
.semana-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 8px; }
.semana-items a {
  display: grid; align-content: start; gap: 6px; height: 100%; padding: 12px 14px; border-radius: 14px; background: var(--nucleo-2);
  color: var(--tinta); text-decoration: none; transition: background-color 180ms var(--salida), transform 140ms var(--salida);
}
@media (hover: hover) { .semana-items a:hover { background: var(--nucleo-3); } }
.semana-items .cuando { font-size: var(--t-xs); font-weight: 600; color: var(--tinta-3); }
.semana-items .n { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-sm); font-weight: 600; }
.semana-items .n > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.semana-items .plata { font: 600 var(--t-md)/1.15 var(--display); font-stretch: 94%; font-variant-numeric: tabular-nums; }
.semana-items .que-es { font-size: var(--t-xs); line-height: 1.4; color: var(--tinta-3); text-wrap: pretty; }
.dia-lista .estado-dia .plata { font-weight: 600; }
.semana-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 12px 0 0; font-size: var(--t-sm); color: var(--tinta-2); }
.semana-pie b { font-weight: 600; color: var(--tinta); }
.semana-atraso {
  display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px;
  background: var(--rojo-suave); color: var(--rojo); font-size: var(--t-sm); line-height: 1.45; text-wrap: pretty;
}
.semana-atraso .ic { margin-top: 1px; }
.semana-atraso a { color: inherit; font-weight: 600; }
.semana-vacia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: var(--tinta-2); }

/* celu: la grilla de puntos (a 390 px cada día mide 44 px o más) y la semana como lista */
@media (max-width: 640px) {
  .cal-grilla-panel .nucleo { padding: 14px 8px 16px; }
  .cal-grilla-panel :is(.cal-cab, .cal-ley, .cal-nota) { padding-inline: 6px; }
  .cal-grilla { width: calc(100% + 6px); margin: -3px; border-spacing: 3px; }
  .cal-dia { align-items: center; gap: 6px; min-height: 50px; padding: 7px 2px; border-radius: 10px; }
  .cal-dia .cal-num { align-self: center; }
  td.hoy .cal-num { margin: -4px 0 -3px; }
  .cal-marcas { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .cal-marca .cal-monto { display: none; }
  .cal-marca .cal-punto { width: 6px; height: 6px; }
  .cal-marca .cal-punto.m-cobrar { box-shadow: inset 0 0 0 1.5px var(--verde); }
  .cal-marca .cal-punto.m-vence { box-shadow: inset 0 0 0 1.5px var(--ambar); }
  .cal-dia .cal-alerta { top: 3px; right: 3px; }
  .cal-dia .cal-alerta .ic { width: 11px; height: 11px; }
  .cal-ley { gap: 6px 14px; font-size: var(--t-xs); }
  .semana-items { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 -8px; }
  .semana-items li { position: relative; }
  .semana-items li + li::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--linea); }
  .semana-items a { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 11px 8px; background: none; border-radius: 12px; }
  .semana-items .cuando { text-wrap: balance; }
  .semana-items .que-es { text-align: end; }
  .semana-items .nota-cierre { display: none; }
}

/* con el dedo, lo que se toca en el detalle y en las tarjetas de "A cobrar" responde en 44 × 44 (la caja
   que se ve mide 21 a 30 px; su ::after, 44) */
@media (pointer: coarse) {
  :is(.acciones-dia, .cobro .estado-fijo, .cobro details) :is(button, summary), .cobro details > summary, .dia-anotar { position: relative; }
  :is(.acciones-dia, .cobro .estado-fijo, .cobro details) :is(button, summary)::after, .cobro details > summary::after, .dia-anotar::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .form-llego :is(button, select, input), .form-cobro button, .form-cambiar-cobro button { min-height: 44px; }
}

/* vuelta 1: lo cargado sin decir de quién que le encaja a esta vez (¿era ése?) */
.dia-lista .que > .estado-dia.ambiguo { color: var(--tinta); font-weight: 600; }
.cobro .estado-fijo .chico { margin: 0; color: var(--tinta-2); text-wrap: pretty; }
.form-cobro > .aviso { margin: 0; }
/* vuelta 2: Confirmar con la duda trae al día a elegir si era ése o si llegó aparte */
.aviso.duda { border-radius: 16px; align-items: flex-start; text-wrap: pretty; }
.aviso.duda .ic { flex: none; margin-top: 3px; }

@media (prefers-reduced-motion: no-preference) {
  /* al tocar otro día, su detalle llega (lo demás de la página se queda quieto) */
  #cal-mes.htmx-added .dia-panel .nucleo { animation: aparecer 260ms var(--salida) both; }
  .cal-dia:active, .semana-items a:active { transform: scale(.97); }
}

/* F12 · Analizador y alertas ---------------------------------------------------------------------------
   El porcentaje es una barra de 100 puntos, no un anillo: se lee de izquierda a derecha como el ritmo del
   mes, con cortes donde empieza cada banda (40, 60, 80). El color de la banda lo pone --banda. Las partes
   van en una lista con su cuenta a la vista; las alertas, en renglones como "Para mirar", con la gravedad
   en la ficha del ícono (nada de rayas de color al costado). Todos los anchos (--p, --en) vienen del
   servidor. */
.banda-bien { --banda: var(--verde); }
.banda-mas_o_menos { --banda: var(--ambar); }
.banda-ajustado { --banda: color-mix(in srgb, var(--ambar) 45%, var(--rojo)); }
.banda-en_rojo { --banda: var(--rojo); }

/* la barra: lo que queda del puntaje, sobre una pista con los cortes de las bandas */
.escala {
  position: relative; height: 10px; overflow: hidden; border-radius: 99px;
  background: var(--nucleo-3); box-shadow: inset 0 0 0 1px var(--anillo);
}
.escala.grande { height: 14px; }
.escala .lleno {
  position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit;
  background: var(--banda, var(--tinta)); transform-origin: left;
}
.escala .corte { position: absolute; top: 0; bottom: 0; left: var(--en); width: 2px; margin-left: -1px; background: var(--nucleo); }
.escala-ley {
  display: grid; grid-template-columns: 40fr 20fr 20fr 20fr; margin-top: 8px;
  font-size: var(--t-xs); color: var(--tinta-3); text-align: center;
}
.escala-ley span { min-width: 0; padding: 0 2px; line-height: 1.25; text-wrap: balance; }
.escala-ley .aca { color: var(--banda); font-weight: 600; }

/* Inicio: la pieza de arriba, en una fila: el número, la barra con la recomendación y los enlaces */
.analizador-inicio .nucleo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 32px;
  padding-block: 18px;
}
.analizador-inicio h2 { font: 500 var(--t-sm)/1.3 var(--sans); letter-spacing: 0; color: var(--tinta-2); }
.ai-cifra { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 0; }
.ai-cifra .puntaje {
  font: 600 clamp(38px, 4.2vw, 48px)/1 var(--display); letter-spacing: -.028em; font-stretch: 88%;
  font-optical-sizing: auto; font-variant-numeric: tabular-nums;
}
.ai-cifra .de, .puntaje-grande .de { font: 500 var(--t-base)/1 var(--sans); color: var(--tinta-2); }
.ai-banda, .cv-banda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; font-weight: 600; color: var(--banda); }
.ai-banda { font-size: var(--t-sm); }
.ai-sin { margin: 6px 0 0; font: 600 var(--t-md)/1.25 var(--display); letter-spacing: -.01em; }
.ai-medio { display: grid; gap: 12px; min-width: 0; }
.ai-texto { display: flex; gap: 8px; align-items: flex-start; margin: 0; max-width: 72ch; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.ai-texto .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.de-claude { color: var(--tinta); }
.ai-enlaces { display: grid; justify-items: end; gap: 10px; }
.contador.urgente { background: var(--rojo); }
.boton .contador { margin-left: 2px; }
@media (max-width: 760px) {
  .analizador-inicio .nucleo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ai-enlaces { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 8px; }
}

/* la pantalla: el número y la barra (5 columnas) al lado de qué conviene hacer (7); la cuenta, abajo */
.analizador { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
.como-vengo { grid-column: span 5; }
.recos-panel { grid-column: span 7; }
.partes-panel { grid-column: 1 / -1; }
@media (max-width: 1100px) { .como-vengo, .recos-panel { grid-column: 1 / -1; } }
@media (min-width: 1101px) {
  .analizador > .como-vengo, .analizador > .recos-panel { align-self: stretch; }
  .como-vengo .nucleo { display: flex; flex-direction: column; }
  .como-vengo .cv-notas { margin-top: auto; }
}
.puntaje-grande { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.puntaje-grande .n {
  font: 600 clamp(64px, 7.4vw, 92px)/.9 var(--display); letter-spacing: -.03em; font-stretch: 86%;
  font-optical-sizing: auto; font-variant-numeric: tabular-nums;
}
.cv-banda { font-size: var(--t-md); }
.cv-escala { margin-top: 26px; }
.cv-notas { display: grid; gap: 6px; padding-top: 22px; }
.cv-notas p { margin: 0; max-width: 52ch; font-size: var(--t-sm); line-height: 1.5; text-wrap: pretty; }
.cv-notas b { font-weight: 600; }
.cv-sin { font: 600 var(--t-xl)/1.1 var(--display); letter-spacing: -.02em; }
.cv-motivo { margin: 10px 0 8px; max-width: 52ch; line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }

/* qué conviene hacer: un renglón por recomendación, cada uno lleva a lo suyo */
.recos { display: grid; gap: 2px; margin: 0 -8px; padding: 0; list-style: none; }
.recos a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px;
  min-height: 44px; padding: 10px 8px; border-radius: 14px; color: var(--tinta); text-decoration: none;
  transition: background-color 180ms var(--salida);
}
.recos a:hover { background: var(--nucleo-2); }
.reco-ic { --c: var(--tinta-3); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; flex: none;
           color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.reco-ic.de-claude { --c: var(--tinta); }
.reco-ic .ic { width: 16px; height: 16px; }
.recos .que { padding-top: 4px; line-height: 1.5; max-width: 72ch; text-wrap: pretty; }
.recos .ir { width: 16px; height: 16px; margin-top: 7px; color: var(--tinta-3); transition: transform 220ms var(--salida); }
.recos a:hover .ir { transform: translateX(3px); }
.recos-panel .panel-cab, .partes-panel .panel-cab { flex-wrap: wrap; row-gap: 2px; }
.recos-panel .panel-cab h2, .partes-panel .panel-cab h2 { white-space: nowrap; }
.recos-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 16px; }
.recos-pie .pie-nota { margin: 0; max-width: 48ch; }
.actualizar small { font-size: var(--t-xs); font-weight: 500; color: var(--tinta-3); }

/* cómo se calcula: siete renglones en dos columnas, cada uno con lo que resta a la derecha */
.partes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 900px) { .partes { grid-template-columns: minmax(0, 1fr); } }
.parte { display: grid; align-content: start; gap: 6px; padding: 16px 0; border-top: 1px solid var(--linea); min-width: 0; }
.parte-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.parte h3 { font: 600 var(--t-base)/1.3 var(--sans); letter-spacing: 0; }
.parte-pts { flex: none; font: 600 var(--t-md)/1 var(--display); font-variant-numeric: tabular-nums; color: var(--tinta-3); white-space: nowrap; }
.parte-pts small { font: 500 var(--t-xs) var(--sans); color: var(--tinta-3); }
.con-resta .parte-pts { color: var(--rojo); }
.parte-pts.sin { font: 600 var(--t-xs)/18px var(--sans); padding: 0 8px; border-radius: 99px; color: var(--tinta-2); background: var(--nucleo-2); box-shadow: inset 0 0 0 1px var(--anillo); }
.parte-texto { margin: 0; max-width: 64ch; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta); text-wrap: pretty; }
.sin-datos .parte-texto { color: var(--tinta-2); }
.parte-regla { margin: 0; max-width: 64ch; font-size: var(--t-xs); line-height: 1.5; color: var(--tinta-3); text-wrap: pretty; }
.parte-cuenta {
  display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 8px; background: var(--nucleo-2);
  font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta);
}
.parte .enlace { margin-top: 2px; width: fit-content; }
.cuenta-total {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
  margin: 8px 0 0; padding: 18px 0 0; border-top: 1px solid color-mix(in srgb, var(--tinta-3) 40%, transparent);
}
.cuenta-total .plata { font: 600 var(--t-lg)/1.2 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }

/* la bandeja: un panel por grupo, un renglón por alerta, en una columna: la X queda cerca del texto */
.alertas-hoja { max-width: 920px; }
.alertas-cuenta { margin: 0; }
.alertas-grupos { display: grid; gap: calc(var(--hueco) + 2 * var(--aro)); }
.alertas-grupos > .panel { margin-block: 0; }
.alertas-grupo .panel-cab { align-items: center; margin-bottom: 6px; }
.alertas-grupo h2 { display: flex; align-items: center; gap: 8px; }
.alertas-grupo h2 .ic { color: var(--tinta-2); }
.grupo-n {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px;
  font: 600 var(--t-xs)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--tinta-2); background: var(--nucleo-2);
}
.grupo-n.urgente { color: var(--rojo); background: var(--rojo-suave); }
.alertas-lista { margin: 0; padding: 0; list-style: none; }
.alerta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 0; }
.alerta + .alerta { border-top: 1px solid var(--linea); }
.alertas-lista > .alerta:last-child { padding-bottom: 0; }
.alerta-ic { --c: var(--tinta-3); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px;
             color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.alerta-ic .ic { width: 17px; height: 17px; }
.alerta.g-urgente .alerta-ic { --c: var(--rojo); }
.alerta.g-aviso .alerta-ic { --c: var(--ambar); }
.alerta .que { display: grid; justify-items: start; gap: 3px; min-width: 0; max-width: 72ch; margin: 0; padding-top: 5px; }
.alerta .que strong { font-weight: 600; overflow-wrap: anywhere; }
.alerta .que > span { font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.alerta .que .enlace { margin-top: 4px; }
.alerta .descartar button { margin: -2px -6px 0 0; }
.alerta.descartada .que { font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); }
.alerta.descartada .alerta-ic { --c: var(--tinta-3); }
.alerta.descartada form { align-self: center; }
details.descartadas > summary {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 4px; cursor: pointer;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
}
details.descartadas > summary .ic { width: 15px; height: 15px; transition: transform 220ms var(--salida); }
details.descartadas[open] > summary .ic { transform: rotate(90deg); }
details.descartadas > summary .chico { font-weight: 400; }
.alertas-grupos + details.descartadas, .alertas-vacia + details.descartadas { margin-top: calc(var(--hueco) + var(--aro)); }
.alertas-nota { display: flex; gap: 8px; align-items: flex-start; margin: calc(var(--hueco) + var(--aro)) 7px 0; max-width: 70ch;
                font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-3); }
.alertas-nota .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }

@media (pointer: coarse) {
  .actualizar, .alerta .mini, details.descartadas > summary { min-height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* un solo momento: la barra se llena desde la izquierda */
  .escala .lleno { animation: crecer-x 900ms var(--salida) both; animation-delay: 200ms; }
  .alerta.htmx-added { animation: aparecer 320ms var(--salida) both; }
}

/* Arreglos del tester (23/09) -------------------------------------------------------------------------
   H-005: la transición entre páginas termina en su primer cuadro (no se come los toques); un formulario
   que viaja deja su botón quieto y deshabilitado, con un anillo que gira en el lugar del ícono; el error
   sale en el mismo formulario; lo que se hizo se ve siempre (el cartel verde flota y se va solo).
   H-003: la compra con tarjeta en su fecha, que no suma, y las compras de cada resumen en Tarjetas.
   H-007: qué es el monto que viene en "Pagar". H-008: en el celu, el nombre de un movimiento se lee. */

/* El grupo raíz traía la animación de 250 ms del navegador: mientras duraba, cada toque iba a la capa de
   la transición y se perdía. Sin ella, la página nueva se ve igual (entera, sin fundido) y responde ya. */
::view-transition-group(root) { animation: none; }

/* el formulario que viaja: el botón no se apaga (está trabajando, no deshabilitado) */
form[data-envio].htmx-request button[type="submit"] { opacity: 1; cursor: progress; }
form[data-envio].htmx-request button[type="submit"] > .ic,
form[data-envio].htmx-request button[type="submit"] .nido > .ic { display: none; }
form[data-envio].htmx-request button[type="submit"]:not(:has(.nido))::before,
form[data-envio].htmx-request button[type="submit"] .nido::before {
  content: ""; flex: none; box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: envio-gira 720ms linear infinite;
}
@keyframes envio-gira { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  form[data-envio].htmx-request button[type="submit"]:not(:has(.nido))::before,
  form[data-envio].htmx-request button[type="submit"] .nido::before { animation-duration: 1.8s; }
}

/* el error de un formulario, en el formulario, arriba de su botón */
.envio-error:empty { display: none; }
.envio-mensaje {
  display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: 14px;
  font-size: var(--t-sm); font-weight: 500; line-height: 1.45; text-wrap: pretty;
}
.envio-mensaje .ic { flex: none; margin-top: 1px; }
.envio-mensaje.error { background: var(--rojo-suave); color: var(--rojo); }

/* Lo que se hizo se ve siempre: el cartel verde flota arriba de lo que se está mirando (la página puede
   volver bajando hasta una tarjeta o una meta) y se va solo. No ataja toques: lo de abajo sigue vivo. */
main > .aviso.ok {
  position: fixed; z-index: 35; top: calc(84px + env(safe-area-inset-top)); left: 50%; margin: 0;
  max-width: min(560px, calc(100vw - 32px)); translate: -50% 0; pointer-events: none;
  box-shadow: 0 16px 32px -18px var(--sombra-c), 0 2px 6px -3px rgb(30 44 66 / .14);
  animation: aviso-llega 420ms var(--salida) both, aviso-se-va 360ms var(--salida) 4.5s forwards;
}
@media (max-width: 900px) { main > .aviso.ok { top: calc(12px + env(safe-area-inset-top)); } }
@keyframes aviso-llega { from { opacity: 0; translate: -50% -10px; } }
@keyframes aviso-se-va { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { main > .aviso.ok { animation: aviso-se-va 300ms linear 4.5s forwards; } }

/* H-003: la compra en su fecha no suma: el total sin signo y en gris, con "no suma acá" debajo. Desde
   Tarjetas se llega a ella con un ancla: queda a la vista, debajo del menú de arriba */
.mov.compra-fila > .plata { color: var(--tinta-2); }
[id^="compra-"] { scroll-margin-top: 112px; }
.mov.compra-fila > .plata .equiv { color: var(--tinta-3); }

/* H-003: en Tarjetas, qué compras forman cada resumen; toda la fila lleva a su edición */
.compras-tarjeta { margin-top: 2px; }
.compras-lista { list-style: none; margin: 6px 0 0; padding: 0; }
.compras-lista li {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px;
  padding: 8px 0; font-size: var(--t-sm); line-height: 1.4;
}
.compras-lista li + li { border-top: 1px solid var(--linea); }
.compras-lista a { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.compras-lista a::after { content: ""; position: absolute; inset: 0; }
.compras-lista li:hover a { text-decoration-color: currentColor; }
.compras-lista .tenue { grid-row: 2; font-size: var(--t-xs); }
.compras-lista .plata { grid-column: 2; grid-row: 1 / 3; align-self: center; font-weight: 600; color: var(--tinta); }

/* H-007: qué es el monto que viene puesto en "Pagar", debajo del campo; los campos arrancan arriba
   (así "Sale de" queda a la altura del monto y no de la nota) */
.sugerencia-pago { font-weight: 400; }
.tarjeta-pieza .formulario:has(.sugerencia-pago) { align-items: start; }

@media (max-width: 640px) {
  /* H-008: el nombre en dos renglones (y entero al tocarlo); los datos de abajo, enteros */
  .mov .que strong .nombre {
    white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .mov.entera .que strong .nombre { display: block; -webkit-line-clamp: unset; line-clamp: none; }
  .mov .que > span { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
}

/* F13 · Inversiones y patrimonio: el total invertido con su barra por tipo, una pieza por cuenta de
   inversión con sus posiciones, el patrimonio con sus donas y su evolución, cuentas y bienes, y la
   pieza del Inicio. Reusa .bisel/.nucleo, .rotulo-grande, .cifra, la dona entera, .pildoras,
   .segmento, .formulario, .interruptor, .sello, .nota, .ritmo-ley, .datos-ahorro y .lista-cerradas.
   Todo ancho y coordenada viene hecho del servidor (--w, los caminos del SVG). ------------------------ */
.inv-hoja { display: grid; gap: var(--hueco); }
:is(.inv-hoja, .inv-vacio) + details.panel { margin-top: calc(var(--hueco) + 2 * var(--aro)); }
:is(.inv-hoja, .inv-vacio) + details.panel:not([open]) { margin-top: calc(var(--hueco) + var(--aro)); }
/* un monto con lo que lo acompaña ("$ 82.430 cada 100", "− $ 2.545.843 de deudas.") no se parte; tampoco
   el de un precio en duda ("US$ 0,0000001", vuelta 3) */
:is(.pos-cuenta, .patrimonio .bajada, .linea-precio, .notas-inv) .junto { white-space: nowrap; }
.inv-resumen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px 40px; align-items: start; }
.inv-resumen .rotulo-grande { margin-top: 0; }
.inv-resumen .bajada { margin-top: 12px; }
.inv-tipos { padding-top: 6px; min-width: 0; }
.inv-resumen > .notas-inv, .inv-resumen > .precios-form { grid-column: 1 / -1; }
@media (max-width: 900px) { .inv-resumen { grid-template-columns: minmax(0, 1fr); } }

/* el color de cada tipo llega del servidor (--c-tipo); en claro va su versión para fondo claro si la
   tiene (--c-claro: el dorado de Cripto no llegaba a 3:1 contra la tarjeta), en oscuro el de siempre */
:is(.pos, .pos-mini, .leyenda-tipos li, .barra-tipos > span) { --c: var(--c-claro, var(--c-tipo)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.pos, .pos-mini, .leyenda-tipos li, .barra-tipos > span) { --c: var(--c-tipo); }
}
:root[data-theme="dark"] :is(.pos, .pos-mini, .leyenda-tipos li, .barra-tipos > span) { --c: var(--c-tipo); }

/* la barra por tipo: un segmento por tipo, con el ancho del servidor; en oscuro el color se aclara */
.barra-tipos {
  display: flex; height: 16px; border-radius: 99px; overflow: hidden;
  background: var(--nucleo-3); box-shadow: inset 0 0 0 1px var(--anillo);
}
.barra-tipos > span {
  flex: 0 0 var(--w); min-width: 3px; transform-origin: left;
  background: color-mix(in srgb, var(--c) var(--cat-tinta), white);
}
.barra-tipos > span + span { box-shadow: -2px 0 0 var(--nucleo); }
.leyenda-tipos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.leyenda-tipos li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 38px; gap: 10px; align-items: center;
  padding: 6px 0; font-size: var(--t-sm);
}
.leyenda-tipos li + li { border-top: 1px solid var(--linea); }
.leyenda-tipos .punto { width: 10px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--c) var(--cat-tinta), white); }
.leyenda-tipos .n { color: var(--tinta); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.leyenda-tipos .plata { font-weight: 600; font-stretch: 94%; font-variant-numeric: tabular-nums; }
.leyenda-tipos .pct { text-align: right; font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* lo que no suma, lo viejo y lo que no se pudo traer: siempre a la vista */
.notas-inv { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--linea); display: grid; gap: 8px; }
.notas-inv li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.notas-inv li .ic { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--tinta-3); }
.notas-inv li.mal, .notas-inv li.mal .ic { color: var(--ambar); }
.notas-inv li.suave { color: var(--tinta-3); }
.notas-inv b { font-weight: 650; }
.precios-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 16px; border-top: 1px solid var(--linea); }
.notas-inv + .precios-form { border-top: 0; padding-top: 4px; }
.precios-form .chico { max-width: 60ch; text-wrap: pretty; }

/* una cuenta de inversión */
.inv-cab { display: flex; align-items: center; gap: 12px 14px; }
.inv-cab .cat-ic { --c: var(--tinta-2); }
.inv-nombre { flex: 1; min-width: 0; }
.inv-nombre h2 { font-size: var(--t-lg); line-height: 1.15; overflow-wrap: anywhere; }
.inv-nombre p { margin: 3px 0 0; }
.inv-valor { display: grid; justify-items: end; gap: 2px; text-align: right; }
.inv-valor .alerta-saldo { font-size: var(--t-xs); }
@media (max-width: 640px) {
  .inv-cab { flex-wrap: wrap; }
  .inv-valor { flex: 1 0 100%; justify-items: start; text-align: left; padding-left: 46px; }
}
.plata-libre {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 14px;
  margin: 18px 0 4px; padding: 10px 14px; border-radius: 14px; background: var(--nucleo-2);
}
.plata-libre .rot { gap: 7px; }
.plata-libre .plata { font-weight: 600; font-size: var(--t-md); }
@media (max-width: 640px) {
  .plata-libre { grid-template-columns: minmax(0, 1fr) auto; }
  .plata-libre .enlace { grid-column: 1 / -1; justify-self: start; }
}
.cuenta-inv .nota { margin: 10px 0 0; }
.sin-pos { margin: 16px 0 0; }

/* las posiciones: ficha, qué es, cuánto vale; las acciones debajo, abiertas en el lugar */
.posiciones { list-style: none; margin: 10px -8px 0; padding: 0; }
.pos {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px;
  align-items: start; padding: 14px 8px;
}
.pos + .pos::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--linea); }
.pos > .chip-cat { margin-top: 2px; }
.pos-que { display: grid; gap: 2px; min-width: 0; }
.pos-que strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 600; }
.pos .simbolo { font: 600 var(--t-md)/1.2 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.pos .tipo-pos { font-size: var(--t-xs); font-weight: 500; color: var(--tinta-3); }
.pos-cuenta { font-size: var(--t-sm); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.linea-precio { display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-xs); line-height: 1.45; color: var(--tinta-3); text-wrap: pretty; }
.linea-precio .ic { width: 13px; height: 13px; margin-top: 2px; flex: none; }
.linea-precio.viejo, .linea-precio.mal { color: var(--ambar); }
/* «Tomar $ 1.029,50»: el precio que saltó, para tomarlo si fue un split (con confirmación) */
.tomar-precio { margin: 2px 0 0; }
.tomar-precio button { padding: 0; gap: 6px; font-size: var(--t-xs); font-weight: 650; color: var(--tinta); }
.tomar-precio button:hover, .tomar-precio button:focus-visible { background: none; text-decoration: underline; }
.tomar-precio button .ic { width: 14px; height: 14px; }
.pos-valor { display: grid; justify-items: end; gap: 1px; text-align: right; }
.pos-valor .plata { font: 600 var(--t-md) var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pos-valor .equiv { font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.pos-valor .sin { font-size: var(--t-sm); color: var(--ambar); font-weight: 600; }
.pos.vendida .simbolo, .pos.vendida .pos-cuenta { color: var(--tinta-3); }
.pos > .todo-fila { grid-column: 1 / -1; }
.aviso.dentro { margin: 10px 0 0; border-radius: 14px; width: auto; }

/* acciones que se abren en el lugar: el botón queda, el formulario ocupa el ancho sobre gris */
.acciones-pos, .acciones-inv, .acciones-bien { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; }
.acciones-pos { grid-column: 2 / -1; margin-top: 6px; }
.acciones-inv { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linea); gap: 10px; }
.acciones-bien { grid-column: 2 / -1; margin-top: 4px; }
:is(.acciones-pos, .acciones-inv, .acciones-bien) > details { min-width: 0; }
:is(.acciones-pos, .acciones-inv, .acciones-bien) > details[open] { flex: 1 0 100%; order: 2; }
:is(.acciones-pos, .acciones-bien) > details > summary, :is(.vendidas, .numeros) > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
}
:is(.acciones-pos, .acciones-bien) > details > summary:hover, :is(.vendidas, .numeros) > summary:hover { color: var(--tinta); }
:is(.acciones-pos, .acciones-bien) > details[open] > summary { color: var(--tinta); }
:is(.acciones-pos, .acciones-bien) summary .ic, :is(.vendidas, .numeros) > summary .ic { width: 15px; height: 15px; }
.acciones-inv > details > summary { list-style: none; width: fit-content; }
.borrar-cuenta { margin-left: auto; }
/* Borrar una posición o un bien se lee como las otras acciones de la fila, más apagado y rojo al pasar */
.borrar-pos button { padding: 0; gap: 6px; font-size: var(--t-sm); color: var(--tinta-3); }
.borrar-pos button:hover, .borrar-pos button:focus-visible { background: none; color: var(--rojo); }
.borrar-pos button .ic { width: 15px; height: 15px; }
.form-pos { margin-top: 12px; padding: 18px; border-radius: 18px; background: var(--nucleo-2); }
.form-pos :is(input:not([type="radio"], [type="checkbox"]), select) { background-color: var(--nucleo); border-color: var(--campo-aro); }
.form-pos :is(input:not([type="radio"], [type="checkbox"]), select):hover { border-color: var(--tinta-3); }
.form-pos :is(input, select):focus { border-color: var(--foco); }
.form-pos .segmento { background: var(--nucleo-3); }
/* el rótulo del precio, como Sandía: lo elige la opción marcada del tipo (data-auto, data-cada) */
.form-pos :is(.solo-auto, .solo-cada) { display: none; }
.form-pos:has(select[name="tipo"] option[data-auto]:checked) .solo-auto,
.form-pos:has(select[name="tipo"] option[data-cada]:checked) .solo-cada { display: inline; }
.form-pos .nota-form { margin: 0; }
.form-pos button { justify-self: start; }

/* ¿con qué plata?: sólo los campos de lo elegido, sin JavaScript */
.form-pos :is(label.con-plata, label.solo-otra, p.solo-cuenta, p.solo-otra) { display: none; }
.form-pos:has(input[name="plata"][value="cuenta"]:checked) label.con-plata,
.form-pos:has(input[name="plata"][value="otra"]:checked) :is(label.con-plata, label.solo-otra) { display: grid; }
.form-pos:has(input[name="plata"][value="cuenta"]:checked) p.solo-cuenta,
.form-pos:has(input[name="plata"][value="otra"]:checked) p.solo-otra { display: block; }
.form-pos:has(input[name="plata"]:not([value="nada"]):checked) p.solo-nada { display: none; }
.segmento input:disabled + span { opacity: .45; cursor: not-allowed; }
.segmento.opciones-plata { max-width: 620px; }
@media (max-width: 640px) {
  .segmento.opciones-plata { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .segmento.opciones-plata label > span { border-radius: 16px; white-space: normal; }
}

/* lo anotado de una posición */
.anotado { list-style: none; margin: 10px 0 0; padding: 4px 14px; border-radius: 16px; background: var(--nucleo-2); }
.anotado li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; font-size: var(--t-sm); }
.anotado li + li { border-top: 1px solid var(--linea); }
.anotado .fecha { color: var(--tinta-3); font-variant-numeric: tabular-nums; min-width: 3.2em; }
.anotado .que { color: var(--tinta); text-wrap: pretty; }
.anotado .icono-solo { color: var(--tinta-3); }
.anotado .icono-solo:hover { color: var(--rojo); }
.vendidas { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.vendidas .posiciones { margin-top: 4px; }

/* patrimonio: el total arriba, sin el aire del selector de mes del Inicio */
.patrimonio .resumen .rotulo-grande { margin-top: 0; padding-top: 0; }
.patrimonio .resumen .bajada { margin-top: 12px; }
.lista-cuentas { grid-column: span 7; }
.lista-bienes { grid-column: span 5; }
@media (max-width: 1100px) { .lista-cuentas, .lista-bienes { grid-column: 1 / -1; } }
.var-pat { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.var-pat .ic { width: 14px; height: 14px; }
.var-pat.sube { color: var(--verde); }
.var-pat.baja { color: var(--rojo); }
/* los cuatro bloques, de a dos: en cuatro columnas los montos de siete cifras no entran */
.bloques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: auto; padding-top: 26px; }
.bloques a {
  display: grid; align-content: start; gap: 4px; min-width: 0; padding: 14px 12px 12px 0;
  border-top: 1px solid var(--linea); color: var(--tinta); text-decoration: none;
}
.bloques a:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--linea); }
.bloques .rot { transition: color 180ms var(--salida); }
.bloques a:hover .rot { color: var(--tinta); }
.bloques .cifra-s { font-size: var(--t-md); overflow: hidden; text-overflow: ellipsis; }
.notas-pat { margin-top: 18px; }
.grafico-panel .panel-cab { flex-wrap: wrap; align-items: center; }
.pestanas a, .rangos a { white-space: nowrap; }

/* la evolución: una línea con su área; lo reconstruido, punteado y más tenue */
.grafico { margin: 4px 0 0; }
.grafico-caja { position: relative; padding-left: 62px; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.eje-y {
  position: absolute; left: 0; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-3);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.eje-y.arriba { top: 4%; }
.eje-y.abajo { bottom: 4%; }
.eje-x { position: relative; display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 0 62px; font-size: var(--t-xs); color: var(--tinta-3); }
/* la fecha de la marca, pegada a la línea punteada del lado de adentro (el servidor elige el lado) */
.eje-x .marca-texto { position: absolute; top: 0; color: var(--tinta-2); font-weight: 600; white-space: nowrap; }
.eje-x .marca-texto.izq { padding-left: 5px; }
.eje-x .marca-texto.der { padding-right: 5px; }
.grafico .linea { fill: none; stroke: var(--tinta); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafico .linea-rec { fill: none; stroke: var(--tinta-3); stroke-width: 1.75; stroke-dasharray: 5 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafico .area { fill: color-mix(in srgb, var(--tinta) 8%, transparent); }
.grafico .area-rec { fill: color-mix(in srgb, var(--tinta) 3%, transparent); }
.grafico .marca-exacto { stroke: var(--tinta-3); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.grafico .punto { fill: transparent; }
.grafico .punto:hover { fill: color-mix(in srgb, var(--tinta) 22%, transparent); }
.grafico .punto-hoy { fill: var(--tinta); stroke: var(--nucleo); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ritmo-ley i.l-exacto { width: 16px; height: 3px; border-radius: 2px; background: var(--tinta); vertical-align: 3px; }
.ritmo-ley i.l-rec { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--tinta-3); vertical-align: 3px; }
.exacto-nota { max-width: 72ch; }
@media (max-width: 640px) {
  .grafico-caja { padding-left: 0; padding-top: 22px; }
  .eje-y { left: auto; right: 0; }
  .eje-y.arriba { top: 0; }
  .eje-y.abajo { bottom: -18px; }
  .eje-x { margin-left: 0; margin-top: 24px; }
}
.numeros { margin-top: 14px; }
.numeros table { margin-top: 8px; font-size: var(--t-sm); }
.numeros td, .numeros th { padding: 8px 10px; }

/* las listas de cuentas y bienes */
.subgrupo { font: 600 var(--t-sm)/1.3 var(--sans); color: var(--tinta-2); margin: 0; }
.subgrupo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 20px 0 4px; }
.lista-pat .panel-cab + .subgrupo-cab { margin-top: 0; }
.ver-traspasos { font-size: var(--t-xs); color: var(--tinta-3); }
.ver-traspasos .ic { width: 13px; height: 13px; }
.renglones { list-style: none; margin: 0 -8px; padding: 0; }
.renglones > li {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 4px 14px;
  align-items: center; padding: 10px 8px;
}
.renglones > li + li::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--linea); }
.renglones .cat-ic { --c: var(--tinta-2); }
.renglones .n { display: grid; gap: 1px; min-width: 0; line-height: 1.35; }
.renglones .n > a, .renglones .n > strong { font-weight: 600; color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.renglones .n > a:hover { text-decoration: underline; }
.renglones .valor { display: grid; justify-items: end; gap: 1px; text-align: right; }
.renglones .valor .plata { font: 600 var(--t-base) var(--display); font-stretch: 94%; font-variant-numeric: tabular-nums; }
.renglones .valor .equiv { font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.renglones .sello { vertical-align: 1px; }
.renglones > li.excluido :is(.n > a, .n > strong, .valor, .posiciones-mini) { opacity: .55; }
.renglones > li.bien { grid-template-columns: auto minmax(0, 1fr) auto; }
.notas-bien { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .renglones > li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .renglones > li > form { grid-column: 3; justify-self: end; }
}
/* las posiciones de una cuenta de inversión, debajo de su nombre, como Sandía: sobre gris, como «Lo anotado» */
.posiciones-mini {
  grid-column: 2 / 4; list-style: none; margin: 6px 0 2px; padding: 2px 12px; border-radius: 14px;
  background: var(--nucleo-2);
}
.pos-mini {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 10px; align-items: baseline;
  padding: 8px 0; font-size: var(--t-sm);
}
.pos-mini + .pos-mini { border-top: 1px solid var(--linea); }
.pos-mini .punto {
  grid-row: 1; align-self: center; width: 8px; height: 8px; border-radius: 3px;
  background: color-mix(in srgb, var(--c) var(--cat-tinta), white);
}
.pos-mini .que { grid-row: 1; grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.pos-mini .que strong { font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.pos-mini .tipo-pos { font-size: var(--t-xs); color: var(--tinta-3); }
.pos-mini .cuanto { grid-row: 2; grid-column: 2; font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.pos-mini .monto { grid-row: 1 / span 2; grid-column: 3; display: grid; justify-items: end; gap: 1px; text-align: right; }
.pos-mini .monto .plata { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pos-mini .monto .equiv { font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.pos-mini .sin { font-size: var(--t-xs); font-weight: 600; color: var(--ambar); }
.pos-mini .junto { white-space: nowrap; }
.nuevo-bien { margin-top: 16px; }
.nuevo-bien > summary { list-style: none; width: fit-content; }
.inv-en-cuentas { margin: -4px 0 0; }
/* vuelta 3: lo que no se pudo pasar a la vista va en su moneda con "sin cotización" (nunca "≈ $ 0"), y la
   pieza del Inicio dice en una línea lo que el total no cuenta como está */
.renglones .valor .equiv.sin-cot { font-weight: 600; color: var(--ambar); }
.patrimonio-inicio .pieza-nota { margin: 12px 0 0; max-width: 76ch; line-height: 1.45; text-wrap: pretty; }
.patrimonio-inicio .pieza-nota .ic { width: 16px; height: 16px; margin-top: 2px; }

/* En pantallas táctiles, todo lo que se toca acá responde en 44 × 44. */
@media (pointer: coarse) {
  :is(.acciones-pos, .acciones-bien) > details > summary, :is(.vendidas, .numeros) > summary,
  .borrar-pos button, .borrar-cuenta button, .acciones-bien form button, .tomar-precio button { position: relative; min-height: 44px; }
  :is(.acciones-pos, .acciones-bien) > details > summary::after, :is(.vendidas, .numeros) > summary::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .acciones-inv summary, .nuevo-bien > summary, .precios-form button { min-height: 44px; }
  /* los formularios que se abren en el lugar y el de «Nueva cuenta de inversión»: el botón de guardar,
     cada opción de «¿Con qué plata?», «¿Qué pasó con la plata?» y «Tipo», y los campos (el de plata
     queda en 43 con su letra) */
  :is(.form-pos, .nueva-inv form) button[type="submit"],
  :is(.form-pos, .nueva-inv) .segmento label > span,
  :is(.form-pos, .nueva-inv) :is(input:not([type="radio"], [type="checkbox"]), select) { min-height: 44px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* la barra por tipo se reparte de izquierda a derecha y la línea de la evolución se dibuja una vez */
  .barra-tipos > span { animation: crecer-x 820ms var(--salida) both; animation-delay: calc(220ms + var(--i, 0) * 70ms); }
  .grafico .linea { stroke-dasharray: 1; animation: trazar 1100ms var(--salida) both; animation-delay: 200ms; }
  @keyframes trazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .bloques a:active { transform: scale(.97); }
}

/* F14 · Familia y amigos: la invitación recién creada, las personas con su uso del mes, «Tu cuenta» en Ajustes y la
   pantalla de entrar. Reusa .panel, .panel-cab, .sello, .tope-barra, .formulario y .mini; los anchos de las barras
   vienen hechos del servidor (--p). -------------------------------------------------------------------------- */
.codigo-grande {
  font: 650 var(--t-xl)/1.1 var(--display); letter-spacing: .08em; font-variant-numeric: tabular-nums;
  color: var(--tinta); margin: 2px 0 10px; user-select: all;
}
.invitacion-nueva .tenue { max-width: 62ch; text-wrap: pretty; }
.copiable { margin-top: 14px; max-width: 640px; }
.copiable textarea { resize: vertical; min-height: 84px; line-height: 1.45; font-size: var(--t-sm); }
.enlace-invitacion { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; min-width: 0; }
.enlace-invitacion .ic { flex: none; width: 16px; height: 16px; color: var(--tinta-3); }
.enlace-invitacion a { color: var(--tinta-2); overflow-wrap: anywhere; text-underline-offset: 3px; }
.form-invitar .todo.tenue { margin: 0; max-width: 70ch; }

.lista-familia { list-style: none; margin: 0 -8px; padding: 0; }
.lista-familia li {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 230px) auto;
  gap: 8px 16px; align-items: center; padding: 12px 8px;
}
.lista-familia li + li::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--linea); }
#pendientes .lista-familia li { grid-template-columns: auto minmax(0, 1fr) auto; }
.lista-familia .avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--nucleo-2);
  font: 650 var(--t-md)/1 var(--display); color: var(--tinta-2);
}
.lista-familia .avatar .ic { width: 18px; height: 18px; }
.lista-familia .n { display: grid; gap: 2px; min-width: 0; line-height: 1.4; }
.lista-familia .n strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 600; overflow-wrap: anywhere; }
.lista-familia .codigo { font-family: var(--display); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.lista-familia .sello { color: var(--tinta-2); background: var(--nucleo-2); }
.lista-familia .sello.pausa { color: var(--ambar); background: var(--ambar-suave); }
.persona.en-pausa :is(.avatar, .uso) { opacity: .55; }
.persona .uso { display: grid; gap: 6px; min-width: 0; }
.persona .uso .cifra { font-size: var(--t-sm); }
.persona .uso .plata { font-weight: 650; color: var(--tinta); }
.persona .uso-nota { color: var(--rojo); line-height: 1.35; text-wrap: pretty; }
:is(.persona, .uso-mio) .relleno-tope { background: var(--verde); }
:is(.persona.cerca, .uso-mio.cerca) .relleno-tope { background: var(--ambar); }
:is(.persona.pasado, .uso-mio.pasado) .relleno-tope { background: var(--rojo); }
.acciones-persona { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.acciones-persona form { margin: 0; }
/* Tope, Pausar y Anular se abren en el lugar, debajo de la fila (sin ventanas): el texto dice qué pasa antes de tocar */
details.confirmar > summary { list-style: none; }
details.confirmar[open] > summary { background: var(--nucleo-3); }
.lista-familia li:has(> details.confirmar[open]), .lista-familia li:has(.acciones-persona > details[open]) { align-items: start; }
details.confirmar > form {
  display: grid; gap: 10px; margin-top: 10px; padding: 14px; border-radius: 14px; background: var(--nucleo-2);
  max-width: 340px; justify-self: end;
}
details.confirmar > form p { margin: 0; line-height: 1.45; text-wrap: pretty; }
details.confirmar > form button { justify-self: start; }
.acciones-persona > details[open] { flex-basis: 100%; display: grid; justify-items: end; }

.tu-cuenta .uso-titulo { margin: 0 0 4px; }
.tu-cuenta .uso-linea { margin: 0 0 8px; }
.tu-cuenta .uso-linea .plata { font-weight: 650; color: var(--tinta); }
.tu-cuenta .tope-barra { max-width: 320px; }

.entrar .entrar-como { line-height: 1.5; text-wrap: pretty; color: var(--tinta-2); }
.entrar kbd {
  font: 600 var(--t-sm)/1 var(--sans); color: var(--tinta); background: var(--nucleo-2); border-radius: 6px;
  padding: 3px 6px; box-shadow: inset 0 -1px 0 var(--anillo);
}
.entrar .entrar-dev button { width: 100%; justify-content: space-between; }

@media (max-width: 700px) {
  .lista-familia li, #pendientes .lista-familia li { grid-template-columns: auto minmax(0, 1fr); }
  .persona .uso, .acciones-persona { grid-column: 2; }
  .acciones-persona { justify-content: flex-start; }
  .acciones-persona > details[open] { justify-items: start; }
  details.confirmar > form { justify-self: start; }
  #pendientes .lista-familia details.confirmar { grid-column: 2; }
  .codigo-grande { font-size: var(--t-lg); }
}
@media (pointer: coarse) {
  :is(.acciones-persona, .lista-familia) :is(summary, button), .tu-cuenta .boton, .entrar .boton, .entrar button { min-height: 44px; }
}
.entrar .entrar-dev { display: grid; gap: 10px; }
.invitacion-nueva + details.panel { margin-top: calc(var(--hueco) + 2 * var(--aro)); }
.copiable textarea { field-sizing: content; }
@media (max-width: 700px) { .copiable textarea { min-height: 150px; } }

/* F14, revisión 1: copiar y compartir la invitación con un toque (compartir.js), las vencidas y el cartel «copiado» */
.codigo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 2px 0 10px; }
.codigo-fila .codigo-grande { margin: 0; }
.botonera.compartir { margin-top: 12px; }
.enlace-invitacion { flex-wrap: wrap; }
.enlace-invitacion .copiar { margin-left: 4px; }
button.copiar.hecho { background: var(--verde-suave); color: var(--verde); }
.aviso-copiado {
  position: fixed; left: 50%; bottom: 28px; z-index: 40; transform: translateX(-50%); margin: 0;
  padding: 10px 18px; border-radius: 999px; background: var(--accion); color: var(--accion-texto);
  font-weight: 600; font-size: var(--t-sm); box-shadow: 0 12px 28px -14px var(--sombra-c); white-space: nowrap;
}
.aviso-copiado:empty { display: none; }
@media (max-width: 900px) { .aviso-copiado { bottom: calc(112px + env(safe-area-inset-bottom)); } }
.vencida .codigo { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--tinta-2); }
@media (prefers-reduced-motion: no-preference) {
  .aviso-copiado { animation: aparece-copiado 180ms var(--salida) both; }
  @keyframes aparece-copiado { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
}
@media (pointer: coarse) {
  .invitacion-nueva :is(button, .boton), .acciones-persona .boton { min-height: 44px; }
}
.enlace-invitacion { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 6px; row-gap: 8px; }
.enlace-invitacion > .ic { margin-top: 3px; }
.enlace-invitacion .copiar { grid-column: 2; justify-self: start; margin-left: 0; }

/* F15 · Entrar con Google o con un código por mail, registrarse con una invitación y «Tu cuenta» (formas de entrar).
   Reusa .entrar/.bisel/.nucleo, .ancho/.nido, .lista-familia (la grilla de las filas), details.confirmar y .sello. El
   botón de Google sigue sus pautas de marca: la «G» en color sobre blanco con borde, o sobre casi negro en oscuro. ---- */
.formas-entrar { display: grid; gap: 12px; margin: 6px 0 2px; }
.formas-entrar form { margin: 0; }
.boton-google {
  width: 100%; min-height: 46px; gap: 12px; padding: 10px 18px; font-size: var(--t-base); font-weight: 600;
  background: #ffffff; color: #1f1f1f; box-shadow: inset 0 0 0 1px #747775;
}
.boton-google:hover { background: #f4f5f6; }
.logo-google { width: 18px; height: 18px; flex: none; }
:root[data-tema="oscuro"] .boton-google { background: #131314; color: #e3e3e3; box-shadow: inset 0 0 0 1px #8e918f; }
:root[data-tema="oscuro"] .boton-google:hover { background: #1f2021; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .boton-google { background: #131314; color: #e3e3e3; box-shadow: inset 0 0 0 1px #8e918f; }
  :root:not([data-tema="claro"]) .boton-google:hover { background: #1f2021; }
}
.separador {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 10px 0 4px !important;
  color: var(--tinta-3); font-size: var(--t-xs); font-weight: 500;
}
.separador::before, .separador::after { content: ""; height: 1px; background: var(--linea); }
.entrar-mail { display: grid; gap: 8px; margin: 0; }
.entrar-mail label { margin-top: 2px; }
.entrar-mail button { margin-top: 6px; }
input[aria-invalid="true"] { border-color: var(--rojo); }
.campo-error { margin: 0 !important; color: var(--rojo); font-size: var(--t-sm); line-height: 1.4; text-wrap: pretty; }
.aviso-entrar {
  display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 10px !important; padding: 12px 14px; border-radius: 14px;
  background: var(--rojo-suave); color: var(--rojo); font-size: var(--t-sm); line-height: 1.45; text-wrap: pretty;
}
.aviso-entrar .ic { margin-top: 1px; }
.entrar .sobre {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 14px;
  background: var(--nucleo-2); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--anillo);
}
.entrar .sobre .ic { width: 26px; height: 26px; }
.mail-dado { overflow-wrap: anywhere; font-weight: 600; color: var(--tinta); }
.entrar-codigo { display: grid; gap: 8px; margin: 10px 0 0 !important; }
.campo-codigo {
  font: 600 30px/1.1 var(--display) !important; letter-spacing: .32em; text-indent: .32em; text-align: center;
  font-variant-numeric: tabular-nums; padding: 14px 12px;
}
.campo-codigo::placeholder { color: color-mix(in srgb, var(--tinta-3) 45%, transparent); }
.entrar-codigo button { margin-top: 6px; }
.codigo-otra-vez { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea); }
.codigo-otra-vez p { margin: 0 0 10px !important; }
.codigo-otra-vez form { margin: 0 !important; }
.nota-datos {
  margin: 18px 0 2px !important; padding: 12px 14px; border-radius: 14px; background: var(--nucleo-2);
  color: var(--tinta-2); font-size: var(--t-sm); line-height: 1.5; text-wrap: pretty;
}
.nota-datos strong { color: var(--tinta); }
.registro .entrar-como { margin-bottom: 10px; }

/* Tu cuenta: las tres formas de entrar */
.lista-formas { list-style: none; margin: 0 -8px; padding: 0; }
.lista-formas .forma {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 16px;
  align-items: center; padding: 14px 8px;
}
.lista-formas .forma + .forma::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--linea); }
.lista-formas .avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--nucleo-2);
  color: var(--tinta-2);
}
.lista-formas .avatar .ic, .lista-formas .avatar .logo-google { width: 20px; height: 20px; }
.lista-formas .forma.conectada .avatar { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--verde) 55%, transparent); color: var(--verde); }
.lista-formas .n { display: grid; gap: 2px; min-width: 0; line-height: 1.4; }
.lista-formas .n strong { font-weight: 600; }
.lista-formas .acciones-persona { align-items: center; }
.lista-formas .acciones-persona > .tenue { text-align: end; max-width: 16ch; line-height: 1.35; }
.lista-formas .forma-ayuda { grid-column: 2 / -1; margin: 0; max-width: 60ch; line-height: 1.45; }
.lista-formas details.confirmar > form label { color: var(--tinta-2); }
.lista-formas .mini .logo-google { width: 14px; height: 14px; }
.lista-formas .forma:has(details[open]) { align-items: start; }
.bienvenida h2 { margin-bottom: 8px; }
.bienvenida p { margin: 0 0 10px; max-width: 64ch; line-height: 1.55; }
.bienvenida form { margin: 14px 0 0; }
.tu-cuenta .uso-formas { margin: 10px 0 0; }
.tu-cuenta .botonera { margin-top: 10px; }

@media (max-width: 700px) {
  .lista-formas .forma { grid-template-columns: auto minmax(0, 1fr); }
  .lista-formas .acciones-persona { grid-column: 2; justify-content: flex-start; }
  .lista-formas .acciones-persona > .tenue { text-align: start; max-width: none; }
  .lista-formas .forma-ayuda { grid-column: 2; }
}
@media (pointer: coarse) {
  .lista-formas :is(summary, button, .boton), .codigo-otra-vez :is(button, .boton), .bienvenida button,
  .tu-cuenta .botonera .boton { min-height: 44px; }
  .boton-google { min-height: 48px; }
}
.nota-datos.arriba { margin: 4px 0 16px !important; }
.lista-formas .sello { color: var(--tinta-2); background: var(--nucleo-2); }

/* F15, revisión 1: de quién es Tu cuenta, las sesiones abiertas y 44 px con el dedo en los selectores de Ajustes */
.cuenta-de { margin: 0 0 6px; overflow-wrap: anywhere; }
.cuenta-de strong { color: var(--tinta); font-weight: 600; }
.sesiones .ajuste .que h2 + p { max-width: 56ch; }
@media (pointer: coarse) {
  .sesiones :is(summary, button) { min-height: 44px; }
  :is(.segmento.moneda, .segmento.tema) label > span { min-height: 44px; }
}

/* F15, revisión 2: el código tiene 8 dígitos ("4829 1350"): menos aire entre letras para que entre a 390 px */
.campo-codigo { letter-spacing: .14em; text-indent: .14em; }

/* JC, 25/09: «Conectá el bot de gastos» en el Inicio, mientras la cuenta no tenga Telegram (_bot_inicio.html) */
.bot-inicio .nucleo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 18px; }
.bot-inicio .avatar {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--nucleo-2);
  color: var(--tinta-2);
}
.bot-inicio .avatar .ic { width: 21px; height: 21px; }
.bot-inicio h2 { margin: 0 0 4px; }
.bot-inicio p { margin: 0; max-width: 64ch; line-height: 1.5; color: var(--tinta-2); }
.bot-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bot-acciones form { margin: 0; }
button.ahora-no { background: transparent; box-shadow: none; color: var(--tinta-2); }
button.ahora-no:hover { background: transparent; color: var(--tinta); }
@media (max-width: 700px) {
  .bot-inicio .nucleo { grid-template-columns: auto minmax(0, 1fr); }
  .bot-acciones { grid-column: 1 / -1; }
}
@media (pointer: coarse) { .bot-acciones button { min-height: 44px; } }
/* JC, 25/09: el aviso de Spam en la pantalla del código, antes del campo */
.nota-datos.spam-aviso { margin: 0 0 16px !important; }
.bot-inicio-suelto { margin-top: calc(var(--hueco) + 2 * var(--aro, 0px)); }
/* JC, 25/09: los tres pasos de «Conectar el bot» (_bot_pasos.html) */
.bot-pasos { margin: 8px 0 0; padding-left: 1.3em; line-height: 1.5; color: var(--tinta-2); }
.bot-pasos li + li { margin-top: 2px; }
.bot-pasos strong { color: var(--tinta); }
.ayuda-control .bot-pasos, .forma-ayuda .bot-pasos { margin-top: 6px; }

/* F16 · Detalle de un gasto: lo que se compró, en un renglón tenue debajo de la descripción (_fila.html,
   _compra_fila.html; entero en el title y en la edición), y plegado en la carga rápida (base.html) */
.mov .que > .detalle { font-size: var(--t-xs); color: var(--tinta-3); }
@media (max-width: 640px) {
  /* un renglón también con el dedo: los metadatos de arriba ya ocupan dos */
  .mov .que > .detalle, .mov.sin-check .que > .detalle {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-line-clamp: none; line-clamp: none;
  }
}
.detalle-rapida > summary {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; cursor: pointer; list-style: none;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); padding: 4px 2px;
}
.detalle-rapida > summary .ic { width: 16px; height: 16px; }
.detalle-rapida > summary:hover { color: var(--tinta); }
.detalle-rapida[open] > summary { margin-bottom: 8px; color: var(--tinta); }
.detalle-rapida[open] > summary .ic { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .detalle-rapida > summary .ic { transition: transform 160ms var(--salida); }
}
@media (pointer: coarse) { .detalle-rapida > summary { min-height: 44px; } }
.formulario textarea[name="detalle"] { resize: vertical; min-height: 64px; line-height: 1.45; }

/* F19 · Ajustar al saldo real: en Cuentas, la pregunta plegada debajo de «Cambiar nombre o saldo inicial»; su
   pantalla (saldo_real.html: la diferencia y las dos opciones, con .opcion de F10) y el ajuste en Movimientos
   (_ajuste_fila.html), que no es gasto ni ingreso: monto con signo y en gris, como la compra de H-003 */
.saldo-real-pregunta { margin: var(--aro) var(--aro) calc(var(--hueco) + var(--aro)); }
.saldo-real-pregunta .saldo-app { margin: 0 0 16px; color: var(--tinta-2); line-height: 1.5; }
.saldo-real-pregunta .plata { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.saldo-real-pregunta .plata.egr { color: var(--rojo); }
.diferencia-saldo {
  margin: 0 7px 22px; max-width: 40ch; font: 600 var(--t-lg)/1.35 var(--display); letter-spacing: -.01em;
  text-wrap: pretty; font-variant-numeric: tabular-nums;
}
.opciones-saldo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: calc(var(--hueco) + 2 * var(--aro)); margin: var(--aro);
}
.opciones-saldo .opcion { display: flex; flex-direction: column; }
.opciones-saldo .opcion > form { margin-top: auto; padding-top: 18px; }
.mov.ajuste-saldo .ic-ajuste { --c: var(--tinta-2); }
.mov.ajuste-saldo > .plata { color: var(--tinta-2); }
.mov.ajuste-saldo .sello.no-cuenta { color: var(--tinta-2); background: var(--nucleo-2); }
[id^="ajuste-"] { scroll-margin-top: 112px; }
@media (pointer: coarse) {
  .opciones-saldo button { min-height: 44px; }
}

/* F17 · Cargar con cinco opciones: Gasto, Ingreso, A cobrar, A pagar y Entre cuentas (base.html). "A cobrar" y "A pagar"
   son los formularios del Calendario y de Gastos fijos (_cobro_nuevo.html, _fijo_nuevo.html): con uno marcado, la carga
   rápida queda sólo con el selector y abajo se ve el suyo, sin JavaScript (:has). Reusa .segmento, .formulario,
   .form-cobro y .form-fijo. */
.hoja .rapida-otro { display: none; margin-top: 14px; }
.hoja .dentro:has(#rapida-tipo-a-cobrar:checked) .rapida-cobro,
.hoja .dentro:has(#rapida-tipo-a-pagar:checked) .rapida-pagar { display: grid; }
.formulario.rapida:has(:is(#rapida-tipo-a-cobrar, #rapida-tipo-a-pagar):checked) > :not(.tipos-cargar) { display: none; }
/* cada tipo con su color al elegirlo, como Gasto (rojo) e Ingreso (verde) arriba: A cobrar azul, A pagar ámbar y Entre
   cuentas violeta (tokens de :root, con su versión oscura; todos pasan AA sobre --elegido en los dos temas) */
.segmento.gasto input[value="a_cobrar"]:checked + span { color: var(--azul); }
.segmento.gasto input[value="a_pagar"]:checked + span { color: var(--ambar); }
.segmento.gasto input[value="transferencia"]:checked + span { color: var(--violeta); }
.ayuda-tipo { margin: 0; max-width: 62ch; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
/* en el celu las cinco no entran en un renglón: Gasto e Ingreso arriba (las de todos los días), las otras tres abajo */
@media (max-width: 520px) {
  .segmento.tipos-cargar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: 22px; }
  .segmento.tipos-cargar label { grid-column: span 2; }
  .segmento.tipos-cargar label:nth-child(-n+2) { grid-column: span 3; }
  .segmento.tipos-cargar label > span { border-radius: 18px; padding-inline: 6px; }
}
@media (pointer: coarse) { .segmento.tipos-cargar label > span { min-height: 44px; } }

/* F18 · Diagnóstico y tips en el analizador -------------------------------------------------------------
   Inicio: la pieza del porcentaje entera lleva a /analizador. Su único enlace («Ver el diagnóstico»)
   estira su ::after sobre toda la pieza (nada interactivo adentro de otro; F21: el de Alertas se fue, lo dice la
   campanita). Como la capa es parte del enlace, el hover y el toque en cualquier lugar de la pieza son del enlace, y
   el foco se dibuja en la pieza entera. En pantallas táctiles la regla de los 44 × 44 (.enlace, arriba) le pone
   position: relative al enlace y un ::after centrado de 44 px: con eso la capa quedaba del tamaño del texto. Por
   eso las reglas de acá nombran también .enlace (más específicas): el enlace sin posición propia y la capa
   sobre la pieza entera, en todos los punteros.
   /analizador: el diagnóstico va arriba del panel de la derecha, con letra de lectura; los tips, plegados en
   un <details> con su cantidad. Mientras "Actualizar" viaja (envio.js le pone aria-busy al formulario) o si ya
   se está escribiendo (.diag.escribiendo), el diagnóstico deja lugar a "Analizando tu situación financiera…"
   con el mismo anillo que gira del botón, y el botón dice "escribiendo…". */
.analizador-inicio { position: relative; }
.analizador-inicio .enlace.ai-tapa { position: static; }
.analizador-inicio .enlace.ai-tapa::after {
  content: ""; position: absolute; inset: 0; width: auto; height: auto; transform: none; z-index: 1;
  border-radius: var(--r-bandeja);
}
.analizador-inicio .ai-tapa:focus-visible { outline: none; }
.analizador-inicio:has(.ai-tapa:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.analizador-inicio .nucleo { transition: background-color 180ms var(--salida); }
@media (hover: hover) {
  .analizador-inicio:has(.ai-tapa:hover) .nucleo { background: color-mix(in srgb, var(--nucleo) 55%, var(--nucleo-2)); }
}
.analizador-inicio:has(.ai-tapa:active) .nucleo { background: var(--nucleo-2); }

.diag { margin: 2px 0 14px; }
.diag-texto { display: flex; gap: 10px; align-items: flex-start; margin: 0; max-width: 62ch; font-size: var(--t-md); line-height: 1.55; color: var(--tinta); text-wrap: pretty; }
.diag-texto .ic { flex: none; width: 17px; height: 17px; margin-top: 5px; }
.diag-cargando { display: none; align-items: center; gap: 10px; margin: 0; min-height: 52px; font-size: var(--t-md); color: var(--tinta-2); }
.diag-cargando .gira {
  flex: none; box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: envio-gira 720ms linear infinite;
}
.diag.escribiendo .diag-texto, .diagnostico-panel:has(form[aria-busy="true"]) .diag-texto { display: none; }
.diag.escribiendo .diag-cargando, .diagnostico-panel:has(form[aria-busy="true"]) .diag-cargando { display: flex; }
.actualizar .trabajando { display: none; }
form[aria-busy="true"] .actualizar .en-reposo { display: none; }
form[aria-busy="true"] .actualizar .trabajando { display: inline; }

details.tips { border-top: 1px solid var(--linea); }
details.tips > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding: 10px 0 6px;
  cursor: pointer; list-style: none; font-weight: 600; color: var(--tinta);
}
details.tips > summary::-webkit-details-marker { display: none; }
details.tips > summary .abre { width: 16px; height: 16px; color: var(--tinta-3); }
details.tips[open] > summary .abre { transform: rotate(90deg); }
details.tips > summary:hover .abre { color: var(--tinta); }
details.tips[open] > summary { margin-bottom: 4px; }
.tips-quien { flex-basis: 100%; padding-left: 24px; font-weight: 400; }
@media (min-width: 1101px) {
  .diagnostico-panel .nucleo { display: flex; flex-direction: column; }
  .diagnostico-panel .recos-pie { margin-top: auto; padding-top: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  details.tips > summary .abre { transition: transform 220ms var(--salida); }
}
@media (prefers-reduced-motion: reduce) {
  .diag-cargando .gira { animation-duration: 1.8s; }
}

/* F20 · Arranque sin susto: los primeros pasos del Inicio (_arranque_inicio.html), «¿Cuánto tenés hoy?»
   (primeros_pasos.html), el (?) del glosario (la macro ayuda de _macros.html: un botón y su popover, sin
   JavaScript), la ayuda de ahorrar en «Cargar» y en Metas, y las notas de una base que todavía no tiene saldos. */

/* el (?) al lado de un título: chico a la vista, con 44 px para el dedo (su ::after) */
.titulo-ayuda { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.titulo-ayuda > :is(h1, h2) { margin: 0; }
.ayuda-q {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border-radius: 50%; background: transparent; color: var(--tinta-3); font: 700 12px/1 var(--sans);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tinta-3) 55%, transparent);
}
.ayuda-q::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
/* los botones del celu miden 44 de alto (main :is(button…)): éste no, su ::after ya da los 44 */
main button.ayuda-q { min-height: 22px; }
.ayuda-q:hover { background: var(--nucleo-2); color: var(--tinta); }
.ayuda-q:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ayuda-q:active { transform: scale(.92); }
.panel-cab > .ayuda-q { align-self: center; margin-right: auto; margin-left: -4px; }
.glosa {
  margin: auto; width: min(400px, calc(100vw - 32px)); padding: 20px 22px 14px; border: 0;
  border-radius: var(--r-nucleo); background: var(--nucleo); color: var(--tinta);
  box-shadow: inset 0 1px 0 var(--brillo), 0 0 0 1px var(--anillo), 0 30px 70px -24px rgb(0 0 0 / .45);
}
.glosa::backdrop { background: rgb(10 14 18 / .24); }
.glosa p { margin: 0 0 10px; font-size: var(--t-base); line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.glosa p strong { color: var(--tinta); }
.glosa .glosa-cerrar { display: flex; margin: 4px 0 0 auto; padding: 10px 4px; min-height: 44px; background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .glosa { transition: opacity 180ms var(--salida), transform 220ms var(--salida), overlay 220ms allow-discrete, display 220ms allow-discrete; }
  .glosa:not(:popover-open) { opacity: 0; transform: translateY(8px) scale(.98); }
  @starting-style { .glosa:popover-open { opacity: 0; transform: translateY(8px) scale(.98); } }
}

/* el número grande del Inicio con su (?): el aire de arriba pasa al renglón que los junta */
.resumen .titulo-ayuda { margin: 34px 0 4px; }
.resumen .titulo-ayuda .rotulo-grande { margin: 0; padding: 0; }
@media (max-width: 900px) { .resumen .titulo-ayuda { margin-top: 26px; } }
@media (min-width: 1101px) { .resumen .titulo-ayuda { margin-top: auto; padding-top: 18px; } }
.bajada.sin-susto { line-height: 1.5; text-wrap: pretty; }
.bajada.sin-susto .enlace { margin-top: 6px; }

/* la guía: tres pasos con su tilde */
.arranque .nucleo { padding: 24px; }
.arranque-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.arranque-cab form { margin: 0; }
.arranque-cab :is(h1, h2) { margin: 0; }
.arranque-cab h1 { font-size: clamp(28px, 4vw, 38px); }
.arranque-bajada { margin: 6px 0 0; color: var(--tinta-2); line-height: 1.5; }
.pasos-arranque {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin: 0; padding: 0;
  list-style: none;
}
.paso-arranque {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-content: start; padding: 16px;
  border-radius: 18px; background: var(--nucleo-2); box-shadow: inset 0 0 0 1px var(--anillo);
}
.paso-marca { display: grid; place-items: center; width: 28px; height: 28px; color: var(--tinta-3); }
.paso-marca .ic { width: 24px; height: 24px; }
.paso-arranque.hecho .paso-marca { color: var(--verde); }
.paso-arranque.hecho { background: color-mix(in srgb, var(--verde-suave) 55%, var(--nucleo-2)); }
.paso-arranque.salteado { opacity: .75; }
.paso-cuerpo :is(h2, h3) { margin: 3px 0 6px; font: 600 var(--t-md)/1.25 var(--display); letter-spacing: -.012em; color: var(--tinta); }
.paso-arranque.hecho .paso-cuerpo :is(h2, h3) { color: var(--tinta-2); }
.paso-cuerpo p { margin: 0 0 12px; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.paso-cuerpo .si-queres { margin-left: 4px; font: 500 var(--t-xs) var(--sans); letter-spacing: 0; color: var(--tinta-3); }
.paso-partes { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.paso-partes span { display: inline-flex; align-items: center; gap: 5px; color: var(--tinta-3); }
.paso-partes span.listo { color: var(--verde); font-weight: 600; }
.paso-partes .ic { width: 15px; height: 15px; }
.paso-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.paso-acciones form { margin: 0; }
@media (pointer: coarse) { .paso-arranque :is(.boton, button), .arranque-cab button { min-height: 44px; } }

/* «¿Cuánto tenés hoy?» */
.primeros-pasos { display: grid; gap: calc(var(--hueco) + 2 * var(--aro, 0px)); max-width: 760px; }
.primeros-pasos h2 { margin: 0 0 6px; }
.pp-ayuda { margin: 0 0 16px; max-width: 62ch; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.pp-cuentas { display: grid; margin: 0; padding: 0; list-style: none; }
.pp-cuenta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 0;
  border-top: 1px solid var(--linea);
}
.pp-cuenta:first-child { border-top: 0; padding-top: 2px; }
.pp-cuenta > :not(.cat-ic) { grid-column: 2; }
.pp-cuenta > .cat-ic { align-self: start; margin-top: 4px; }
.pp-monto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.pp-nombre { display: grid; gap: 1px; font-size: var(--t-base); color: var(--tinta); }
.pp-nombre strong { font-weight: 600; }
.pp-campo { display: flex; align-items: center; gap: 8px; }
.pp-signo { font: 600 var(--t-md) var(--display); color: var(--tinta-3); }
.pp-campo input { width: min(200px, 48vw); text-align: right; font-size: var(--t-md); }
.pp-nota { margin: 6px 0 0; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-3); text-wrap: pretty; }
.pp-error { margin: 6px 0 0; font-size: var(--t-sm); font-weight: 600; color: var(--rojo); }
.pp-cuenta.con-error input { box-shadow: inset 0 0 0 1.5px var(--rojo); }
.pp-sacar { min-height: 40px; margin-top: 4px; font-size: var(--t-sm); color: var(--tinta-2); }
/* sacarla: el monto deja de importar y se ve apagado (sin JavaScript) */
.pp-cuenta:has(.pp-sacar input:checked) :is(.pp-monto, .pp-nombre) { opacity: .45; }
.pp-cuenta:has(.pp-sacar input:checked) .pp-sacar { color: var(--tinta); }
.pp-otra { margin-top: 4px; }
.pp-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 7px; }
.pp-acciones .primario { min-width: 160px; }
@media (max-width: 640px) {
  .pp-monto { display: grid; }
  .pp-campo input { width: 100%; }
  .pp-acciones .primario { flex: 1; }
}
@media (pointer: coarse) { .pp-acciones :is(.boton, button) { min-height: 48px; } }

/* notas de una base sin saldos (Patrimonio, Cuentas) */
.nota.arranque-nota { margin: 0 7px 20px; max-width: 70ch; line-height: 1.5; }
.nota.arranque-nota a { color: var(--tinta); font-weight: 600; }

/* ahorrar: en «Entre cuentas» de Cargar y en Metas */
.ayuda-ahorro {
  display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-control);
  background: var(--nucleo-2);
}
.ayuda-ahorro .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--violeta); }
.como-ahorro { margin-bottom: calc(var(--hueco) + 2 * var(--aro, 0px)); }
.como-ahorro .panel-cab { margin-bottom: 10px; }
.como-ahorro-pasos { margin: 0 0 10px; padding-left: 1.3em; max-width: 70ch; line-height: 1.55; color: var(--tinta-2); }
.como-ahorro-pasos li + li { margin-top: 6px; }
.como-ahorro-pasos :is(b, a) { color: var(--tinta); }
.como-ahorro-nota { margin: 0 0 14px; max-width: 70ch; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-3); }

/* revisión de F20: el bot en un renglón mientras falta lo primero (_arranque_inicio.html) */
.paso-arranque.plegado { padding-block: 12px; }
.paso-renglon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.paso-renglon :is(h2, h3) { margin: 0; }
.paso-renglon form { margin: 0; }
.paso-mas { margin-top: 6px; }
.paso-mas > summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; cursor: pointer; list-style: none;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
}
.paso-mas > summary::-webkit-details-marker { display: none; }
.paso-mas > summary .ic { width: 15px; height: 15px; transition: transform 220ms var(--salida); }
.paso-mas[open] > summary { color: var(--tinta); }
.paso-mas[open] > summary .ic { transform: rotate(90deg); }
.paso-mas > p { margin: 6px 0 8px; }
.paso-mas form { margin: 8px 0 0; }

/* un saldo que falta: el campo lo pide (primeros_pasos.html), y los totales sin saldos no muestran un negativo */
.pp-falta strong { color: var(--tinta); }
.kpi .num.sin-saldo-total { font-size: var(--t-md); line-height: 1.3; white-space: normal; }
.bajada.sin-susto button.enlace {
  display: inline-flex; margin-top: 6px; padding: 0; min-height: 0; border-radius: 0; background: none; box-shadow: none;
  font: 600 var(--t-sm)/1.2 var(--sans); color: var(--tinta-2);
}
.bajada.sin-susto button.enlace:hover { background: none; color: var(--tinta); }

/* «¿Es un ahorro?» en Cargar (movimiento.js lo muestra; no frena nada) */
.aviso-ahorro {
  display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-control);
  background: color-mix(in srgb, var(--violeta) 10%, var(--nucleo-2)); font-size: var(--t-sm); line-height: 1.45;
  color: var(--tinta-2);
}
.aviso-ahorro[hidden] { display: none; }
.aviso-ahorro .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--violeta); }
.aviso-ahorro button.enlace {
  display: inline; padding: 0; min-height: 0; border-radius: 0; background: none; box-shadow: none; color: var(--tinta);
  text-decoration: underline; text-underline-offset: 2px; white-space: normal;
}
.aviso-ahorro button.enlace:hover { background: none; }

/* F21 · Menú e Inicio ordenados ----------------------------------------------------------------------
   El menú, por la pregunta que responde (Mi mes, Mi plata, Mis planes, Herramientas), con Ajustes al pie; la
   campanita de Alertas siempre a la vista (arriba de la barra lateral; en el celu, una barra de arriba con la marca);
   la hoja "Más" con una línea por sección; los centros /mi-mes y /mi-plata; y el Inicio en dos bloques con título,
   «Tu mes» y «Tu plata», con lo que salió a «Más números del mes» a un toque. */

/* la campanita: un botón redondo con su numerito; encendida (en /alertas), con la tinta de la píldora */
.campana {
  position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  color: var(--tinta-2); text-decoration: none;
  transition: background-color 180ms var(--salida), color 180ms var(--salida), transform 140ms var(--salida);
}
.campana .ic { width: 21px; height: 21px; }
.campana:hover { background: var(--nucleo-2); color: var(--tinta); }
.campana[aria-current="page"] { background: var(--pildora); color: var(--pildora-texto); }
.campana .contador { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10.5px; }
@media (prefers-reduced-motion: no-preference) { .campana:active { transform: scale(.94); } }

/* arriba de la barra lateral: la marca y la campanita en un renglón (con nombres); una arriba de la otra (íconos) */
.barra-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 14px; }
.barra-cab .barra-marca { margin: 0; min-width: 0; }
@media (min-width: 901px) and (max-width: 1279px) {
  .barra-cab { flex-direction: column; margin-bottom: 12px; }
  .barra-cab .campana { width: 48px; height: 44px; border-radius: 16px; }
}

/* la barra de arriba del celu: la marca y la campanita, pegada arriba y con el mismo vidrio que la de abajo */
.celu-arriba { display: none; }
@media (max-width: 900px) {
  .celu-arriba {
    position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: calc(4px + env(safe-area-inset-top)) 10px 4px 16px;
    background: color-mix(in srgb, var(--lienzo) 82%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 1px 0 var(--anillo);
  }
  .celu-marca {
    display: flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; color: var(--tinta);
    font: 650 var(--t-md)/1 var(--display); letter-spacing: -.02em;
  }
  .celu-marca img { border-radius: 8px; box-shadow: 0 0 0 1px var(--anillo); }
  .campana-celu { width: 44px; height: 44px; }
  body.con-barra > main { padding-top: 12px; }
}

/* la hoja "Más": una sección por renglón, con su línea de para qué sirve debajo del nombre */
.hoja-mas ul { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.hoja-mas .grupo + .grupo { margin-top: 14px; }
.hoja-mas a {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "ic etq cont" "ic desc desc";
  column-gap: 12px; row-gap: 1px; align-items: center; min-height: 54px; padding: 8px 14px 9px;
}
.hoja-mas a .ic { grid-area: ic; }
.hoja-mas a .etq { grid-area: etq; }
.hoja-mas a .contador { grid-area: cont; margin-left: 0; }
.hoja-mas a .describe {
  grid-area: desc; font-size: var(--t-xs); font-weight: 500; line-height: 1.35; color: var(--tinta-3); text-wrap: pretty;
}
.hoja-mas a[aria-current="page"] .describe { color: color-mix(in srgb, var(--accion-texto) 72%, transparent); }

/* el Inicio en dos bloques: el título de cada uno, grande y con aire arriba */
.bloque-titulo {
  margin: 14px 7px -6px; font: 600 var(--t-xl)/1.1 var(--display); letter-spacing: -.025em; font-stretch: 92%;
}
.tablero > .bloque-titulo#b-mes { margin-top: 4px; }
@media (max-width: 900px) { .bloque-titulo { font-size: var(--t-lg); margin-top: 10px; } }

/* lo sin confirmar, plegado: se abre acá o se confirma en Movimientos */
.pendientes-f21 .pie-nota.arriba { margin-bottom: 4px; }
.pend-lista > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; list-style: none;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
}
.pend-lista > summary::-webkit-details-marker { display: none; }
.pend-lista > summary .ic { width: 15px; height: 15px; transition: transform 180ms var(--salida); }
.pend-lista[open] > summary .ic { transform: rotate(90deg); }
.pend-lista .movs { margin-top: 6px; }

/* «Más números del mes»: toda la pieza es el enlace; los chips dicen lo que hay sin entrar */
a.mas-numeros { display: block; color: inherit; text-decoration: none; }
.mas-numeros .nucleo { display: flex; align-items: center; gap: 14px; padding-block: 16px; }
.mas-numeros .mn-texto { display: grid; gap: 4px; min-width: 0; flex: 1; }
.mas-numeros .mn-titulo { font: 600 var(--t-md)/1.2 var(--display); letter-spacing: -.015em; }
.mas-numeros .mn-que { font-size: var(--t-sm); line-height: 1.4; color: var(--tinta-2); text-wrap: pretty; }
.mas-numeros .mn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mas-numeros .chip { padding: 4px 10px; font-size: var(--t-xs); background: var(--nucleo-2); box-shadow: none; }
.mas-numeros .nucleo > .ic { flex: none; width: 20px; height: 20px; color: var(--tinta-3); transition: transform 180ms var(--salida); }
.mas-numeros:hover .nucleo > .ic { transform: translateX(3px); color: var(--tinta); }

/* qué suma cada total, en una línea chica debajo de la cifra */
.que-suma { margin: 10px 0 0; font-size: var(--t-xs); line-height: 1.45; color: var(--tinta-3); max-width: 70ch; text-wrap: pretty; }
.que-suma.arriba { margin: -4px 0 12px; }
.kpi .que-suma { margin: 0; }
.que-suma-pat .junto { white-space: nowrap; }
.pat-plata-nota { margin: 12px 0 0; }

/* «Tu plata» en el celu: los datos de a dos por fila, así los tres bloques entran en poco más de una pantalla */
@media (max-width: 900px) {
  :is(.plata-inicio, .ahorro-inicio, .patrimonio-inicio) .datos-ahorro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  :is(.plata-inicio, .ahorro-inicio, .patrimonio-inicio) .datos-ahorro .dato { padding: 12px 12px 11px; min-width: 0; }
  /* nada se corta con puntos suspensivos: lo largo pasa al renglón de abajo */
  :is(.plata-inicio, .ahorro-inicio, .patrimonio-inicio) .cifra-s { font-size: var(--t-md); white-space: normal; overflow-wrap: anywhere; }
  :is(.plata-inicio, .ahorro-inicio, .patrimonio-inicio) .cifra-s small { white-space: nowrap; }
  :is(.plata-inicio, .ahorro-inicio, .patrimonio-inicio) .dato .rot { white-space: normal; }
  :is(.plata-inicio, .ahorro-inicio, .patrimonio-inicio) .dato .chico { line-height: 1.3; }
}

/* «Lo que viene»: lo vencido y sin pagar, en rojo */
.semana-vencido .ic { color: var(--rojo); }
.semana-pie .egr { color: var(--rojo); }

/* los centros del celu (/mi-mes, /mi-plata): una sección por renglón, con su número a la derecha */
.centro-plata { margin-bottom: calc(var(--hueco) + 2 * var(--aro)); }
.centro-plata .rotulo-grande { margin-top: 0; }
.centro-plata .cifra { font-size: clamp(40px, 6vw, 60px); }
.centro-lista { list-style: none; margin: 0 7px; padding: 0; display: grid; gap: 8px; }
.centro-lista a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 14px;
  min-height: 64px; padding: 12px 14px; border-radius: 18px; background: var(--nucleo);
  box-shadow: 0 0 0 1px var(--anillo); color: var(--tinta); text-decoration: none;
  transition: background-color 180ms var(--salida), transform 140ms var(--salida);
}
.centro-lista a:hover { background: var(--nucleo-2); }
.centro-lista .cat-ic { --c: var(--tinta-2); }
.centro-texto { display: grid; gap: 2px; min-width: 0; }
.centro-texto strong { font-weight: 600; }
.centro-texto .chico { line-height: 1.35; text-wrap: pretty; }
.centro-dato { display: grid; justify-items: end; gap: 1px; text-align: right; }
.centro-num { font: 600 var(--t-md)/1.15 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.centro-num.tono-rojo { color: var(--rojo); }
.centro-num.tono-ambar { color: var(--ambar); }
.centro-lista a > .ic { width: 18px; height: 18px; color: var(--tinta-3); }
@media (max-width: 520px) {
  .centro-lista a { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic txt ir" "ic dato ir"; row-gap: 6px; }
  .centro-lista .cat-ic { grid-area: ic; align-self: start; }
  .centro-texto { grid-area: txt; }
  .centro-dato { grid-area: dato; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; text-align: left; }
  .centro-lista a > .ic { grid-area: ir; }
}
@media (prefers-reduced-motion: no-preference) { :is(.centro-lista a, a.mas-numeros):active { transform: scale(.98); } }

/* «Más números del mes»: las mismas piezas del Inicio, en su propia pantalla */
.inicio-mas .piso-panel, .inicio-mas .mirar-panel { grid-column: span 6; }
@media (max-width: 1100px) { .inicio-mas .piso-panel, .inicio-mas .mirar-panel { grid-column: 1 / -1; } }

/* «En qué se fue»: las cinco más grandes y el resto plegado; en el celu, la dona un poco más chica */
.leyenda-caja { display: grid; gap: 2px; min-width: 0; }
.leyenda-resto > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; cursor: pointer; list-style: none;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
}
.leyenda-resto > summary::-webkit-details-marker { display: none; }
.leyenda-resto > summary .ic { width: 15px; height: 15px; transition: transform 180ms var(--salida); }
.leyenda-resto[open] > summary .ic { transform: rotate(90deg); }
@media (max-width: 640px) {
  .leyenda-caja { width: 100%; }
  .dona-panel .dona { gap: 14px; }
  .dona-panel .dona-figura { max-width: 184px; }
}

/* «Tu plata» en el celu, más apretado: menos aire adentro de cada pieza y de cada dato */
@media (max-width: 640px) {
  :is(.plata-inicio, .ahorro-inicio, .patrimonio-inicio) .nucleo { padding: 14px 14px 15px; }
  :is(.plata-inicio, .ahorro-inicio, .patrimonio-inicio) .panel-cab { margin-bottom: 10px; }
  :is(.plata-inicio, .ahorro-inicio, .patrimonio-inicio) .datos-ahorro .dato { padding: 10px 11px; gap: 2px; }
  :is(.plata-inicio, .patrimonio-inicio) .que-suma { margin-top: 8px; }
  .patrimonio-inicio .que-suma.arriba { margin: -4px 0 10px; }
}

/* F22 · Donaciones y aviso del tope -------------------------------------------------------------------
   /donaciones: el texto, la imagen (sólo acá) y los datos para transferir, cada uno con su botón de copiar (compartir.js;
   reusa .panel, .mini, button.copiar y .aviso-copiado de F14). En compu, la imagen a la derecha; en el celu, después
   de los datos (texto, datos, imagen y gracias: así en 390 px los datos para transferir entran sin desplazar). El CBU
   va de a cuatro separado con aire (no con espacios: seleccionado a mano se copia de corrido).
   Y el cartel de quien llegó al tope del bot, arriba del Inicio y de Movimientos, y el enlace de «Tu cuenta». */
.donaciones {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  grid-template-areas: "texto meme" "datos meme" "gracias meme";
  align-content: start; align-items: start; gap: 20px 36px; max-width: 940px;
}
.don-texto { grid-area: texto; display: grid; gap: 12px; }
.don-texto p { margin: 0; max-width: 60ch; line-height: 1.55; text-wrap: pretty; }
.don-meme { grid-area: meme; margin: 0; display: grid; gap: 10px; }
.don-meme img {
  display: block; width: 100%; height: auto; border-radius: 18px; background: var(--nucleo-2);
  box-shadow: 0 0 0 1px var(--anillo), 0 18px 36px -24px var(--sombra-c);
}
.don-meme figcaption { font-size: var(--t-sm); line-height: 1.4; color: var(--tinta-2); text-align: center; text-wrap: balance; }
.don-datos { grid-area: datos; min-width: 0; }
.don-datos dl { margin: 0; display: grid; gap: 8px; }
.don-dato {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 4px 12px;
  padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--nucleo-2);
}
.don-dato dt { font-size: var(--t-xs); font-weight: 600; letter-spacing: .01em; color: var(--tinta-3); }
.don-dato dd { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; min-width: 0; }
.don-valor { min-width: 0; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; user-select: all; }
.don-cbu { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.don-cbu > span:not(:last-child) { margin-right: .45em; }
.don-dato .copiar { flex: none; }
.don-gracias { grid-area: gracias; margin: 2px 0 0; font: 600 var(--t-md)/1.3 var(--display); letter-spacing: -.01em; }
@media (max-width: 760px) {
  .donaciones { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "datos" "meme" "gracias"; gap: 18px; }
  .don-meme { width: min(100%, 300px); justify-self: center; }
}
@media (max-width: 420px) {
  .don-dato { grid-template-columns: minmax(0, 1fr); padding: 10px 10px 10px 14px; }
}
@media (pointer: coarse) { .don-dato .copiar { min-height: 40px; } }

.aviso.tope-bot { align-items: flex-start; border-radius: 16px; line-height: 1.45; text-wrap: pretty; }
.aviso.tope-bot .ic { flex: none; margin-top: 2px; color: var(--ambar); }
.aviso.tope-bot a, .uso-donaciones { font-weight: 600; color: var(--tinta); text-underline-offset: 3px; white-space: nowrap; }

/* F25 · Se llama Lluvia: la palabra del logo, «lluvia» en minúscula, en Fraunces (SOFT, 600: base.html baja sólo sus
   letras). Si Fraunces no llega, queda la de los títulos (Bricolage Grotesque), también en minúscula y apretada. */
.logotipo { font-family: "Fraunces", var(--display); font-weight: 600; font-stretch: 100%; letter-spacing: -.02em; }
.barra-marca .logotipo, .celu-marca .logotipo { font-size: 21px; line-height: 1; transform: translateY(-1px); }
.entrar h1.logotipo { font-size: 44px; line-height: 1; letter-spacing: -.03em; margin-bottom: 2px; }
.entrar .lema { margin: 0 0 12px; color: var(--tinta-2); font-size: var(--t-md); }

/* F26 · Cuentas claras y menú con aire ---------------------------------------------------------------------------
   Cuentas (JC, 25/09): lo primero de cada cuenta es «Corregir el saldo» (F19), en tinta; abajo, chicos, «Cambiar el
   nombre» y «Más opciones» (el saldo inicial, con para qué es). La barra lateral: cada ítem mide 44 px como mínimo,
   con aire entre ítems y más entre grupos; la marca y «Cargar movimiento» quedan quietas arriba y la lista, si no
   entra, se desplaza dentro de su caja (.barra-desliza) en vez de apretarse (se fueron los escalones de F10 a F22). */

/* Cuentas: la acción principal, en tinta. .cuenta details pone margin-top: auto: en cada fila de tarjetas caen juntas */
.cuenta details.corregir-saldo > summary {
  width: fit-content; min-height: 44px; padding: 10px 18px; color: var(--accion-texto); font-size: var(--t-sm);
}
.cuenta details.corregir-saldo > summary:hover { color: var(--accion-texto); }
.cuenta details.corregir-saldo[open] > summary { margin-bottom: 2px; }
.cuenta details.corregir-saldo > form { padding: 14px; border-radius: 16px; background: var(--nucleo-2); }
.cuenta details.corregir-saldo > form p, .cuenta .nota-saldo-inicial { margin: 0; line-height: 1.45; text-wrap: pretty; }
.cuenta details.corregir-saldo > form button, .cuenta .acciones-cuenta form button { justify-self: start; }
/* lo de menos uso, chico y en un renglón; abierto, el formulario ocupa el ancho de la tarjeta */
.cuenta .acciones-cuenta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 20px; }
.cuenta .acciones-cuenta > details { margin-top: 0; }
/* una tarjeta sin configurar no tiene «Corregir el saldo»: sus acciones igual caen al pie */
.cuenta > .acciones-cuenta { margin-top: auto; }
.cuenta > details.corregir-saldo + .acciones-cuenta { margin-top: 0; }
.cuenta .acciones-cuenta > details[open] { flex-basis: 100%; }
.cuenta .acciones-cuenta > details[open] > summary { color: var(--tinta); }
.cuenta:not(.cuenta-tarjeta) .enlaces { padding-top: 10px; border-top: 1px solid var(--linea); }

/* la barra lateral: la lista en su caja, que se desplaza; la marca y Cargar, quietas */
.barra-cab { margin-bottom: 18px; }
.barra-cargar { margin-bottom: 24px; }
.barra-panel > .barra-desliza {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent;
}
/* la barrita de desplazamiento, sólo con el mouse encima (el borde que se esfuma ya avisa que hay más) */
.barra-panel > .barra-desliza:is(:hover, :focus-within) { scrollbar-color: var(--linea) transparent; }
.barra-desliza > .secciones { flex: 1 0 auto; }
.secciones, .secciones > .nav-tinta { gap: 24px; }
.secciones ul { gap: 4px; }
.secciones a { min-height: 44px; padding-block: 10px; }
.grupo-titulo { margin-bottom: 8px; color: var(--tinta-2); font-weight: 650; letter-spacing: .02em; }
.secciones .grupo-abajo { padding-top: 18px; }
/* con la lista más larga que su caja, un borde que se esfuma dice que hay más arriba o abajo (sólo donde se puede
   medir el desplazamiento; si no, la lista se ve entera como siempre) */
@property --esfuma-arriba { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --esfuma-abajo { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes esfuma-lista { from { --esfuma-arriba: 0px; --esfuma-abajo: 28px; } 1% { --esfuma-arriba: 20px; } 99% { --esfuma-abajo: 28px; } to { --esfuma-arriba: 20px; --esfuma-abajo: 0px; } }
@supports (animation-timeline: scroll()) {
  .barra-panel > .barra-desliza {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--esfuma-arriba), #000 calc(100% - var(--esfuma-abajo)), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 var(--esfuma-arriba), #000 calc(100% - var(--esfuma-abajo)), transparent);
    animation: esfuma-lista linear both; animation-timeline: scroll(self);
  }
}
/* 901 a 1279 px, sólo íconos: cuadros de 52 × 44 con aire, sin barrita ni borde que se esfuma. La caja que se
   desplaza recortaría el globito del nombre (sale a la derecha de la barra): donde se puede, el globito se ancla a su
   ítem (anchor) y es fijo, así su caja es el panel de la barra (tiene backdrop-filter) y no la lista, y no se recorta.
   Donde no, queda como antes (se recorta sólo si la lista se desplaza) y el nombre está también en el title (F21). */
@media (min-width: 901px) and (max-width: 1279px) {
  .barra-cab { margin-bottom: 14px; }
  .barra-cargar { margin-bottom: 18px; }
  .barra-panel > .barra-desliza { align-self: stretch; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; animation: none; }
  .barra-panel > .barra-desliza::-webkit-scrollbar { display: none; }
  .secciones, .secciones > .nav-tinta { gap: 14px; }
  .secciones .grupo + .grupo { padding-top: 14px; }
  .secciones ul { gap: 6px; }
  .secciones a { min-height: 44px; height: 44px; padding: 0; }
  @supports (anchor-scope: --a) {
    .secciones a { anchor-name: --item-barra; anchor-scope: --item-barra; }
    .secciones a .etq { position: fixed; position-anchor: --item-barra; left: calc(anchor(right) + 14px); top: anchor(center); }
  }
}

/* F23 · Ahorro simple: Metas y ahorro con una cifra por pregunta y un solo verbo, «Guardar» ---------------------
   /metas arriba tiene el mes (guardaste, lo que piden tus metas, libre para gastar) con «Guardar plata»; cada meta
   es una tarjeta de tres renglones (cuánto juntaste, este mes con su botón, cuándo llegás) y lo demás va en «Más
   opciones». /metas/guardar es la hoja de guardar. En el Inicio, «Tu ahorro» y la línea de debajo de «Te quedó».
   Reusa .bisel/.nucleo, .tope-barra, .cuenta, .formulario, .segmento, .sello y los colores de F7. */

/* lo reservado para metas que ya no está: rojo, arriba de todo */
.nota.ahorro-gastado { margin: 0 7px 22px; padding: 12px 16px; border-radius: 16px; background: var(--rojo-suave); color: var(--rojo); line-height: 1.45; }
.nota.ahorro-gastado .ic { flex: none; margin-top: 2px; }
.nota.ahorro-gastado b, .nota.ahorro-gastado a { color: inherit; }
.ahorro-inicio .nota.ahorro-gastado { margin: 0 0 12px; }

/* el mes: el titular, la barra contra lo que piden las metas, el botón y lo libre */
.mes-ahorro .nucleo { display: grid; gap: 4px; }
.mes-guardado { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.mes-titulo { margin: 0; font: 600 var(--t-xl)/1.15 var(--display); letter-spacing: -.025em; font-stretch: 92%; text-wrap: balance; }
.mes-titulo .plata { font-variant-numeric: tabular-nums; }
.piden { margin: 0; color: var(--tinta-2); font-size: var(--t-md); }
.piden .plata { color: var(--tinta); font-weight: 600; font-stretch: 94%; }
.mes-barra { width: 100%; max-width: 560px; }
.mes-barra .relleno-tope { background: var(--verde); }
.minimo { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); }
.minimo .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--verde); }
.minimo .plata { font-weight: 600; color: var(--tinta); font-stretch: 94%; }
.mes-ahorro .botonera { margin-top: 8px; }
.libre-mes { width: 100%; display: grid; gap: 4px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--linea); }
.libre-mes .titulo-ayuda { gap: 4px 8px; }
.libre-mes .cifra-m { margin: 0; }
.libre-mes .dice { max-width: none; margin: 0; }
@media (min-width: 1101px) {
  /* en la compu, lo guardado a la izquierda y lo libre a la derecha */
  .mes-ahorro .nucleo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .libre-mes { margin-top: 0; padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--linea); }
}
.pool-panel + details.panel { margin-top: calc(var(--hueco) + 2 * var(--aro)); }
@media (max-width: 640px) {
  .mes-titulo { font-size: var(--t-lg); }
  .piden { font-size: var(--t-sm); }
}

/* «Tus metas» con su (?) al lado */
.titulo-metas { display: flex; align-items: center; gap: 8px; margin: calc(var(--hueco) + 2 * var(--aro) + 8px) 7px 18px; }
.titulo-metas .titulo-seccion { margin: 0; }

/* una meta en tres renglones: cuánto juntaste, este mes con su botón, cuándo llegás */
.meta-avance { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.meta-avance .saldo { margin: 0; }
.meta-avance > b { font: 600 var(--t-md)/1 var(--display); font-variant-numeric: tabular-nums; }
.meta-mes {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px;
  border-top: 1px solid var(--linea); font-size: var(--t-sm); color: var(--tinta-2);
}
.meta-mes > span { min-width: 0; }
.meta-mes .plata { color: var(--tinta); font-weight: 600; font-stretch: 94%; }
.meta-mes form { margin: 0; display: block; }
.meta-mes .boton, .meta-mes button { flex: none; }
.meta-llega { margin: 0; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.meta-llega.bien { color: var(--verde); }
.meta-llega.atencion { color: var(--ambar); }
.meta-llega.mal { color: var(--rojo); }
.meta-llega .plata { font-weight: 600; }
.meta-gastado { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--rojo); }
.meta-gastado .ic { flex: none; width: 15px; height: 15px; margin-top: 1px; }

/* «Más opciones»: lo que antes estaba siempre a la vista, plegado */
.mas-opciones { margin-top: auto; }
.mas-opciones > summary .ic { width: 15px; height: 15px; transition: transform 180ms var(--salida); }
.mas-opciones[open] > summary .ic { transform: rotate(90deg); }
.mas-opciones .plan-meta { margin-top: 10px; }
.opcion-meta { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea); }
.opcion-meta > summary { font-weight: 600; }

/* tu ahorro hoy: una cifra, en metas y sin meta; las cuentas plegadas */
.ahorro-total { margin: 0; }
.ahorro-total small { font: 500 var(--t-sm)/1.3 var(--sans); color: var(--tinta-2); letter-spacing: 0; }
.ahorro-partes { margin: 4px 0 0; max-width: none; }
.pool-panel .repartir { margin-top: 12px; }
.cuentas-de-ahorro { margin-top: 18px; }
.cuentas-de-ahorro > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; list-style: none;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
}
.cuentas-de-ahorro > summary .ic { width: 15px; height: 15px; transition: transform 180ms var(--salida); }
.cuentas-de-ahorro[open] > summary .ic { transform: rotate(90deg); }
.cuentas-de-ahorro .cuentas-ahorro { margin-top: 6px; }
.pool-panel > .nucleo > .nota-form { margin-top: 14px; }

/* plegados: cuánto guardar por mes y meses anteriores */
.plegado-cuerpo { display: grid; gap: 14px; }
.plegado-cuerpo h3 { margin: 0; font: 600 var(--t-md)/1.2 var(--display); letter-spacing: -.015em; }
.piden-mes { margin: 0; max-width: 62ch; color: var(--tinta-2); }
.piden-mes .plata { color: var(--tinta); font-weight: 600; }
.plegado-ahorro .historial-regla { list-style: none; margin: 0; padding: 0; border-top: 0; display: grid; gap: 2px; }
.plegado-ahorro .historial-regla li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 6px 0;
  font-size: var(--t-sm);
}
.plegado-ahorro .historial-regla li + li { border-top: 1px solid var(--linea); }
@media (max-width: 640px) {
  .plegado-ahorro .historial-regla li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .plegado-ahorro .historial-regla li > .chico { grid-column: 1 / -1; }
}

/* /metas/guardar: la hoja, con «¿Para qué?» en tarjetitas que se tocan enteras */
.guardar-hoja { max-width: 760px; }
.para-que { border: 0; margin: 0; padding: 0; min-width: 0; }
.para-que legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.opciones-para { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.opcion-para {
  position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; min-height: 44px;
  border-radius: 14px; background: var(--nucleo-2); cursor: pointer; box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 160ms var(--salida), background-color 160ms var(--salida);
}
.opcion-para:hover { background: var(--nucleo-3); }
.opcion-para:has(input:checked) { box-shadow: inset 0 0 0 2px var(--verde); background: var(--nucleo); }
.opcion-para input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--verde); }
.opcion-para > span { display: grid; gap: 2px; min-width: 0; }
.opcion-para b { font-weight: 600; overflow-wrap: anywhere; }
.opcion-para small { font-size: var(--t-xs); color: var(--tinta-3); line-height: 1.35; }
.form-guardar .botonera { align-items: center; }

/* Inicio: «Tu ahorro» (lo guardado contra lo que piden tus metas y las metas en una línea) y la línea de «Te quedó» */
.ahorro-inicio .ahorro-dato {
  display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: var(--nucleo-2); color: var(--tinta);
  text-decoration: none; transition: background-color 180ms var(--salida);
}
.ahorro-inicio .ahorro-dato:hover { background: var(--nucleo-3); }
.ahorro-inicio .ahorro-dato .cifra-s { white-space: normal; }
.metas-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 12px 0 0; font-size: var(--t-sm); color: var(--tinta-2); }
.metas-linea a { color: inherit; text-decoration: none; padding: 6px 2px; }
.metas-linea a:hover { color: var(--tinta); }
.metas-linea b { color: var(--tinta); font-weight: 600; }
.metas-linea .sep { padding: 0 6px; color: var(--tinta-3); }
.guardaste-libre .plata { font-weight: 600; }
.guardaste-libre b.plata { color: var(--tinta); }

@media (pointer: coarse) {
  .meta-mes .boton, .meta-mes button, .pool-panel .repartir button { min-height: 44px; }
  .opcion-meta > summary, .mas-opciones > summary { display: flex; align-items: center; min-height: 44px; }
}

/* F24 · Ahorro a fondo, integrado con F23 ------------------------------------------------------------------------
   Guardar: «¿Cuánto llega?» se ve sólo si lo elegido en «Sale de» y en «Va a» es de distinta moneda (sin :has se ve
   siempre, y no molesta); con un broker o un exchange en «Va a», «¿Para qué?» queda fijo en «Sin meta (queda
   invertido)»; la barra de «Guardar» va pegada abajo de la hoja, con su fondo (lo que corre pasa por debajo, como la
   cabecera de la hoja de Cargar de F17): arriba de la barra de abajo del celu, y con el teclado abierto, arriba del
   teclado (guardar.js mide cuánto tapa en --teclado). Metas: lo que salió del ahorro y falta decidir, con su enlace. */
.form-guardar:has(select[name="cuenta_id"] option[data-moneda="ARS"]:checked):has(select[name="destino"] option[data-moneda="ARS"]:checked) .llega,
.form-guardar:has(select[name="cuenta_id"] option[data-moneda="USD"]:checked):has(select[name="destino"] option[data-moneda="USD"]:checked) .llega { display: none; }
.invertido-para { display: none; }
.form-guardar:has(select[name="destino"] option[data-invierte]:checked) .para-que { display: none; }
.form-guardar:has(select[name="destino"] option[data-invierte]:checked) .invertido-para { display: grid; gap: 8px; }
.rot-para { margin: 0; font-weight: 600; }
.opcion-para.fija { margin: 0; cursor: default; box-shadow: inset 0 0 0 2px var(--verde); background: var(--nucleo); }
.opcion-para.fija:hover { background: var(--nucleo); }
.opcion-para.fija > .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--verde); }
.form-guardar .acciones-hoja {
  position: sticky; bottom: 12px; z-index: 5; margin-top: 4px; padding: 8px; border-radius: 22px;
  background: color-mix(in srgb, var(--nucleo) 90%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px var(--anillo), 0 14px 30px -18px var(--sombra-c);
}
@media (max-width: 900px) {
  .form-guardar .acciones-hoja { bottom: calc(var(--alto-abajo) + 8px); }
  .form-guardar .acciones-hoja .primario { flex: 1; justify-content: center; }
  .con-teclado .form-guardar .acciones-hoja { bottom: calc(var(--teclado, 0px) + 8px); }
  .con-teclado .isla-abajo { visibility: hidden; }
}

/* Metas y ahorro: lo que salió del ahorro sin decidir (arriba, en la tarjeta y en el Inicio) y lo invertido */
.nota.ahorro-gastado a { font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.meta-gastado a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.guardar-invertir { margin: 10px 0 0; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); max-width: 62ch; }
.ahorro-partes .falta-meta { color: var(--rojo); }
.ahorro-partes .plata { font-weight: 600; }
.mes-ahorro .de-antes { margin: 0; font-size: var(--t-sm); color: var(--tinta-2); }
.falta-llegar { margin: 0; }

/* /metas/salidas: cada salida con sus opciones en tarjetitas, como «¿Para qué?» de Guardar */
.salida-ahorro { display: grid; gap: 12px; padding: 14px 0; }
.salida-ahorro + .salida-ahorro { border-top: 1px solid var(--linea); }
.salida-ahorro > p { margin: 0; line-height: 1.45; }
.salida-ahorro fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.salida-ahorro legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.salidas-decididas { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--t-sm); color: var(--tinta-2); }
.arranque-metas { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linea); font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.arranque-metas .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--verde); }
.arranque-metas a { font-weight: 600; color: var(--tinta); text-underline-offset: 3px; }

/* Arreglos de la revisión de F23+F24: en la tarjeta de una meta, «Tenés $X guardado sin meta: Repartir»; en «Tu ahorro
   hoy», lo invertido y lo reservado de más (con qué hacer); en Guardar, lo que se cubre primero; en /metas/salidas,
   «Cambiar» lo ya decidido. */
.repartir-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; color: var(--tinta-2); }
.repartir-meta .plata { font-weight: 600; color: var(--tinta); }
.ahorro-invertido { margin: 4px 0 0; }
.ahorro-invertido a { font-weight: 600; text-underline-offset: 3px; }
.pool-panel .nota.falta-meta { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 12px 16px; border-radius: 16px; background: var(--rojo-suave); color: var(--rojo); font-size: var(--t-sm); line-height: 1.45; }
.pool-panel .nota.falta-meta .ic { flex: none; margin-top: 2px; }
.pool-panel .nota.falta-meta a, .pool-panel .nota.falta-meta b { color: inherit; font-weight: 600; }
.nota.cubre-primero { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--t-sm); line-height: 1.45; color: var(--rojo); }
.nota.cubre-primero .ic { flex: none; margin-top: 2px; }
.nota.cubre-primero a { color: inherit; font-weight: 600; }
.cambiar-salida { margin-top: 6px; }
.cambiar-salida summary { cursor: pointer; font-weight: 600; color: var(--tinta); }
.cambiar-salida .salida-ahorro { padding-bottom: 4px; }
@media (max-width: 900px) {
  .repartir-meta button { min-height: 44px; }
}

/* F27 · Coherencia de toda la app ---------------------------------------------------------------------------------
   Cuentas › Nueva cuenta: la línea que manda a crear una tarjeta en Tarjetas. Metas: «cubierto, pero falta repartir»
   debajo de la barra del mes, más chico que lo que piden. Ajustes sin el bot: la nota arriba de los avisos. Inicio ›
   Patrimonio: cada término de la cuenta («+ $ X») no se corta entre el signo y el número. */
.nota-tarjeta-nueva { display: flex; gap: 8px; align-items: flex-start; margin: 0; line-height: 1.45; text-wrap: pretty; }
.nota-tarjeta-nueva .ic { flex: none; margin-top: 2px; }
.nota-tarjeta-nueva a { font-weight: 600; color: var(--tinta); text-underline-offset: 3px; }
.piden.falta-repartir { margin-top: 10px; max-width: 62ch; font-size: var(--t-sm); line-height: 1.45; text-wrap: pretty; }
.nota.nota-sin-bot { margin: 0 0 12px; line-height: 1.45; }
.nota.nota-sin-bot .ic { flex: none; margin-top: 2px; }
.patrimonio-inicio .junto { white-space: nowrap; }