/* 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 entre páginas (View Transitions), 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;
  --accion: #101418;
  --accion-texto: #ffffff;
  --foco: #2f6fed;
  --verde: #1d7a50;
  --verde-suave: #e2f2e9;
  --rojo: #bf3a2f;
  --rojo-suave: #fbe8e5;
  --ambar: #8f5d06;
  --ambar-suave: #fbf0d7;
  --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;

  /* 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);
    --ambiente-1: rgb(80 110 170 / .14); --ambiente-2: rgb(170 120 80 / .07);
    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);
  --ambiente-1: rgb(80 110 170 / .14); --ambiente-2: rgb(170 120 80 / .07);
  color-scheme: dark;
}

/* --- 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;
}
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; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 8px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
.plata { 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; overflow: hidden; clip: rect(0 0 0 0); 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: 7px; }
.panel + .panel { margin-top: 26px; }

/* --- 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);
  view-transition-name: isla;
}
.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; }
.nav { display: flex; gap: 2px; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 7px; 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);
}
.nav a:hover { color: var(--tinta); background: var(--nucleo-2); }
.nav a[aria-current="page"] { color: var(--accion-texto); background: var(--accion); view-transition-name: nav-activa; }
.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 !important;
}

.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(5, 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);
    view-transition-name: isla;
  }
  .isla-abajo a {
    position: relative; display: grid; justify-items: center; gap: 3px; padding: 7px 2px 5px; border-radius: 20px;
    color: var(--tinta-3); font-size: 11px; font-weight: 500; text-decoration: none;
    transition: color 180ms var(--salida);
  }
  .isla-abajo a .ic { width: 22px; height: 22px; transition: transform 260ms var(--resorte); }
  .isla-abajo a[aria-current="page"] { color: var(--tinta); background: var(--nucleo-2); view-transition-name: nav-activa; }
  .isla-abajo a[aria-current="page"] .ic { transform: translateY(-1px); }
  .isla-abajo .contador { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 17px; height: 17px; font-size: 10px; }
  .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: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.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; align-items: center; gap: 5px; font-size: var(--t-sm); font-weight: 600; text-decoration: none; color: var(--tinta-2); }
.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 !important; font-size: var(--t-xs) !important; }
.icono-solo { padding: 8px !important; }
/* 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; } }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accion); }

.segmento { display: flex; padding: 4px; gap: 4px; background: var(--nucleo-2); border-radius: 999px; }
.segmento label { flex: 1; display: block; }
.segmento input { position: absolute; opacity: 0; pointer-events: none; }
.segmento span {
  display: block; text-align: center; padding: 9px 12px; border-radius: 999px; font-size: var(--t-sm);
  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 input:checked + span { background: var(--nucleo); color: var(--tinta); box-shadow: 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); }
.pildoras a:hover { color: var(--tinta); }
.pildoras a[aria-current="true"] { background: var(--nucleo); color: var(--tinta); box-shadow: 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: 20px; }
.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) {
  .tablero { gap: 14px; } .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; }
.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: -.045em;
  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; 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: -.03em; 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-2); border-radius: 99px; }
.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: var(--a); 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, .rodillo > span { 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: var(--c, var(--tinta-2)); 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 220ms var(--salida);
}
.leyenda li.activa a, .leyenda a:hover { background: var(--nucleo-2); }
.leyenda li.activa a { transform: translateX(3px); }
.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; }
.leyenda .plata { font-weight: 600; }
.leyenda .pct { width: 34px; text-align: right; font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.chip-cat, .cat-ic {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; flex: none;
  color: var(--c); background: color-mix(in srgb, var(--c) 15%, 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); }
.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(--nucleo-2); }

/* --- 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 {
  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);
}
.mov:hover { background: var(--nucleo-2); }
.mov + .mov { box-shadow: 0 -1px 0 var(--linea); }
.mov:hover, .mov:hover + .mov { box-shadow: none; }
.mov.sin-check { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.mov .que { min-width: 0; }
.mov .que strong { display: block; font-weight: 600; 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 { font: 600 var(--t-md) var(--display); letter-spacing: -.01em; }
.mov .acciones { display: flex; gap: 6px; }
.mov.pendiente { background: color-mix(in srgb, var(--ambar) 5%, transparent); }
.mov .que .sello, .sello { display: inline-block; width: auto; color: var(--ambar); font-size: 11px; font-weight: 600; color: var(--ambar); background: var(--ambar-suave); border-radius: 99px; padding: 1px 8px; margin-left: 8px; vertical-align: 1px; }
.mov.editando { display: block; background: var(--nucleo-2); padding: 16px; }
@media (max-width: 640px) {
  .mov { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .mov .acciones { grid-column: 3 / -1; }
  .mov.sin-check { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mov.sin-check .acciones { grid-column: 2 / -1; }
}
.ultimos-panel .mov.sin-check, .pendientes .mov.sin-check { grid-template-columns: auto minmax(0, 1fr) auto auto; }
@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);
}

.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; }
.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); }
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); }
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; }

/* --- cuentas ----------------------------------------------------------------------------- */
.kpis { display: grid; gap: 26px; margin: 7px 7px 34px !important; }
.kpi { padding: 20px 22px; margin: 0; }
.kpi .rot { margin-bottom: 6px; }
.kpi .num { font: 600 clamp(30px, 4vw, 40px)/1.05 var(--display); letter-spacing: -.04em; font-stretch: 88%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .var { margin-top: 6px; }
.cuentas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; margin: 0 7px; }
.cuenta { padding: 20px; display: grid; gap: 12px; align-content: start; }
.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: -.035em; font-stretch: 88%; font-variant-numeric: tabular-nums; }
.cuenta details summary, .cat-fila 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;
}
.cuenta details summary::-webkit-details-marker, .cat-fila details summary::-webkit-details-marker { display: none; }
.cuenta details summary:hover, .cat-fila details summary:hover { color: var(--tinta); }
.cuenta form { display: grid; gap: 10px; margin-top: 10px; }
.cuenta > a { font-size: var(--t-sm); font-weight: 600; }
details.panel > summary { list-style: none; }
details.panel > summary::-webkit-details-marker { display: none; }

/* --- categorías ------------------------------------------------------------------------------ */
.selector-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.selector-iconos label { display: block; }
.selector-iconos input { position: absolute; opacity: 0; pointer-events: none; }
.selector-iconos span { 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 span:hover { background: var(--nucleo-3); }
.selector-iconos span:active { 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 input { position: absolute; opacity: 0; pointer-events: none; }
.selector-colores span { 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 span:hover { transform: scale(1.1); }
.selector-colores input:checked + span { box-shadow: 0 0 0 3px var(--nucleo), 0 0 0 5px var(--c); }
.selector-colores input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 4px; }
.cat-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; transition: background-color 180ms var(--salida); }
.cat-fila:hover { background: var(--nucleo-2); }
.cat-fila + .cat-fila { box-shadow: 0 -1px 0 var(--linea); }
.cat-fila.archivada { opacity: .5; }
.cat-fila details { grid-column: 1 / -1; }

/* --- 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; }
.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)); }
  .hoja .dentro::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 5px; background: var(--nucleo-3); margin: 0 auto 14px; }
}

.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; }
.entrar h1 { margin-bottom: 8px; }
.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 isla queda quieta, la píldora activa viaja y el resto funde */
  @view-transition { navigation: auto; }
  ::view-transition-group(nav-activa) { animation-duration: 460ms; animation-timing-function: var(--resorte); }
  ::view-transition-old(root) { animation: 160ms var(--salida) both vt-sale; }
  ::view-transition-new(root) { animation: 360ms var(--salida) both vt-entra; }
  @keyframes vt-sale { to { opacity: 0; } }
  @keyframes vt-entra { from { opacity: 0; } }

  /* las piezas del tablero llegan en orden, con un desenfoque que se aclara */
  .entrada, .cabecera, .panel, .kpi, .cuenta, main > .dia, main > .movs {
    animation: llegar 620ms var(--salida) both; animation-delay: calc(var(--n, 0) * 70ms);
  }
  .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(4), .cuentas > :nth-child(4), main > :nth-child(4) { --n: 3; }
  .tablero > :nth-child(n+5), .cuentas > :nth-child(n+5), main > :nth-child(n+5) { --n: 4; }
  @keyframes llegar { from { opacity: 0; transform: translateY(16px) scale(.99); filter: blur(6px); } }

  /* 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 ease, transform 180ms ease; }

  /* 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 ease, backdrop-filter 300ms ease, 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, .nido, .isla-abajo a .ic { transition-property: opacity, background-color, color; }
}