/* ============================================================
   Finanzas · v18 · línea Apple
   Solo modo oscuro: base casi negra #050506 con superficies agrupadas #1C1C1E,
   celeste como color de la interfaz y el logo 381 en su verde. Verde, amarillo
   y rojo (colores de sistema de iOS) quedan solo para el semáforo. Tipografía
   del sistema: SF Pro Display en títulos, SF Pro Rounded en cifras.
   Los componentes propios de la línea Apple están en el bloque final.
   ============================================================ */
@view-transition { navigation: auto; }



:root{
  color-scheme: dark;
  /* superficies */
  --bg:#050506; --rail:#0A0A0B; --card:#111113; --sunken:#1C1C1F; --raised:#3A3A3C;   /* v135: tarjetas más oscuras (opción A «Sereno»); antes --card #1C1C1E y --sunken #2C2C2E */
  /* texto (todos AA sobre --card) */
  --label:#F5F5F7; --label-2:#C7C7CC; --label-3:#8E8E93; --label-4:#545458;
  --sep:rgba(84,84,88,0.55); --track:rgba(118,118,128,0.24); --fill:rgba(118,118,128,0.18);
  --grid:rgba(255,255,255,0.07); --edge:rgba(255,255,255,0.05);
  /* marca y estados */
  /* v15: celeste = interfaz (selección, acciones, gráficos). Verde/amarillo/rojo = solo semáforo. */
  --accent:#5AC8FA; --accent-2:#7DD3FC; --accent-ink:#03263B;
  --accent-soft:rgba(90,200,250,0.12); --accent-soft-2:rgba(90,200,250,0.19);
  --ok:#30D158; --justo:#FFD60A; --alto:#FF453A; --warn:#FF9F0A; --info:#5AC8FA;
  --ok-soft:rgba(48,209,88,0.14); --justo-soft:rgba(255,214,10,0.13); --alto-soft:rgba(255,69,58,0.15);
  --up:#FF453A; --up-soft:rgba(255,69,58,0.15); --down:#30D158; --down-soft:rgba(48,209,88,0.14);
  --warn-soft:rgba(255,159,10,0.15);
  --ink:#101014;                       /* texto sobre una franja de color */
  --seg-on:#636366; --bar:rgba(28,28,30,0.72); --scrim:rgba(4,4,6,0.66);
  --shadow:none;
  --shadow-bar:0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  --radius:22px; --radius-sm:14px;
  --font-ui:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  /* v18: línea Apple. Títulos en SF Pro Display, cifras en SF Pro Rounded (en iPhone y Mac; en otros equipos, la del sistema) */
  --font-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --font-num:ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-cartel:var(--font-display);
  /* movimiento (curvas de Emil Kowalski) */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --ease:var(--ease-out); --sheet-ease:var(--ease-drawer);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; background:var(--bg); scrollbar-color:var(--raised) transparent; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--label);
  font-family:var(--font-ui);
  font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
  caret-color:var(--accent); accent-color:var(--accent);
}
::selection{ background:rgba(90,200,250,0.32); color:#fff; }
a{ color:var(--accent); text-decoration:none; }
button{ font-family:inherit; }
[hidden]{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wrap{
  max-width:560px; margin:0 auto;
  padding: calc(env(safe-area-inset-top,0px) + 14px) calc(env(safe-area-inset-right,0px) + 16px)
           calc(max(10px, calc(env(safe-area-inset-bottom,0px) - 12px)) + 92px) calc(env(safe-area-inset-left,0px) + 16px);
  display:flex; flex-direction:column; gap:16px;
}
#app{ display:flex; flex-direction:column; gap:16px; }
#app > div:empty{ display:none; }
.vista-cards, #rVista{ display:flex; flex-direction:column; gap:16px; margin-top:16px; }

/* ---------- cabecera ---------- */
.top{ display:flex; flex-direction:column; gap:18px; padding:2px 2px 0; view-transition-name: cabecera; }
.brand{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand-l{ display:flex; align-items:center; gap:10px; min-width:0; }
/* Logo 381 (variante P): odómetro de tres columnas con sombra dura. Solo CSS `animation` sobre
   transform, sin JS. La regla global de prefers-reduced-motion la deja en la cifra final,
   idéntica al ícono estático. */
.logo381{
  --logo381-bg:#0B1F5B;
  position:relative; flex:none; width:34px; height:34px; border-radius:10px;
  background:var(--logo381-bg); box-shadow:inset 0 0 0 1px rgba(227,231,239,0.16);
  overflow:hidden; isolation:isolate; contain:strict;
}
.logo381__svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* cada columna rueda hasta su cifra y se queda; el tramo es de 10 cifras, así el bucle no tiene costura */
.logo381__tira{
  transform:translateY(calc(45px - (var(--d) + 10) * 270px));
  animation:logo381-rueda 6s cubic-bezier(.12,.85,.15,1) infinite;
}
@keyframes logo381-rueda{
  0%{ transform:translateY(calc(45px - var(--d) * 270px)); }
  46%,100%{ transform:translateY(calc(45px - (var(--d) + 10) * 270px)); }
}
.brand-t{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.brand-t b{ font-size:15px; font-weight:700; letter-spacing:-0.01em; }
.brand-t span{ font-size:12px; color:var(--label-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* indicador de conexión: el punto solo se mueve mientras actualiza (estado, no adorno) */
.live{ border:0; font-family:inherit; cursor:pointer; white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  min-height:32px; font-size:12px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:0 11px; border-radius:999px;
  transition:background-color .2s ease, color .2s ease, transform .14s var(--ease-out); }
.live i{ position:relative; width:7px; height:7px; border-radius:2px; background:currentColor; animation:latido 2s ease-in-out infinite; }
.live i::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:currentColor; animation:anillo 2s ease-out infinite; }
.live.off i, .live.off i::after{ animation:none; }
.live.off{ color:var(--label-3); background:var(--fill); }
.live.sync{ color:var(--accent); background:var(--accent-soft-2); }
.live.sync i, .live.sync i::after{ animation-duration:1s; }

.title-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.title-row h1{ margin:0; min-width:0; font-family:var(--font-display); font-weight:700; font-size:34px; line-height:1.1; letter-spacing:-0.02em; }
.month{ position:relative; display:inline-flex; align-items:center; gap:8px; background:var(--sunken); border:1px solid var(--edge); border-radius:12px; padding:0 12px; min-height:40px; flex-shrink:0; }
.month select{ width:5.7em; text-overflow:ellipsis; appearance:none; -webkit-appearance:none; border:none; background:transparent; font:inherit; font-size:14px; font-weight:650; color:var(--label); padding:0; cursor:pointer; }
.month select option{ background:var(--card); color:var(--label); }
.month svg{ pointer-events:none; }

/* ---------- barra de pestañas ---------- */
.tabbar{
  position:fixed; z-index:40; left:50%; transform:translateX(-50%);
  /* v19: más cerca del borde, como en iOS: sobre la barrita de inicio, no 12px por encima del área segura */
  bottom:max(10px, calc(env(safe-area-inset-bottom,0px) - 12px));
  width:min(528px, calc(100% - 24px));
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:2px; padding:6px; border-radius:22px;
  background:var(--bar); -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:var(--shadow-bar); view-transition-name: pestanas;
}
.tabbar a{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:54px;
  border-radius:16px; color:var(--label-3); font-size:10.5px; font-weight:650; letter-spacing:-0.01em; transition:background-color .25s ease, color .25s ease, transform .28s var(--ease-v13); }
.tabbar a[aria-current="page"]{ color:var(--accent); background:var(--accent-soft); font-weight:750; }

/* ---------- tarjetas ---------- */
.card{ background:var(--card); border-radius:var(--radius); box-shadow:inset 0 1px 0 var(--edge); padding:18px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.card.tight{ gap:6px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:2px 8px; flex-wrap:wrap; min-height:24px; }   /* v13: si no entra, la nota baja a su propia línea en vez de partir el título */
.card-head > :last-child:not(:first-child){ margin-left:auto; }
.card-title{ margin:0; font-size:15px; font-weight:650; letter-spacing:-0.01em; color:var(--label); }
.hint{ font-size:12.5px; color:var(--label-3); font-weight:500; }
.more{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:650; min-height:32px; background:none; border:none; color:var(--accent); cursor:pointer; padding:0; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ display:inline-flex; align-items:center; gap:5px; background:var(--sunken); border-radius:8px; padding:6px 10px; font-size:12.5px; font-weight:550; color:var(--label-2); white-space:nowrap; }
.chip b{ color:var(--label); font-weight:700; }
.chip.up{ background:var(--up-soft); color:var(--up); font-weight:700; }
.chip.down{ background:var(--down-soft); color:var(--down); font-weight:700; }
.t-up{ color:var(--up); font-weight:700; } .t-down{ color:var(--down); font-weight:700; } .muted{ color:var(--label-3); }
.arrow{ display:inline-flex; font-style:normal; }
.arrow svg{ display:block; }

/* cifras de cartel */
.big{ font-family:var(--font-num); font-weight:700; font-size:clamp(40px, 12vw, 48px); letter-spacing:-0.025em; line-height:1.05; margin:2px 0 4px; color:var(--label); font-variant-numeric:tabular-nums; }
.big.md{ font-size:clamp(48px, 14vw, 60px); }
.mid{ font-family:var(--font-num); font-weight:700; font-size:30px; letter-spacing:-0.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.note{ margin:2px 6px 0; font-size:12px; line-height:1.55; color:var(--label-3); max-width:72ch; }
.state{ padding:48px 12px; text-align:center; color:var(--label-3); font-size:14px; }
.spinner{ width:22px; height:22px; margin:0 auto 12px; border-radius:50%; border:2px solid var(--track); border-top-color:var(--accent); animation:spin .8s linear infinite; }
.empty{ padding:14px 0 4px; text-align:center; color:var(--label-3); font-size:13.5px; }

/* carga: esqueleto con la forma de la pantalla (no un spinner en medio) */
.skel-wrap{ display:flex; flex-direction:column; gap:12px; }
.skel{ background:var(--card); border-radius:var(--radius); height:148px; position:relative; overflow:hidden; }
.skel.hero{ height:212px; }
.skel::after{ content:''; position:absolute; left:18px; top:20px; width:38%; height:14px; border-radius:6px; background:var(--sunken); box-shadow:0 34px 0 0 var(--sunken); }
.skel.hero::after{ height:16px; width:30%; box-shadow:0 38px 0 26px var(--sunken); }
.skel{ animation:skel 1.3s ease-in-out infinite; }
.skel:nth-child(2){ animation-delay:.15s; } .skel:nth-child(3){ animation-delay:.3s; }

.metrics{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.metric{ background:var(--sunken); border-radius:var(--radius-sm); padding:12px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.metric .ml{ font-size:12px; color:var(--label-3); font-weight:550; }
.metric .mv{ font-size:18px; font-weight:750; letter-spacing:-0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.metric .ms{ font-size:12px; color:var(--label-3); }
.stat3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.stat3 .metric{ padding:10px 11px; }
.stat3 .mv{ font-size:16px; text-overflow:clip; }

/* ---------- barras ---------- */
.stack{ display:flex; height:12px; border-radius:4px; overflow:hidden; gap:2px; }
.stack span{ display:block; height:100%; }
.stack span:first-child{ border-radius:4px 0 0 4px; } .stack span:last-child{ border-radius:0 4px 4px 0; }
.legend{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--label-2); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:9px; height:9px; border-radius:2px; display:inline-block; }
.legend i.dash{ width:14px; height:0; border-top:1.6px dashed var(--label-3); border-radius:0; }
.legend b{ color:var(--label); }
.track{ height:6px; border-radius:3px; background:var(--track); overflow:hidden; }
.track > span{ display:block; height:100%; border-radius:3px; }

/* ---------- filas / listas ---------- */
.list{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; gap:12px; min-height:58px; border-bottom:1px solid var(--sep); color:var(--label); padding:6px 0; width:100%; background:none; border-left:0; border-right:0; border-top:0; text-align:left; font:inherit; cursor:default; }
.list > .row:last-child, .list > :last-child .row{ border-bottom:none; }
button.row, a.row{ cursor:pointer; }
.row .main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.row .name{ font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .sub{ font-size:12px; line-height:1.35; color:var(--label-3); overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:anywhere; }
.row .right{ display:flex; flex-direction:column; align-items:flex-end; white-space:nowrap; gap:1px; }
.row .amt, .amt{ font-size:14.5px; font-weight:700; white-space:nowrap; }
.row .date{ font-size:11.5px; color:var(--label-3); }
.row .bar{ width:64px; flex-shrink:0; }
.row .row-track{ margin-top:7px; height:5px; }
.chev{ flex-shrink:0; color:var(--label-4); }
.tile{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tile.sm{ width:30px; height:30px; border-radius:8px; }
.tile svg{ display:block; }
.group-h{ display:flex; align-items:center; gap:8px; margin-top:14px; padding-bottom:2px; font-size:13px; font-weight:700; color:var(--label-2); }
.group-h span:nth-child(2){ flex:1; }
.tag{ flex-shrink:0; font-size:11px; font-weight:650; color:var(--accent); background:var(--accent-soft); padding:2px 7px; border-radius:999px; }
.day-h{ display:flex; justify-content:space-between; gap:10px; font-size:12px; font-weight:700; color:var(--label-3); padding:14px 0 2px; }
.day-h span:last-child{ color:var(--label-2); }

/* ---------- control segmentado ---------- */
.seg{ position:relative; display:grid; grid-auto-columns:minmax(0,1fr); grid-auto-flow:column; background:var(--sunken); padding:3px; border-radius:12px; border:1px solid var(--edge); }
.seg .pill{ position:absolute; top:3px; bottom:3px; left:3px; border-radius:9px; background:var(--seg-on);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4); transition:transform .5s var(--ease-v13); }
.seg button{ position:relative; z-index:1; min-height:38px; border:none; background:transparent; border-radius:9px; font-size:13px; font-weight:600; color:var(--label-3); cursor:pointer; white-space:nowrap; padding:0 6px; transition:color .2s ease; }
.seg button[aria-pressed="true"]{ color:var(--label); font-weight:700; }

.search{ display:flex; align-items:center; gap:8px; background:var(--sunken); border:1px solid var(--edge); border-radius:12px; min-height:46px; padding:0 4px 0 12px; transition:border-color .2s ease; }
.search:focus-within{ border-color:rgba(90,200,250,0.5); }
.search input{ flex:1; min-width:0; border:none; background:transparent; font:inherit; font-size:16px; color:var(--label); outline:none; padding:10px 0; }
.search input::placeholder{ color:var(--label-3); }
.search input::-webkit-search-cancel-button{ display:none; }
.search .clear[hidden]{ display:none; }
.search .clear{ width:36px; height:36px; border:none; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--label-2); }
.search .clear span{ width:20px; height:20px; border-radius:50%; background:var(--track); display:flex; align-items:center; justify-content:center; }

/* ---------- cartel de estado (firma del sistema) ----------
   El estado del mes no es un chip: es una franja de color a todo lo ancho,
   como un afiche. Verde 381 = vas bien, amarillo = vas justo, rosa = te pasaste. */
/* v18: el estado deja de ser una franja y pasa a ser texto de color con su ícono, como en Salud */
.cartel{ --st:var(--ok); display:flex; align-items:center; justify-content:space-between; gap:6px 14px; flex-wrap:wrap; margin:0; padding:0; background:none; color:var(--st); }
.cartel b{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-ui); font-weight:650; font-size:15px; line-height:1.3; letter-spacing:-0.01em; }
.cartel span{ font-size:13px; font-weight:500; color:var(--label-3); }
.cartel.st-ok{ --st:var(--ok); } .cartel.st-justo{ --st:var(--justo); } .cartel.st-alto{ --st:var(--alto); }

.pill-state{ --st:var(--ok); display:inline-flex; align-items:center; font-size:12px; font-weight:650; padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:color-mix(in srgb, var(--st) 18%, transparent); color:var(--st); }
.pill-state i{ display:none; }
.st-ok{ --st:var(--ok); } .st-justo{ --st:var(--justo); } .st-alto{ --st:var(--alto); }
.msg{ margin:0; font-size:15px; line-height:1.5; font-weight:500; color:var(--label-2); max-width:62ch; }
.msg b{ color:var(--label); }
.meter{ position:relative; height:12px; border-radius:4px; background:var(--track); }
.meter .fill{ position:absolute; left:0; top:0; bottom:0; border-radius:4px; }
.meter .mark{ position:absolute; top:-5px; width:2px; height:22px; margin-left:-1px; }
.meter .mark i{ display:block; width:100%; height:100%; border-radius:1px; background:var(--label); box-shadow:0 0 0 2px var(--card); }
/* v16: proyección de cierre detrás de lo que llevas (contorno punteado del color del estado) */
.meter .ghost{ position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:color-mix(in srgb, var(--c) 18%, transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent); }
.meter-leg{ font-size:12px; color:var(--label-3); gap:6px 14px; }
.meter-leg b{ color:var(--label-2); }
.meter-leg i.k-ghost{ background:color-mix(in srgb, var(--c) 18%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent); }
.meter-leg i.k-mark{ width:2px; height:12px; border-radius:1px; background:var(--label); }
.scale{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--label-3); font-weight:600; }
.flag{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45; color:var(--label-2); border-top:1px solid var(--sep); padding-top:12px; }
.flag b{ color:var(--label); }
.pace{ --st:var(--accent); display:flex; align-items:center; justify-content:space-between; gap:14px; background:color-mix(in srgb, var(--st) 13%, transparent);
  border-radius:16px; padding:12px 14px; }
.pace.st-ok{ --st:var(--ok); } .pace.st-justo{ --st:var(--justo); } .pace.st-alto{ --st:var(--alto); }
.pace-t{ min-width:0; }
.pace-n{ display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; }
.pace-n b{ font-family:var(--font-num); font-weight:700; font-size:28px; line-height:1.05; letter-spacing:-0.02em; color:var(--label); font-variant-numeric:tabular-nums; }
.pace-n span{ font-size:11.5px; font-weight:650; color:var(--label-2); margin-top:3px; }
.presu-cat{ display:flex; flex-direction:column; gap:10px; background:var(--sunken); border-radius:12px; padding:14px; }
.row-tap-inner{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; background:none; border:none; padding:0; margin:0; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.row-tap-inner .chev{ color:var(--label-4); flex-shrink:0; }
.presu-row-input{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.presu-row-input .cur{ font-size:13px; color:var(--label-3); font-weight:600; }
.presu-row-input input{ width:84px; min-height:40px; border-radius:10px; border:1px solid var(--edge); background:var(--sunken); padding:0 10px; font:inherit; font-size:16px; font-weight:650; color:var(--label); text-align:right; transition:border-color .2s ease; }
.presu-total{ display:flex; flex-direction:column; gap:8px; background:var(--sunken); border-radius:12px; padding:14px; }
.presu-total .line{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--label-2); }
.presu-total .line.total{ align-items:baseline; font-size:15px; font-weight:700; color:var(--label); padding-top:10px; margin-top:2px; border-top:1px solid var(--sep); }
.presu-total .line.total span:last-child{ font-family:var(--font-num); font-weight:700; font-size:26px; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--accent); }
.pace b{ color:var(--label); }
.pace .pt{ font-size:14px; font-weight:700; } .pace .ps{ font-size:12.5px; color:var(--label-2); }
.btn{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 16px; border-radius:12px; border:none;
  background:var(--accent-soft); color:var(--accent); font-size:14px; font-weight:700; cursor:pointer;
  transition:transform .14s var(--ease-out), background-color .2s ease, color .2s ease; }
.btn.solid{ background:var(--accent); color:var(--accent-ink); }
.btn.ghost{ background:transparent; color:var(--label-2); box-shadow:inset 0 0 0 1px var(--sep); }
.btn.sm{ min-height:36px; padding:0 12px; font-size:13px; border-radius:10px; }
.btn.done{ background:var(--down-soft); color:var(--down); }
.btn:disabled{ opacity:.45; cursor:default; }
.form{ display:flex; gap:8px; flex-wrap:wrap; }
.form input{ flex:1; min-width:120px; min-height:44px; border-radius:12px; border:1px solid var(--edge); background:var(--sunken); padding:0 12px; font:inherit; font-size:16px; color:var(--label); transition:border-color .2s ease; }
.form input::placeholder, .presu-row-input input::placeholder{ color:var(--label-3); }
.form input:focus, .presu-row-input input:focus{ outline:none; border-color:var(--accent); }

/* ---------- gráficos ---------- */
.chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.chart text{ font-family:inherit; }
.vbars{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; align-items:end; }
.vbars .col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; height:100%; min-width:0; }
.vbars .v{ font-size:10.5px; font-weight:650; color:var(--label-3); white-space:nowrap; }
.vbars .b{ position:relative; width:100%; border-radius:5px 5px 2px 2px; }
.vbars .col.on .v{ color:var(--label); font-weight:800; }
.xlabels{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; text-align:center; font-size:11px; letter-spacing:-0.01em; color:var(--label-3); font-weight:550; }
.xlabels .on{ color:var(--label); font-weight:800; }
.bars-wrap{ position:relative; }
.goal-line{ position:absolute; left:0; right:0; border-top:1.5px dashed var(--label-3); pointer-events:none; }
.donut-row{ display:flex; align-items:center; gap:18px; }
.donut{ position:relative; width:132px; height:132px; flex-shrink:0; }
.donut .c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut .c b{ font-family:var(--font-num); font-weight:700; font-size:19px; letter-spacing:-0.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.donut .c b.sm{ font-size:16px; }   /* totales enteros de 5 cifras (S/ 12,345) caben en el hueco de 84px */
.donut .c span{ font-size:11px; color:var(--label-3); margin-top:3px; }
.leg{ flex:1; min-width:0; display:flex; flex-direction:column; }
.leg div{ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13.5px; }
.leg i{ width:9px; height:9px; border-radius:2px; flex-shrink:0; align-self:flex-start; margin-top:4px; }
.leg .n{ flex:1; min-width:0; color:var(--label-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; flex-direction:column; line-height:1.3; }
.leg .n b{ color:var(--label); font-size:13px; }
.leg .v{ font-weight:700; font-size:13px; white-space:nowrap; }
.leg .p{ font-size:12px; color:var(--label-3); min-width:38px; text-align:right; }

/* calendario */
.cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.cal .wd{ font-size:11px; font-weight:650; color:var(--label-3); text-align:center; }
.cal .d{ position:relative; aspect-ratio:1; border:none; border-radius:8px; display:flex; flex-direction:column; justify-content:space-between; padding:5px 6px; font:inherit; cursor:pointer;
  transition:box-shadow .25s ease, transform .3s var(--ease-v13); }
.cal .d .n{ font-size:10.5px; font-weight:750; line-height:1; text-align:left; }
.cal .d .a{ font-size:9.5px; font-weight:650; line-height:1; text-align:right; opacity:.9; }
.cal .d.dark{ color:var(--accent-ink); } .cal .d.light{ color:var(--label); }
.cal .d.today{ box-shadow:inset 0 0 0 1.5px var(--label); }
.cal .d[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--accent); transform:scale(1.03); }
.cal .d.fut{ background:transparent; border:1.5px dashed var(--raised); cursor:default; }
.cal .d.fut .n{ color:var(--label-4); }
.cal-legend{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--label-3); }
.cal-legend .sc{ display:inline-flex; align-items:center; gap:4px; }
.cal-legend .sc i{ width:12px; height:12px; border-radius:3px; }
.daybox{ background:var(--sunken); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.daybox .top-l{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.daybox .lbl{ font-size:12.5px; color:var(--label-3); font-weight:600; }
.daybox .val{ font-family:var(--font-num); font-weight:700; font-size:34px; letter-spacing:-0.02em; line-height:1.1; margin-top:2px; font-variant-numeric:tabular-nums; }
.insight{ margin:0; font-size:13.5px; line-height:1.5; color:var(--label-2); background:var(--sunken); border-radius:12px; padding:12px 14px; }
.insight b{ color:var(--label); }
.vs{ display:flex; flex-direction:column; gap:10px; }
.vs .r{ display:flex; align-items:center; gap:10px; }
.vs .r .l{ width:72px; font-size:12.5px; font-weight:650; color:var(--label-2); }
.vs .r .t{ flex:1; height:12px; border-radius:4px; background:var(--track); overflow:hidden; }
.vs .r .t span{ display:block; height:100%; border-radius:4px; }
.vs .r .v{ width:62px; text-align:right; font-size:14px; font-weight:700; }

.row .row-track{ position:relative; overflow:visible; }
.row .row-track > span:first-child{ border-radius:3px; }
.pace-tick{ position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; border-radius:1px; background:var(--label); box-shadow:0 0 0 1.5px var(--card); }

.legend i.dash.dash-meta{ border-top-color:var(--label-3); border-top-width:1.6px; }
.legend i.k-meta{ width:14px; height:0; border-top:1px solid var(--label-2); border-radius:0; opacity:.8; }
.row .split{ font-size:11.5px; color:var(--label-3); line-height:1.35; margin-top:1px; }
.legend i.dash.dot{ border-top-style:dotted; border-top-width:2.5px; }
.legend .tap-hint{ color:var(--label-3); font-size:11.5px; }
@media (hover:hover) and (pointer:fine){ .legend .tap-hint{ display:none; } }
/* dona interactiva (v16) */
.donut .seg{ transition:opacity .3s ease; cursor:pointer; }
.donut.hl .seg{ opacity:.18; } .donut.hl .seg.on{ opacity:1; }
.donut .c span{ max-width:84px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leg [data-i]{ cursor:pointer; border-radius:8px; margin:0 -8px; padding:6px 8px; transition:background-color .2s ease, opacity .25s ease; }
.leg.has-sel [data-i]:not(.on){ opacity:.72; }
.leg [data-i].on{ background:var(--fill); }
.leg [data-i]:focus-visible{ outline:2px solid var(--accent); outline-offset:0; }
.tap-hint{ font-size:11.5px; color:var(--label-3); }
@media (hover:hover) and (pointer:fine){ .tap-hint{ display:none; } }
.t-justo{ color:var(--justo); }

/* línea de tiempo de cobros fijos (v16) */
.tl{ position:relative; height:46px; margin:2px 4px 0; }
.tl-track{ position:absolute; left:0; right:0; top:14px; height:4px; border-radius:2px; background:var(--track); overflow:hidden; }
.tl-pasado{ display:block; height:100%; background:color-mix(in srgb, var(--accent) 45%, transparent); border-radius:2px; }
.tl-m{ position:absolute; top:10px; width:12px; height:12px; margin-left:-6px; border-radius:50%; transform-box:border-box; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:800; color:var(--ink); }
.tl-m.multi{ top:7px; width:18px; height:18px; margin-left:-9px; }
.tl-m.ok{ background:var(--ok); box-shadow:0 0 0 2px var(--card); }
.tl-m.pend{ background:var(--card); box-shadow:inset 0 0 0 2.5px var(--warn), 0 0 0 2px var(--card); }
.tl-hoy{ position:absolute; top:4px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; font-weight:800; color:var(--accent); }
.tl-hoy i{ display:block; width:2px; height:24px; border-radius:1px; background:var(--accent); }
.tl-ticks{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; font-size:10.5px; color:var(--label-3); font-weight:600; }
.tl-leg{ font-size:12px; color:var(--label-3); gap:6px 14px; }
.tl-leg i.tl-k{ width:9px; height:9px; border-radius:50%; }
.tl-leg i.tl-k.ok{ background:var(--ok); } .tl-leg i.tl-k.pend{ background:transparent; box-shadow:inset 0 0 0 2px var(--warn); }
.tl-next{ color:var(--label-2); flex-basis:100%; }
.tl-next b{ color:var(--label); }

.presu-row-input{ position:relative; }
.presu-row-input .ok-tick{ position:absolute; right:-6px; top:-6px; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--ok); color:var(--ink); opacity:0; scale:.6; transition:opacity .3s ease, scale .4s var(--spring); pointer-events:none; }
.presu-row-input.guardado .ok-tick{ opacity:1; scale:1; }
.presu-row-input.guardado input{ border-color:var(--ok); transition:border-color .2s ease; }

/* aviso breve (v16) */
.aviso{ position:fixed; z-index:150; left:50%; top:calc(env(safe-area-inset-top,0px) + 12px); display:flex; align-items:center; gap:8px; max-width:calc(100% - 32px);
  padding:10px 16px; border-radius:999px; background:var(--raised); color:var(--label); font-size:13.5px; font-weight:700;
  box-shadow:0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
  transform:translate(-50%, -140%); opacity:0; transition:transform .45s var(--ease-v13), opacity .3s ease; pointer-events:none; }
.aviso.on{ transform:translate(-50%, 0); opacity:1; }
.aviso svg{ flex-shrink:0; }
.aviso-ok svg{ color:var(--ok); } .aviso-nuevo svg{ color:var(--accent); } .aviso-error svg{ color:var(--alto); }

/* búsqueda: lo que buscaste, marcado (v16) */
mark.hl{ background:color-mix(in srgb, var(--accent) 26%, transparent); color:var(--label); border-radius:3px; padding:0 1px; }

/* capa táctil de gráficos de línea (v16) */
.chart.scrubbable{ position:relative; touch-action:pan-y; cursor:crosshair; border-radius:8px; }
.chart.scrubbable:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.scrub-g{ opacity:0; transition:opacity .2s ease; pointer-events:none; }
.scrubbing .scrub-g{ opacity:1; }
.scrub-line{ stroke:var(--label-2); stroke-width:1; transition:transform .16s var(--ease-out); }
.scrub-dot{ fill:var(--accent); stroke:var(--card); stroke-width:2.5; transition:transform .16s var(--ease-out); }
.scrub-tip{ position:absolute; left:0; top:-10px; translate:0 -100%; z-index:2; pointer-events:none; display:flex; flex-direction:column; gap:1px; min-width:132px;
  padding:8px 11px; border-radius:10px; background:var(--raised); box-shadow:0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.07);
  opacity:0; scale:.96; transition:opacity .18s ease, scale .18s var(--ease-out), transform .16s var(--ease-out); white-space:nowrap; }
.scrubbing .scrub-tip{ opacity:1; scale:1; }
.scrub-tip b{ font-size:15px; font-weight:800; color:var(--label); }
.scrub-tip span{ font-size:11.5px; color:var(--label-3); font-weight:600; }
.scrub-tip em{ font-style:normal; font-size:11.5px; font-weight:700; }
.scrub-tip em.t-up{ color:var(--alto); } .scrub-tip em.t-down{ color:var(--ok); }

/* resumen (v15) */
.res-metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.res-metrics .mv.t-down{ color:var(--ok); } .res-metrics .mv.t-up{ color:var(--alto); }
.div-track{ position:relative; display:block; height:6px; margin-top:7px; border-radius:3px; background:var(--track); }
.div-track::before{ content:''; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--label-4); }
.div-bar{ position:absolute; top:0; bottom:0; border-radius:3px; }
.div-bar.up{ left:50%; background:var(--alto); transform-origin:left; }
.div-bar.down{ right:50%; background:var(--ok); }
.in .div-bar.down.gx{ transform-origin:right; } .div-bar.down.gx{ transform-origin:right; }
.heat{ display:flex; flex-direction:column; gap:4px; }
.heat-row{ display:grid; grid-template-columns:minmax(84px,1.6fr) repeat(var(--n),minmax(0,1fr)); gap:4px; align-items:center; width:100%;
  background:none; border:0; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer; border-radius:8px; }
.heat-row.heat-h{ cursor:default; }
.heat-name{ display:flex; align-items:center; gap:7px; min-width:0; font-size:12.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:4px; }
.heat-name i{ width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.heat-c{ height:34px; display:flex; align-items:center; justify-content:center; border-radius:6px; font-size:11px; font-weight:700; white-space:nowrap; }
.heat-h .heat-c{ height:auto; font-size:11px; font-weight:600; color:var(--label-3); }
.heat-h .heat-c.on{ color:var(--accent); font-weight:800; }
.heat-row:not(.heat-h) .heat-c.on{ box-shadow:inset 0 0 0 1.5px var(--accent); }
@media (hover:hover) and (pointer:fine){ .heat-row:not(.heat-h):hover .heat-name{ color:var(--accent); } }
@media (max-width:600px){
  .heat-row{ grid-template-columns:repeat(var(--n),minmax(0,1fr)); row-gap:3px; }
  .heat-name{ grid-column:1 / -1; padding-top:6px; }
  .heat-h .heat-name{ display:none; }
}

/* préstamos */
.loan{ padding:12px 0; border-bottom:1px solid var(--sep); display:flex; flex-direction:column; gap:8px; }
.loan:last-child{ border-bottom:none; }
/* v12: la fila de cada persona se toca para ver su detalle */
.loan.tap{ width:100%; background:none; border:0; border-bottom:1px solid var(--sep); text-align:left; font:inherit; color:inherit; cursor:pointer; }
.loan.tap:last-child{ border-bottom:none; }
.loan .who .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.loan .who .cnt{ flex-shrink:0; font-size:11px; font-weight:750; color:var(--label-2); background:var(--fill); border-radius:999px; padding:1px 7px; }
.loan .amt{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.row.dim{ opacity:.5; }
.loan .lt{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.loan .who{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; min-width:0; }
.av{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; flex-shrink:0; }
.loan .meta{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--label-3); }
.loan .meta b{ color:var(--label-2); }

/* ---------- hoja de detalle ----------
   Sube desde abajo con la curva tipo iOS; al cerrar baja más rápido que como subió. */
.sheet-ov{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center; background:rgba(4,4,6,0); transition:background-color .3s ease; }
.sheet-ov.open{ background:var(--scrim); }
.sheet{ width:100%; max-width:560px; max-height:92vh; background:#1A1A20; border-radius:22px 22px 0 0; display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .55s var(--ease-drawer); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 -12px 40px rgba(0,0,0,0.5);
  padding-bottom:env(safe-area-inset-bottom,0px); }
.sheet-ov.open .sheet{ transform:translateY(0); }
.sheet-grip{ width:38px; height:5px; border-radius:3px; background:var(--label-4); margin:10px auto 2px; flex-shrink:0; }
.sheet-head{ display:flex; align-items:center; gap:10px; padding:6px 18px 12px; flex-shrink:0; }
.sheet-head .tt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sheet-head .crumb{ font-size:12px; font-weight:700; }
.sheet-head h2{ margin:0; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-0.02em; line-height:1.15; }
.sheet-head h2 > span:not(.tile){ min-width:0; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:anywhere; }
.sheet-x, .sheet-back{ width:44px; height:44px; border-radius:50%; border:none; background:var(--sunken); color:var(--label-2); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:transform .14s var(--ease-out), background-color .2s ease; }
.sheet-back[hidden]{ display:none; }
.sheet-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:2px 18px 28px; display:flex; flex-direction:column; gap:18px; }
.block-label{ display:block; margin-bottom:4px; font-size:13px; font-weight:650; color:var(--label-2); }

/* ---------- movimiento (v15) ----------
   Vuelven todas las animaciones de la v13, con sus mismos tiempos (más pausados),
   pero rehechas para no repintar la pantalla: los pulsos, brillos y anillos ya no
   animan box-shadow (eso gastaba ~2 s de CPU cada 5 s con la app quieta); animan
   transform y opacity de una capa propia, que la tarjeta de video mueve sola.
   La regla global de prefers-reduced-motion las apaga todas. */
:root{ --ease-v13:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1); }
/* v93: sin filter:blur en la entrada (repintar el desenfoque de cada tarjeta en cada cuadro era lo más caro de abrir una pestaña) */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes reveal{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@keyframes growY{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes growX{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pop{ 0%{ opacity:0; transform:scale(.3); } 60%{ opacity:1; transform:scale(1.15); } 100%{ opacity:1; transform:scale(1); } }
@keyframes anillo{ 0%{ transform:scale(1); opacity:.6; } 70%,100%{ transform:scale(2.6); opacity:0; } }
@keyframes latido{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.3); } }
@keyframes ping{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(2.3); opacity:0; } }
@keyframes brillo{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }
@keyframes anilloHoy{ 0%{ transform:scale(1); opacity:.75; } 70%,100%{ transform:scale(1.22); opacity:0; } }
@keyframes parpadeo{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes bobUp{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@keyframes bobDown{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(2px); } }
@keyframes navIn{ from{ opacity:0; transform:translate(-50%,28px) scale(.96); } to{ opacity:1; transform:translate(-50%,0); } }
@keyframes skel{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* entrada de tarjetas y gráficos (tiempos de la v13) */
.anim{ opacity:0; }
.anim.in{ animation:fadeUp .55s var(--ease-v13) both; animation-delay:var(--d,0ms); }
.gy{ transform-origin:bottom; transform:scaleY(0); }
.in .gy{ animation:growY .65s var(--ease-v13) both; animation-delay:calc(var(--d,0ms) + var(--i,0) * 55ms + 150ms); }
.gx{ transform-origin:left; transform:scaleX(0); }
.in .gx{ animation:growX 1s var(--ease-v13) both; animation-delay:calc(var(--d,0ms) + var(--i,0) * 45ms + 200ms); }
.dr{ stroke-dasharray:1; stroke-dashoffset:1; }
.in .dr{ animation:draw 1.2s var(--ease-v13) both; animation-delay:calc(var(--d,0ms) + 250ms); }
.fi{ opacity:0; }
.in .fi{ animation:fadeIn .8s ease both; animation-delay:calc(var(--d,0ms) + var(--i,0) * 60ms + 450ms); }
.pp{ opacity:0; transform-box:fill-box; transform-origin:center; }
.in .pp{ animation:pop .6s var(--spring) both; animation-delay:calc(var(--d,0ms) + var(--i,0) * 80ms + 700ms); }
.cal .d.pp{ transform-box:border-box; }
.in .cal .d.pp{ animation-delay:calc(var(--i,0) * 18ms + 200ms); }
.view-in{ animation:reveal .45s var(--ease-v13) both; }
.quiet .anim{ opacity:1; animation:none !important; }
.quiet .gy, .quiet .gx{ transform:none; animation:none !important; }
.quiet .dr{ stroke-dashoffset:0; animation:none !important; }
.quiet .fi, .quiet .pp{ opacity:1; animation:none !important; }

/* detalles vivos (vuelven de la v13, sin repintar) */
.live-ping{ transform-box:fill-box; transform-origin:center; animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
.arrow{ will-change:transform; }
/* v48: las flechas de sube/baja quedan quietas (el rebote sin fin distraía al leer las cifras) */
.chip.up .arrow, .t-up .arrow, .chip.down .arrow, .t-down .arrow{ animation:none; }
.vbars .col.on .b::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 12px 1px rgba(238,239,242,0.30); opacity:0; animation:brillo 2.2s ease-in-out infinite; will-change:opacity; }
.cal .d.today{ box-shadow:inset 0 0 0 1.5px var(--accent); }
.cal .d.today::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 2px var(--accent); animation:anilloHoy 2.4s ease-out infinite; will-change:transform,opacity; }
.meter .mark i{ animation:parpadeo 1.8s ease-in-out infinite; }
/* secuencia de la barra Meta: lo que llevas, luego hacia dónde vas, al final dónde deberías ir */
.in .meter .ghost.gx{ animation-delay:calc(var(--d,0ms) + 1100ms); }
.pill-state i{ display:none; }
.pill-state.st-alto{ display:inline-flex; align-items:center; gap:6px; }
.pill-state.st-alto i{ display:block; position:relative; width:6px; height:6px; border-radius:1px; background:var(--ink); }
.pill-state.st-alto i::after, .cartel.st-alto b i::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:currentColor; animation:anillo 1.6s ease-out infinite; }
.cartel b i{ display:none; }
.cartel.st-alto b i{ display:inline-block; position:relative; width:8px; height:8px; margin:0 8px 4px 0; vertical-align:middle; border-radius:2px; background:var(--ink); color:var(--ink); }
.tabbar{ animation:navIn .7s var(--ease-v13) both .1s; }

/* respuesta al toque (v13): todo lo que se toca se hunde un poco */
a, button, summary, label, .row{ transition:transform .28s var(--ease-v13), background-color .2s ease, opacity .2s ease; }
a:active, button:active, .row:active{ transform:scale(.975); }
.cal .d.fut:active, .tabbar a:active{ transform:none; }
.btn:active, .sheet-x:active, .sheet-back:active, .live:active, .month:active{ transform:scale(.97); }
.tabbar a:active{ background:var(--fill); }
button.row:active, a.row:active, .loan.tap:active, .row-tap-inner:active{ background:var(--fill); }
@media (hover:hover) and (pointer:fine){
  .btn:hover{ background:var(--accent-soft-2); } .btn.solid:hover{ background:var(--accent-2); } .btn.ghost:hover{ background:var(--fill); }
  .more:hover{ color:var(--accent-2); }
  .sheet-x:hover, .sheet-back:hover{ background:var(--raised); }
}

::view-transition-old(root), ::view-transition-new(root){ animation-duration:.25s; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .anim, .fi, .pp{ opacity:1 !important; }
  /* v47: menos movimiento no es cero aviso: los fundidos de opacidad se quedan (sin desplazamientos) */
  .anim.in{ animation:fadeIn .15s ease both !important; }
  .aviso, .sheet-ov{ transition:opacity .15s ease, background-color .15s ease !important; }
  .cl-now.entra{ animation:fadeIn .15s ease both !important; }
  .gy, .gx{ transform:none !important; }
  .dr{ stroke-dashoffset:0 !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}
@media (min-width:600px){ .wrap{ padding-top:28px; } .res-metrics{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:480px){ .hint-tap{ display:none; } }
@media (max-width:400px){ .tabbar{ padding:5px; gap:0; } .tabbar a{ font-size:11px; letter-spacing:-0.03em; } }
@media (max-width:340px){ .tabbar{ width:calc(100% - 12px); padding:4px; } .tabbar a{ font-size:11px; letter-spacing:-0.04em; } }
@media (max-width:370px){ .stat3{ gap:6px; } .stat3 .metric{ padding:9px 9px; } .stat3 .ml{ font-size:11px; } .stat3 .mv{ font-size:14px; letter-spacing:-0.03em; } }

/* ============================================================
   Vista de escritorio
   Mismo HTML, mismo JS, mismos datos: la barra de pestañas se
   convierte en un riel lateral fijo y las hojas de detalle se
   abren como ventanas centradas en vez de deslizarse desde abajo.
   ============================================================ */
@media (min-width:880px){
  body{ display:flex; align-items:flex-start; min-height:100vh; }

  .tabbar{
    position:sticky; top:0; left:auto; right:auto; bottom:auto; transform:none;
    order:-1; flex-shrink:0;
    width:232px; height:100vh; max-width:none;
    display:flex; flex-direction:column; align-items:stretch;
    gap:2px; padding:32px 14px; border-radius:0;
    background:var(--rail); -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:inset -1px 0 0 var(--sep);
    animation:none;
  }
  .tabbar a{ flex-direction:row; justify-content:flex-start; gap:12px; min-height:44px; padding:0 12px; border-radius:10px; font-size:14.5px; }
  @media (hover:hover){ .tabbar a:not([aria-current="page"]):hover{ background:var(--fill); color:var(--label-2); } }

  .wrap{ flex:1 1 auto; min-width:0; max-width:1680px; margin:0; padding:40px 48px 64px; }
  .card{ padding:22px 24px; }
  .cartel{ margin:-22px -24px 4px; padding:11px 24px 10px; }
  .title-row h1{ font-size:52px; }
  @media (hover:hover){
    button.row:hover, a.row:hover{ background:var(--sunken); border-radius:10px; }
    .row-tap-inner:hover{ background:var(--sunken); border-radius:10px; padding:6px 8px; margin:-6px -8px; }
  }

  .sheet-ov{ align-items:center; padding:24px; }
  .sheet{ width:min(600px,100%); max-height:min(760px,88vh); border-radius:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 24px 70px rgba(0,0,0,0.6), 0 0 0 1px var(--sep);
    transform:scale(.96); opacity:0; transition:transform .35s var(--ease-v13), opacity .3s ease; }
  .sheet-ov.open .sheet{ transform:scale(1); opacity:1; }
  .sheet-grip{ display:none; }
}

/* -------- pantallas anchas: las tarjetas se reacomodan en 2 columnas ---- */
@media (min-width:1240px){
  .wrap{ flex:1 1 auto; min-width:0; max-width:1680px; padding:40px 56px 64px; }
  #app{ display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:20px; align-items:start; }
  #app > .card{ margin:0; width:100%; }
  #app > .card.wide{ grid-column:1 / -1; }
  .note{ grid-column:1 / -1; }
  body[data-page="gastos"] #app{ display:flex; align-items:stretch; }
  .vista-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:20px; align-items:start; margin-top:20px; }
  .vista-cards > .card{ margin:0; width:100%; }
  .vista-cards > .card.wide{ grid-column:1 / -1; }

  body[data-page="ritmo"] #app{ display:flex; align-items:stretch; }
  #rVista{ display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:20px; align-items:start; margin-top:12px; }
  #rVista > .card{ margin:0; width:100%; }
  #rVista > .card.wide{ grid-column:1 / -1; }

  .sub-cols{ column-width:320px; column-gap:28px; }
  .cat-group{ break-inside:avoid; margin-bottom:4px; }
  .donut-row{ max-width:640px; margin:0 auto; gap:32px; }
  .donut-row .leg{ flex:1; }

  .cal-card{ display:grid; grid-template-columns:minmax(0,1fr) 340px; column-gap:28px; align-items:start; }
  .cal-card .card-head{ grid-column:1; }
  .cal-card .cal{ grid-column:1; max-width:620px; }
  .cal-card .cal-legend{ grid-column:1; max-width:620px; }
  .cal-card .daybox{ grid-column:2; grid-row:1 / 4; align-self:stretch; margin:0; max-height:none; overflow-y:auto; }
  .skel-wrap{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .skel.hero{ grid-column:1 / -1; }
}

/* ---------- candado de acceso ---------- */
body.gate-lock .wrap, body.gate-lock .tabbar{ display:none; }
.gate-ov{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); }
.gate-card{ width:100%; max-width:340px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  background:var(--card); border-radius:22px; padding:32px 24px; box-shadow:inset 0 1px 0 var(--edge); }
.gate-card .logo381{ width:56px; height:56px; border-radius:16px; margin-bottom:8px; }
.gate-card h1{ margin:0; font-family:var(--font-display); font-weight:700; font-size:30px; line-height:1.15; letter-spacing:-0.02em; color:var(--label); }
.gate-card .hint{ margin:0 0 12px; }
.gate-form{ width:100%; display:flex; flex-direction:column; gap:10px; }
.gate-form input{ width:100%; min-height:48px; border-radius:12px; border:1px solid var(--edge); background:var(--sunken); padding:0 14px; font:inherit; font-size:18px; letter-spacing:0.2em; color:var(--label); text-align:center; }
.gate-form input:focus{ outline:none; border-color:var(--accent); }
.gate-form input::placeholder{ letter-spacing:0.02em; color:var(--label-3); }
.gate-form .btn{ width:100%; justify-content:center; align-self:stretch; }
.gate-err{ margin:10px 0 0; font-size:12.5px; color:var(--alto); font-weight:650; }
.gate-card.shake{ animation:gateShake .4s ease; }
@keyframes gateShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-7px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(2px); } }

/* ===== v17 · reorganización ===== */
/* Inicio: la tarjeta principal junta gasto + meta; el reparto y las acciones cierran la tarjeta */
.hero-split{ display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--sep); }
.hero-sep{ height:1px; background:var(--sep); margin:4px 0; }
.sub-h{ margin:0; font-size:15px; font-weight:650; }
.hero-acc{ display:flex; flex-wrap:wrap; gap:8px; }
.hero-acc .btn{ align-self:auto; }
/* atajos: a dónde ir para cada pregunta */
.atajos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.atajo{ display:flex; flex-direction:column; gap:2px; min-height:72px; padding:12px; border-radius:14px; background:var(--sunken); color:var(--label); text-decoration:none;
  transition:transform .14s cubic-bezier(.23,1,.32,1), background-color .2s ease; }
.atajo svg{ margin-bottom:4px; }
.atajo b{ font-size:14px; font-weight:700; }
.atajo span{ font-size:12px; color:var(--label-3); line-height:1.3; }
.atajo:active{ transform:scale(.97); }
@media (hover:hover){ .atajo:hover{ background:var(--raised); } }
/* en PC los atajos se ponen al lado de las alertas y los últimos movimientos van debajo, a todo el ancho */
@media (min-width:1240px){ body[data-page="inicio"] #app > .c-atajos{ order:2; } body[data-page="inicio"] #app > .c-ult{ order:3; } body[data-page="inicio"] #app > .note{ order:4; } }
/* Historial: cada mes marcado contra la meta, debajo de la curva */
.mes-pills{ display:grid; grid-template-columns:repeat(auto-fit, minmax(48px, 1fr)); gap:6px; }
.mes-pill{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; border-radius:12px; background:color-mix(in srgb, var(--c) 10%, transparent); font-size:12px; color:var(--label-2); }
.mes-pill b{ font-size:12px; font-weight:700; color:var(--label); }
.mes-pill span{ font-variant-numeric:tabular-nums; }
.mes-pill.on{ box-shadow:inset 0 0 0 1.5px var(--c); }
/* Gastos tiene 4 vistas: en pantallas angostas el texto se achica un poco para que ninguna etiqueta se pegue */
@media (max-width:400px){ #vista button{ font-size:12px; padding:0 3px; letter-spacing:-0.01em; } }
@media (max-width:340px){ #vista button{ font-size:11.5px; padding:0 2px; letter-spacing:-0.02em; } }

/* ===== v17 · menos ruido visual =====
   Etiquetas neutras como texto simple (las píldoras quedan solo para cambios que importan),
   métricas como filas con línea fina en vez de cajitas, ayuda que desaparece con el uso. */
.chips{ gap:6px 14px; align-items:center; }
.chips .chip:not(.up):not(.down){ background:none; padding:2px 0; color:var(--label-3); font-weight:550; }
.chips .chip:not(.up):not(.down) b{ color:var(--label-2); }
.card-head .chip{ background:none; padding:0; color:var(--label-3); font-weight:600; }
.chip .arrow{ opacity:.85; }
.metrics{ gap:0 18px; }
.metric{ background:none; border-radius:0; padding:10px 0 4px; border-top:1px solid var(--sep); }
.stat3{ gap:0; }
.stat3 .metric{ padding:10px 0 4px 12px; border-left:1px solid var(--sep); }
.stat3 .metric:first-child{ padding-left:0; border-left:0; }
@media (max-width:370px){ .stat3 .metric{ padding:9px 0 4px 9px; } }
/* "Ver detalle": lo secundario de la tarjeta principal, a un toque */
.mas{ border-top:1px solid var(--sep); padding-top:4px; }
.mas > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; min-height:40px; font-size:13.5px; font-weight:650; color:var(--accent); -webkit-tap-highlight-color:transparent; }
.mas > summary::-webkit-details-marker{ display:none; }
.mas > summary svg{ transition:transform .3s var(--ease-v13); }
.mas[open] > summary svg{ transform:rotate(90deg); }
.mas[open] > summary .ver{ display:none; } .mas:not([open]) > summary .ocultar{ display:none; }
.mas-body{ display:flex; flex-direction:column; gap:14px; padding:4px 0 6px; animation:masIn .35s var(--ease-v13) both; }
@keyframes masIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
/* notas al pie: detrás de un "Cómo se calcula" */
.note-i{ margin:2px 6px 0; }
.note-i > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; min-height:36px; font-size:12.5px; font-weight:600; color:var(--label-3); }
.note-i > summary::-webkit-details-marker{ display:none; }
.note-i .note{ margin:0 0 4px; }
@media (min-width:1240px){ .note-i{ grid-column:1 / -1; } body[data-page="inicio"] #app > .note-i{ order:4; } }
/* la ayuda ("toca para…") se muestra las primeras veces; después ya sabes cómo funciona */
body.veterano .tap-hint, body.veterano .hint-tap, body.veterano .tuto{ display:none !important; }

/* ============================================================
   v18 · LÍNEA APPLE
   Referencias: iOS Salud / Fitness (anillo, títulos grandes), Wallet (movimientos),
   Ajustes (filas con ícono de color). Aproximación web con la tipografía del sistema.
   ============================================================ */
body{ background:var(--bg); -webkit-font-smoothing:antialiased; letter-spacing:-0.01em; }
::selection{ background:rgba(90,200,250,.35); }

/* cabecera: título grande de iOS en vez del cartel */
.brand-t b{ font-family:var(--font-ui); font-size:15px; font-weight:600; letter-spacing:-0.02em; }
.brand-t span{ color:var(--label-3); }
.title-row{ align-items:center; margin-top:6px; }
.title-row h1{ font-family:var(--font-display); font-size:34px; font-weight:700; text-transform:none; letter-spacing:-0.02em; line-height:1.1; }
.month{ background:var(--card); border:0; border-radius:999px; }
.month select{ font-family:var(--font-ui); font-weight:600; }
.live{ background:transparent; box-shadow:none; }

/* barra de pestañas como material translúcido */
.tabbar{ background:rgba(28,28,30,.72); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.45); }
.tabbar a{ font-family:var(--font-ui); font-weight:600; letter-spacing:-0.01em; }
.tabbar a[aria-current="page"]{ background:rgba(255,255,255,.1); color:var(--accent); }
@media (prefers-reduced-transparency: reduce){ .tabbar{ background:#1C1C1E; backdrop-filter:none; -webkit-backdrop-filter:none; } }

/* Inicio separa sus secciones con su propio margen (títulos de sección fuera de los grupos) */
body[data-page="inicio"] #app{ gap:0; }

/* tarjeta resumen */
.ap-card{ background:var(--card); border-radius:24px; padding:18px 18px 16px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; }
.ap-hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:140px; pointer-events:none;
  background:radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--st, var(--accent)) 16%, transparent), transparent 70%); }
.ap-hero > *{ position:relative; }
.ap-hero-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ap-hero-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ap-state{ display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:650; letter-spacing:-0.01em; }
.ap-amount{ font-family:var(--font-num); font-size:44px; font-weight:700; letter-spacing:-0.025em; line-height:1.05; font-variant-numeric:tabular-nums; margin-top:4px; white-space:nowrap; }
.ap-of{ font-size:15px; color:var(--label-3); font-variant-numeric:tabular-nums; }
.ap-ring{ width:112px; height:112px; flex-shrink:0; }
.ap-ring-n{ font-family:var(--font-num); font-size:25px; font-weight:700; fill:var(--label); letter-spacing:0; font-variant-numeric:tabular-nums; }
/* el anillo se dibuja una vez al entrar: comunica cuánto de la meta ya usaste */
.ap-ring-val{ animation:apRing 1.2s var(--ease-out) .2s both; }
.ap-ring-proy{ animation:apFade .6s ease 1s both; }
@keyframes apRing{ from{ stroke-dashoffset:var(--c); } to{ stroke-dashoffset:0; } }
@keyframes apFade{ from{ opacity:0; } to{ opacity:1; } }
.ap-msg{ margin:0; font-size:16px; line-height:1.4; color:var(--label-2); text-wrap:pretty; }
.ap-pace{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:16px;
  background:color-mix(in srgb, var(--st, var(--accent)) 13%, transparent); }
.ap-pace span{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ap-pace b{ font-size:15px; font-weight:650; }
.ap-pace small{ font-size:13px; color:var(--label-2); line-height:1.3; }
.ap-pace strong{ font-family:var(--font-num); font-size:28px; font-weight:700; letter-spacing:-0.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* "Ver detalle" como fila desplegable de iOS */
.ap-more{ border-top:1px solid var(--sep); margin-top:-2px; }
.ap-more > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; min-height:46px; font-size:16px; color:var(--accent); -webkit-tap-highlight-color:transparent; }
.ap-more > summary::-webkit-details-marker{ display:none; }
.ap-more > summary svg{ color:var(--label-3); transition:transform .3s var(--ease-out); }
.ap-more[open] > summary svg{ transform:rotate(180deg); }
.ap-more[open] > summary .ver, .ap-more:not([open]) > summary .ocultar{ display:none; }
.ap-more-body{ display:flex; flex-direction:column; gap:14px; padding-bottom:6px; animation:apOpen .35s var(--ease-out) both; }
@keyframes apOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
/* detalle como filas de iOS: etiqueta a la izquierda, valor a la derecha, separadores continuos */
.ap-list{ display:flex; flex-direction:column; }
.ap-list > div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:44px; padding:11px 0; border-top:1px solid var(--sep); }
.ap-list > div:first-child{ border-top:0; padding-top:4px; min-height:0; }
.ap-list span{ display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--label-2); }
.ap-list b{ font-family:var(--font-num); font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ap-tick{ width:2.5px; height:13px; border-radius:2px; background:var(--label); flex-shrink:0; }
.ap-note{ margin:0; font-size:14px; line-height:1.45; color:var(--label-2); text-wrap:pretty; }
.ap-split .stack{ height:8px; border-radius:4px; }
.ap-split-l{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:13px; color:var(--label-2); }
.ap-split-l span{ display:inline-flex; align-items:center; gap:6px; }
.ap-split-l i{ width:8px; height:8px; border-radius:50%; }
.ap-split-l b{ color:var(--label); font-weight:600; font-variant-numeric:tabular-nums; }

/* botones */
.ap-btn{ display:flex; align-items:center; justify-content:center; min-height:50px; border:0; border-radius:14px; background:rgba(90,200,250,.15); color:var(--accent);
  font:600 16px var(--font-ui); letter-spacing:-0.01em; cursor:pointer; transition:transform .16s var(--ease-out), background-color .2s ease; }
.ap-btn.solid{ background:var(--accent); color:#03263B; min-height:44px; padding:0 18px; }
.ap-btn:active{ transform:scale(.97); }
.ap-link{ border:0; background:none; padding:6px 0; color:var(--accent); font:400 16px var(--font-ui); cursor:pointer; align-self:flex-start; }
.ap-form{ display:flex; gap:8px; }
.ap-form input{ flex:1; min-width:0; min-height:44px; border-radius:12px; border:0; background:var(--sunken); color:var(--label); padding:0 12px; font:16px var(--font-ui); caret-color:var(--accent); }
.ap-form input:focus{ outline:2px solid var(--accent); outline-offset:0; }
@media (hover:hover) and (pointer:fine){ .ap-btn:hover{ background:rgba(90,200,250,.22); } .ap-btn.solid:hover{ background:#7DD3FC; } }

/* listas agrupadas de iOS */
.ap-sec{ margin-top:28px; }
.ap-h{ margin:0 4px 8px; font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-0.02em; }
.ap-h-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-right:4px; }
.ap-h-row .ap-link{ align-self:auto; }
.ap-group{ background:var(--card); border-radius:20px; padding:0 16px; overflow:hidden; }
.ap-row{ position:relative; display:flex; align-items:center; gap:12px; min-height:60px; padding:9px 0; color:var(--label); text-decoration:none; -webkit-tap-highlight-color:transparent; transition:background-color .2s ease; }
.ap-row + .ap-row::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--sep); }
a.ap-row{ transition:opacity .15s ease; } a.ap-row:active{ opacity:.6; }
.ap-ic{ width:30px; height:30px; border-radius:8px; flex-shrink:0; display:grid; place-items:center; background:var(--c); }
.ap-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ap-t{ font-size:16px; font-weight:500; line-height:1.3; }
.ap-s{ font-size:13.5px; color:var(--label-3); line-height:1.3; text-wrap:pretty; }
.ap-row .chev{ color:rgba(235,235,245,.3); width:8px; height:13px; }

/* movimientos estilo Wallet: dos líneas, monto y fecha alineados a la derecha, nada se corta */
.ap-mv{ position:relative; display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 0; }
.ap-mv + .ap-mv::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--sep); }
.ap-mv .tile{ width:38px; height:38px; border-radius:50%; flex-shrink:0; }
.ap-mv-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ap-mv-l1, .ap-mv-l2{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0; }
.ap-mv-n{ font-size:16px; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-mv-a{ font-family:var(--font-num); font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; }
.ap-mv-c{ font-size:13.5px; color:var(--label-3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-mv-d{ font-size:13.5px; color:var(--label-3); white-space:nowrap; flex-shrink:0; font-variant-numeric:tabular-nums; }
.ap-empty{ padding:18px 0; color:var(--label-3); font-size:15px; }

/* notas al pie */
.note-i{ margin:22px 4px 0; }
.note-i > summary, .note{ color:var(--label-3); font-family:var(--font-ui); }

/* entrada: las secciones suben apenas, una tras otra (mismo sistema .anim de la app) */
.anim{ transition:opacity .5s ease, transform .6s var(--ease-out); }

/* en PC: cifras del resumen un poco más grandes */
@media (min-width:1240px){
  .ap-amount{ font-size:52px; } .ap-ring{ width:136px; height:136px; }
}
@media (max-width:360px){ .ap-amount{ font-size:38px; } .ap-ring{ width:96px; height:96px; } }

/* indicador "En vivo": punto redondo como en iOS */
.live i{ border-radius:50%; }
/* textos chicos: tracking neutro (el negativo solo en tamaños grandes, como hace SF) */
.ap-s, .ap-of, .ap-pace small, .ap-mv-c, .ap-mv-d, .ap-list span{ letter-spacing:0; }
@media (max-width:340px){ .brand-t span{ font-size:11px; letter-spacing:-0.01em; } .brand-t b{ font-size:14px; } }

/* ---- v18 · componentes compartidos en línea Apple ---- */
/* tarjetas como las de Salud: superficie lisa, radio continuo, título en negrita de sistema */
.card{ box-shadow:none; padding:18px; }
.card-title{ font-size:17px; font-weight:650; letter-spacing:-0.02em; }
.hint{ letter-spacing:0; }
.more{ font-size:15px; font-weight:500; letter-spacing:-0.01em; }
/* íconos de categoría: círculos teñidos, como los comercios en Wallet */
.tile{ width:38px; height:38px; border-radius:50%; }
.tile.sm{ width:32px; height:32px; border-radius:50%; }
/* filas: tipografía de lista de iOS; cifras redondeadas y en columna */
.row .name{ font-size:16px; font-weight:500; letter-spacing:-0.01em; }
.row .sub, .row .date{ font-size:13px; letter-spacing:0; }
.row .amt, .amt{ font-family:var(--font-num); font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.metric .mv, .stat3 .mv{ font-family:var(--font-num); font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.metric .ml, .metric .ms{ letter-spacing:0; }
.group-h{ font-size:13px; font-weight:600; color:var(--label-3); letter-spacing:0; }
/* control segmentado de iOS */
.seg{ background:var(--track); border:0; border-radius:10px; padding:2px; }
.seg .pill{ top:2px; bottom:2px; left:2px; border-radius:8px; background:var(--seg-on); box-shadow:0 3px 8px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.08); }
.seg button{ min-height:34px; font-size:13px; font-weight:500; color:var(--label); letter-spacing:-0.01em; }
.seg button[aria-pressed="true"]{ font-weight:600; }
/* buscador de iOS */
.search{ background:var(--track); border:0; border-radius:12px; min-height:40px; padding:0 4px 0 10px; }
.search:focus-within{ box-shadow:0 0 0 2px rgba(90,200,250,.45); }
.search input{ font-size:16px; padding:8px 0; }
/* notas de apoyo: sin caja, como el texto de pie de una lista de iOS */
.insight{ background:none; padding:0; border-radius:0; font-size:14px; line-height:1.45; text-wrap:pretty; }
.msg, .note{ text-wrap:pretty; }
/* botones tintados de iOS */
.btn{ min-height:46px; border-radius:14px; font-size:16px; font-weight:600; letter-spacing:-0.01em; }
.btn.sm{ min-height:34px; border-radius:999px; font-size:14px; padding:0 14px; }
/* hojas de detalle como sheet de iOS */
.sheet{ background:var(--card); }
.sheet-head .crumb{ font-weight:600; letter-spacing:0; }
.sheet-x, .sheet-back{ background:var(--track); }
/* estado: ícono propio en vez del cuadrado del cartel */
.cartel b i, .pill-state i{ display:none !important; }
.cartel b svg{ flex-shrink:0; }
/* candado */
.gate-card{ background:var(--card); }
/* títulos de sección dentro de las tarjetas que tienen más de una parte */
.block-label{ font-size:13px; font-weight:600; color:var(--label-3); letter-spacing:0; }
/* título grande: se achica en palabras largas ("Presupuesto", "Compromisos") para no chocar con el selector de mes */
.title-row{ gap:12px; }
.title-row h1{ flex:1 1 auto; min-width:0; font-size:34px; white-space:nowrap; overflow:hidden; }
/* cabecera de tarjeta como en Salud: el dato de apoyo va debajo del título; los enlaces quedan a la derecha */
.card-head:not(:has(> .more)){ flex-direction:column; align-items:flex-start; gap:2px; }
.card-head:not(:has(> .more)) > :last-child:not(:first-child){ margin-left:0; }
.card-head .chip, .card-head .hint{ font-size:13px; font-weight:500; color:var(--label-3); }
/* el centro de la dona: la cifra cabe dentro del agujero */
.donut .c b{ font-size:16px; }
/* nombres en filas: nunca se cortan con "…"; si no caben, bajan a una segunda línea */
.row .name{ white-space:normal; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:break-word; line-height:1.25; }   /* v113: break-word (antes anywhere): corta por palabras; solo parte una palabra si no entra sola */
.row .name > span{ white-space:normal !important; }
/* pantallas angostas: el selector de mes se compacta para dejarle espacio al título */
@media (max-width:360px){ .month{ padding:0 10px; gap:6px; min-height:36px; } .month select{ font-size:13px; width:5.2em; } }
.sheet-head h2 > .tile{ display:flex; flex-shrink:0; }
.ap-list span{ flex-wrap:wrap; }
.ap-sm{ display:block; width:100%; font-size:13px; color:var(--label-3); margin-top:1px; }
.ap-list > div:has(.ap-sm){ align-items:center; }

/* ---- v19 · pulido ---- */
/* columnas de cifras con ancho fijo: las barras de una lista empiezan y terminan en el mismo lugar */
.row:has(.row-track) > .right, .row:has(.div-track) > .right{ min-width:96px; } .row:has(.row-track) > .amt{ min-width:84px; } .row:has(.row-track) > .right, .row:has(.row-track) > .amt, .row:has(.div-track) > .right{ text-align:right; align-items:flex-end; }
.row:has(.row-track) .row-track, .row:has(.div-track) .div-track{ width:100%; }
/* Pago: el desglose por tipo son pares que nunca se parten por la mitad */
.split, .row .split{ display:flex; flex-wrap:wrap; gap:2px 12px; margin-top:3px; font-size:13px; color:var(--label-3); letter-spacing:0; }
.split .pair{ white-space:nowrap; }
.split .pair b{ color:var(--label-2); font-weight:600; font-variant-numeric:tabular-nums; }
/* avatares redondos, como todos los íconos de lista */
.av{ width:32px; height:32px; border-radius:50%; font-size:13px; font-weight:700; }
/* el botón principal de una tarjeta ocupa todo el ancho, igual en Inicio y Presupuesto */
.card > .btn{ align-self:stretch; justify-content:center; }
.btn.sm.done{ background:var(--ok-soft); color:var(--ok); }
/* sin conexión y sin copia guardada: una tarjeta que explica qué pasó y cómo seguir */
.state-card{ align-items:center; text-align:center; gap:10px; padding:32px 22px 24px; margin-top:8px; }
.state-ic{ width:56px; height:56px; border-radius:50%; background:var(--track); display:grid; place-items:center; margin-bottom:4px; }
.state-t{ margin:0; font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-0.02em; }
.state-s{ margin:0 0 8px; max-width:34ch; font-size:15px; line-height:1.45; color:var(--label-2); text-wrap:pretty; }
.state-card .btn{ align-self:stretch; justify-content:center; }
/* esqueleto de carga con la forma real de la pantalla: resumen con anillo y una lista agrupada */
.skel{ height:auto; min-height:148px; background-color:var(--card); border-radius:var(--radius); }
.skel::after{ content:none; }
.skel.hero{ min-height:236px;
  background-image:
    linear-gradient(var(--sunken), var(--sunken)), linear-gradient(var(--sunken), var(--sunken)),
    linear-gradient(var(--sunken), var(--sunken)), linear-gradient(var(--sunken), var(--sunken)),
    radial-gradient(circle at center, transparent 34px, var(--sunken) 35px, var(--sunken) 47px, transparent 48px);
  background-repeat:no-repeat;
  background-size:30% 14px, 46% 34px, 38% 12px, calc(100% - 36px) 52px, 104px 104px;
  background-position:18px 24px, 18px 50px, 18px 96px, 18px 162px, calc(100% - 18px) 22px; }
.skel:not(.hero){
  background-image:
    radial-gradient(circle at 19px 19px, var(--sunken) 18.5px, transparent 19.5px), linear-gradient(var(--sunken), var(--sunken)), linear-gradient(var(--sunken), var(--sunken)),
    radial-gradient(circle at 19px 19px, var(--sunken) 18.5px, transparent 19.5px), linear-gradient(var(--sunken), var(--sunken)), linear-gradient(var(--sunken), var(--sunken));
  background-repeat:no-repeat;
  background-size:38px 38px, 42% 12px, 26% 10px, 38px 38px, 36% 12px, 22% 10px;
  background-position:16px 18px, 66px 24px, 66px 44px, 16px 90px, 66px 96px, 66px 116px; }
/* foco de teclado también en los desplegables; barra de desplazamiento y cursor con los colores de la app */
summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }
html{ scrollbar-color:#3A3A3C transparent; }
input, textarea{ caret-color:var(--accent); }
.state-t{ text-wrap:balance; }

/* ============================================================
   v20 · MODO DÍA
   Superficies de iOS en claro: fondo #F2F2F7, tarjetas blancas, separadores tenues.
   Las tintas son versiones profundas de la marca para que el texto de color se lea
   sobre blanco (celeste #0B6FAE, verde #1A7F37, ámbar #9A6700, rojo #D70015).
   ============================================================ */
:root[data-tema="claro"]{
  color-scheme: light;
  --bg:#F2F2F7; --rail:#E9E9EE; --card:#FFFFFF; --sunken:#F2F2F7; --raised:#E5E5EA;
  --label:#1C1C1E; --label-2:#3C3C43; --label-3:#6C6C70; --label-4:#AEAEB2;
  --sep:rgba(60,60,67,0.16); --track:rgba(120,120,128,0.14); --fill:rgba(120,120,128,0.10);
  --grid:rgba(60,60,67,0.12); --edge:rgba(0,0,0,0.05);
  --accent:#0B6FAE; --accent-2:#095D93; --accent-ink:#FFFFFF;
  --accent-soft:rgba(11,111,174,0.10); --accent-soft-2:rgba(11,111,174,0.16);
  --ok:#1A7F37; --justo:#9A6700; --alto:#D70015; --warn:#C2410C; --info:#0B6FAE;
  --ok-soft:rgba(26,127,55,0.11); --justo-soft:rgba(154,103,0,0.11); --alto-soft:rgba(215,0,21,0.09);
  --up:#D70015; --up-soft:rgba(215,0,21,0.09); --down:#1A7F37; --down-soft:rgba(26,127,55,0.11);
  --warn-soft:rgba(194,65,12,0.10);
  --ink:#1C1C1E;
  --seg-on:#FFFFFF; --bar:rgba(249,249,251,0.82); --scrim:rgba(0,0,0,0.28);
  --shadow-bar:0 10px 30px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
}
/* lo que estaba escrito para fondo oscuro */
[data-tema="claro"] ::selection{ background:rgba(11,111,174,.22); color:inherit; }
[data-tema="claro"] .tabbar{ background:rgba(249,249,251,.82); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.12); }
[data-tema="claro"] .tabbar a[aria-current="page"]{ background:rgba(0,0,0,.06); }
@media (prefers-reduced-transparency: reduce){ [data-tema="claro"] .tabbar{ background:#FFFFFF; } }
[data-tema="claro"] .ap-btn{ background:var(--accent-soft); }
[data-tema="claro"] .ap-btn.solid{ background:var(--accent); color:var(--accent-ink); }
@media (hover:hover) and (pointer:fine){ [data-tema="claro"] .ap-btn:hover{ background:var(--accent-soft-2); } [data-tema="claro"] .ap-btn.solid:hover{ background:var(--accent-2); } }
[data-tema="claro"] .ap-row .chev{ color:rgba(60,60,67,.3); }
[data-tema="claro"] .seg .pill{ box-shadow:0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
[data-tema="claro"] .search:focus-within{ box-shadow:0 0 0 2px rgba(11,111,174,.35); }
[data-tema="claro"] .sheet{ box-shadow:0 -12px 40px rgba(0,0,0,.18); }
[data-tema="claro"] html, html[data-tema="claro"]{ scrollbar-color:#C7C7CC transparent; }
/* el logo conserva su azulejo oscuro (es la marca), con un borde suave para separarlo del fondo claro */
[data-tema="claro"] .logo381{ box-shadow:0 0 0 1px rgba(0,0,0,.08); }
/* el anillo, la proyección y el resumen usan --st: en claro el tinte del fondo se suaviza */
[data-tema="claro"] .ap-hero::before{ opacity:.7; }

/* botón de apariencia en la cabecera */
.brand-r{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.tema-btn{ width:36px; height:36px; border-radius:50%; border:0; background:var(--track); color:var(--label-2); display:grid; place-items:center; cursor:pointer;
  transition:transform .16s var(--ease-out), background-color .2s ease, color .2s ease; }
.tema-btn:active{ transform:scale(.92); }
.tema-btn svg{ display:block; }
@media (hover:hover) and (pointer:fine){ .tema-btn:hover{ color:var(--label); } }
/* el cambio de tema se funde en lugar de saltar */
html.cambiando-tema, html.cambiando-tema *{ transition:background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease !important; }

/* ============================================================
   v21 · Compromisos repartido y pestaña Inversiones
   ============================================================ */
/* Inicio: préstamos por cobrar como lista agrupada, con el total junto al título */
.ap-h-n{ font-family:var(--font-num); font-size:17px; font-weight:600; color:var(--label-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ap-loans{ padding-top:2px; padding-bottom:2px; }
.ap-loans-sum{ margin:0; padding:12px 0 10px; border-bottom:1px solid var(--sep); font-size:13.5px; line-height:1.45; color:var(--label-3); }
.ap-loans-sum b{ color:var(--label-2); font-weight:600; }
.ap-loans .loan.tap{ padding:13px 0; }
.ap-foot{ margin:8px 4px 0; font-size:13px; line-height:1.45; color:var(--label-3); }

/* Gastos > Categoría: cobros fijos debajo de la fila Fijo */
.fijos-panel{ display:flex; flex-direction:column; gap:8px; margin:2px 0 10px; padding:12px 14px 4px; border-radius:14px; background:var(--sunken); }
.fx-top{ display:flex; align-items:baseline; justify-content:space-between; gap:6px 12px; flex-wrap:wrap; }
.fx-t{ font-size:14px; color:var(--label-2); }
.fx-t b{ color:var(--label); font-weight:650; }
.fx-s{ font-size:13px; font-weight:650; white-space:nowrap; }
.fx-track{ height:6px; border-radius:3px; }
.fijos-panel .tl{ margin-top:4px; }
.fx-det{ border-top:1px solid var(--sep); margin-top:2px; }
.fx-det > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; min-height:44px; font-size:15px; color:var(--accent); -webkit-tap-highlight-color:transparent; }
.fx-det > summary::-webkit-details-marker{ display:none; }
.fx-det > summary svg{ color:var(--label-3); transition:transform .3s var(--ease-out); }
.fx-det[open] > summary svg{ transform:rotate(180deg); }
.fx-det[open] > summary .ver, .fx-det:not([open]) > summary .ocultar{ display:none; }
.fx-det > .list{ animation:apOpen .35s var(--ease-out) both; padding-bottom:6px; }
.fx-det .row:last-child{ border-bottom:none; }
/* el crédito, dentro de "Con qué pagaste" */
.fx-credito{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.45; color:var(--label-2); }
.fx-credito svg{ flex-shrink:0; margin-top:1px; }
.fx-credito b{ color:var(--label); font-weight:650; }

/* Inversiones */
.tile.tk{ font-family:var(--font-ui); font-size:10.5px; font-weight:750; letter-spacing:-0.01em; line-height:1; text-align:center; }
.inv-fila{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.inv-form{ align-items:center; }
.inv-in{ flex:1; min-width:150px; }
.inv-in input{ width:100%; }
.inv-vacio{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
#disciplina .mes-pill span{ font-size:11.5px; }
.fijos-panel .tl-m.ok{ box-shadow:0 0 0 2px var(--sunken); }
.fijos-panel .tl-m.pend{ background:var(--sunken); box-shadow:inset 0 0 0 2.5px var(--warn), 0 0 0 2px var(--sunken); }
/* un comercio largo baja a una segunda línea en lugar de cortarse (también dentro de tarjetas angostas) */
.ap-mv-n{ white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.3; }

/* v40 · deslizar hacia abajo para actualizar */
html{ overscroll-behavior-y:contain; }
.ptr{ position:fixed; z-index:140; left:50%; top:calc(env(safe-area-inset-top,0px) + 8px); transform:translate(-50%,-40px); display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; background:var(--raised); color:var(--label-2); font-size:12.5px; font-weight:650; white-space:nowrap; pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08); opacity:0; transition:opacity .15s ease; }
.ptr.on{ opacity:1; }
.ptr svg{ transition:transform .18s ease; }
.ptr.listo{ color:var(--label); }
.ptr.listo svg{ transform:rotate(180deg); }

/* ---------- v44 · Clasificar ---------- */
body[data-page="clasificar"] .month{ display:none; }
.tabbar a .badge{ position:absolute; top:4px; left:calc(50% + 5px); min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--accent); color:var(--accent-ink);
  font-style:normal; font-size:10px; font-weight:750; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--bar); }
button.ap-mv{ width:100%; background:none; border:0; text-align:left; font:inherit; color:var(--label); cursor:pointer; }
.ap-mv.dim{ opacity:.55; }
.cl-list{ display:flex; flex-direction:column; }
.cl-vacio{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 0 8px; text-align:center; }
.cl-ok{ width:44px; height:44px; border-radius:50%; background:var(--down-soft); display:grid; place-items:center; margin-bottom:4px; }
.cl-head{ display:flex; align-items:center; gap:12px; padding:2px 0 4px; }
.cl-head .tile{ width:40px; height:40px; border-radius:50%; flex-shrink:0; }
.cl-head-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cl-head-n{ font-size:17px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-head-s{ font-size:12.5px; color:var(--label-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-head-a{ font-family:var(--font-num); font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cl-bloque{ display:flex; flex-direction:column; gap:8px; }
.cl-dos{ display:flex; gap:8px; flex-wrap:wrap; }
.cl-dos .btn{ flex:1; justify-content:center; min-width:130px; }
.cl-op{ min-height:52px; }
.cl-atras{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent); border:0; border-radius:999px; padding:7px 12px; font:inherit; font-size:13px; font-weight:650; cursor:pointer; max-width:100%; }
.cl-atras span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-pie{ display:flex; justify-content:center; padding-top:4px; }
.btn.danger{ color:var(--alto); }
.btn.solid.danger{ background:var(--alto); color:#fff; }
.cl-err{ margin:0; padding:10px 12px; border-radius:12px; background:rgba(255,69,58,0.14); color:var(--alto); font-size:13.5px; font-weight:600; line-height:1.4; }
.sheet-body.cl-busy{ opacity:.55; pointer-events:none; transition:opacity .2s ease; }
@media (max-width:400px){ .tabbar a .badge{ left:calc(50% + 3px); } }

/* ---------- v45 · agregar, repartir, abonar ---------- */
.cl-agregar{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.cl-add{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:72px; border-radius:16px; border:0; background:var(--accent-soft); color:var(--accent); font:inherit; font-size:13px; font-weight:650; cursor:pointer; }
.cl-add:active{ transform:scale(.97); }
.cl-pulse{ color:var(--accent); font-weight:600; text-transform:none; letter-spacing:0; animation:clPulse 1.2s ease-in-out infinite; }
@keyframes clPulse{ 50%{ opacity:.45; } }
.cl-spin svg{ animation:clGira 1.4s linear infinite; }
@keyframes clGira{ to{ transform:rotate(360deg); } }
.cl-pregunta{ margin:0; font-size:16px; font-weight:650; }
.cl-form{ display:flex; flex-direction:column; gap:14px; }
.cl-lab{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--label-3); min-width:0; }
.cl-lab input, .cl-persona > input{ min-height:44px; border-radius:12px; border:1px solid var(--edge); background:var(--sunken); padding:0 12px; font:inherit; font-size:16px; font-weight:500; color:var(--label); width:100%; min-width:0; }
.cl-lab input:focus, .cl-persona input:focus{ outline:none; border-color:var(--accent); }
.cl-fila2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cl-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cl-chip{ min-height:40px; padding:0 14px; border-radius:12px; border:0; background:var(--sunken); color:var(--label-2); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.cl-chip.on{ background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent); }
.cl-guardar{ align-self:stretch; justify-content:center; }
.cl-guardar[disabled]{ opacity:.4; pointer-events:none; }
.cl-personas{ display:flex; flex-direction:column; gap:8px; }
.cl-persona{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; }
.cl-persona .presu-row-input input{ width:92px; }
.cl-x{ width:36px; height:36px; border-radius:50%; border:0; background:var(--fill); color:var(--label-2); display:grid; place-items:center; cursor:pointer; flex-shrink:0; }
.cl-resumen{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--label-3); }
.cl-resumen b{ color:var(--label); font-weight:700; }
.cl-aviso{ flex-basis:100%; color:var(--warn); font-weight:600; }
.cl-abono{ flex-wrap:nowrap; align-items:center; }
.cl-abono .presu-row-input{ flex:1; min-width:0; }
.cl-abono .presu-row-input input{ width:100%; }
.cl-otra .name{ color:var(--accent); }

/* ---------- v46 · Recientes (rangos, búsqueda, días), prueba, meta ---------- */
.cl-rangos{ margin:2px 0 10px; }
.cl-rangos .cl-chip{ flex:1; padding:0 8px; text-align:center; }
.cl-busca{ width:100%; min-height:44px; border-radius:12px; border:1px solid var(--edge); background:var(--sunken); padding:0 14px; font:inherit; font-size:16px; color:var(--label); margin-bottom:6px; -webkit-appearance:none; appearance:none; }
.cl-busca:focus{ outline:none; border-color:var(--accent); }
.cl-busca::placeholder{ color:var(--label-3); }
.cl-reci-res{ margin:6px 0 2px; }
.cl-dia{ display:flex; justify-content:space-between; align-items:baseline; padding:12px 2px 4px; font-size:12px; letter-spacing:.04em; color:var(--label-3); }
.cl-dia b{ font-weight:700; }
.cl-dia span{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:600; }
.cl-ver-mas{ width:100%; justify-content:center; margin-top:10px; }
.cl-meta{ margin:0; font-size:12.5px; color:var(--label-3); }
.cl-meta code{ font-family:var(--font-num); background:var(--sunken); padding:1px 6px; border-radius:6px; color:var(--label-2); user-select:all; }
.cl-pie{ gap:8px; flex-wrap:wrap; }
.cl-nota{ text-align:center; margin:2px 0 0; }

.cl-acc{ display:flex; gap:6px; flex-shrink:0; }
.cl-dos .btn{ white-space:nowrap; }
.cl-dos .btn svg{ flex-shrink:0; }

/* ============================================================
   v47 · revisión de diseño (impeccable, dataviz, emil, break-ui)
   ============================================================ */
:root{ --barra-neutra:rgba(235,235,245,0.32); }
:root[data-tema="claro"]{ --barra-neutra:rgba(60,60,67,0.30); }

/* cifras grandes: números proporcionales (los de ancho fijo se ven sueltos en tamaño grande) */
.big, .mid, .ap-amount, .daybox .val{ font-variant-numeric:proportional-nums; }
.ap-ring-n.sm{ font-size:21px; }

/* nombres largos: máximo 2 líneas y el nombre completo al tocar el gasto (ya no 4 líneas ni "MERCADOLIBR / E") */
.ap-mv-n{ overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow-wrap:break-word; word-break:normal; }

/* Inversiones: los 6 meses en una fila y el ticker legible */
.mes-pills{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:4px; }
.mes-pill{ padding:7px 2px; min-width:0; }
.mes-pill span{ font-size:11px; }
.tile.tk{ font-size:11.5px; letter-spacing:-0.02em; }
.k-curso{ display:inline-block; width:10px; height:10px; border-radius:50%; border:2px dashed var(--accent); vertical-align:-1px; }

/* aviso con botón (Deshacer) */
.aviso.con-accion{ pointer-events:auto; padding:6px 6px 6px 16px; }
.aviso-acc{ margin-left:6px; min-height:34px; padding:0 14px; border-radius:999px; border:0; background:var(--accent-soft-2); color:var(--accent); font:inherit; font-size:13.5px; font-weight:750; cursor:pointer; white-space:nowrap; }
.aviso-acc:active{ transform:scale(.96); }

/* hojas: el título recibe el foco al abrir sin dibujar un anillo; la de Clasificar no cambia de alto entre pasos */
.sheet-head h2[tabindex="-1"]:focus{ outline:none; }
.sheet.sheet-alta{ min-height:min(640px, 82vh); }
@media (min-width:860px){ .sheet.sheet-alta{ min-height:min(640px, 80vh); } }

/* ---------- Clasificar: bandeja ---------- */
.cl-top .seg{ margin:0; }
.cl-cuerpo{ display:flex; flex-direction:column; gap:14px; }
.cl-add-mini{ display:flex; gap:6px; flex-shrink:0; }
.cl-mini{ width:40px; height:40px; border-radius:12px; border:0; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; cursor:pointer; }
.cl-mini:active{ transform:scale(.95); }
.cl-cola-res{ margin:-6px 0 0; font-size:13px; color:var(--label-3); font-variant-numeric:tabular-nums; }
.cl-prog{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--label-3); font-variant-numeric:tabular-nums; }
.cl-prog .track{ flex:1; height:6px; border-radius:3px; }
.cl-prog .track span{ display:block; height:100%; border-radius:3px; background:var(--ok); transition:width .3s var(--ease-out); }

.cl-now{ display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:18px; background:var(--sunken); box-shadow:inset 0 0 0 1px var(--edge); }
.cl-now.entra{ animation:clEntra .2s var(--ease-out) both; }
@keyframes clEntra{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:none; } }
.cl-now-top{ display:flex; align-items:flex-start; gap:12px; }
.cl-now-top .tile{ width:42px; height:42px; border-radius:50%; flex-shrink:0; }
.cl-now-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cl-now-k{ font-size:11px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.cl-now-n{ font-size:18px; font-weight:700; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:break-word; }
.cl-now-s{ font-size:13px; color:var(--label-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-now-a{ font-family:var(--font-num); font-size:20px; font-weight:700; white-space:nowrap; flex-shrink:0; padding-top:14px; }
.cl-now-desc{ margin:0; display:flex; gap:6px; align-items:flex-start; font-size:13px; line-height:1.4; color:var(--label-2); }
.cl-now-desc svg{ flex-shrink:0; margin-top:2px; color:var(--label-3); }
.cl-now-q{ margin:0; font-size:15px; font-weight:650; }
.cl-now-espera{ margin:0; }
.cl-sug1{ display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:10px 16px; border:0; border-radius:14px; background:var(--accent); color:var(--accent-ink); font:inherit; text-align:left; cursor:pointer; }
.cl-sug1-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cl-sug1-n{ font-size:16.5px; font-weight:750; }
.cl-sug1-s{ font-size:12.5px; font-weight:550; opacity:.78; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-sug1:active{ transform:scale(.98); }
.cl-alt{ margin-top:-4px; }
.cl-lotes{ display:flex; flex-direction:column; gap:6px; }
.cl-lote{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 12px; border:0; border-radius:12px; background:var(--accent-soft); color:var(--label); font:inherit; font-size:13.5px; text-align:left; cursor:pointer; }
.cl-lote svg{ color:var(--accent); flex-shrink:0; }
.cl-lote b{ font-weight:700; }
.cl-cola{ display:flex; flex-direction:column; }
.cl-nota{ margin:0; text-align:center; }

/* hoja: selector de categoría en una pantalla */
.cl-selector{ gap:12px; }
.cl-sel-g{ display:flex; flex-direction:column; gap:6px; }
.cl-sel-g[hidden], .cl-chip[hidden]{ display:none; }
.cl-sel-g .block-label{ display:flex; align-items:center; gap:6px; margin:0; }
.cl-chip small{ font-weight:500; color:var(--label-3); font-size:12px; }
.cl-chip-otra{ display:inline-flex; align-items:center; gap:5px; color:var(--accent); background:transparent; box-shadow:inset 0 0 0 1px var(--sep); }
.cl-conocidos .cl-chip{ display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:0 12px; font-size:13.5px; }
.cl-link{ border:0; background:none; padding:0; color:var(--accent); font:inherit; font-weight:650; cursor:pointer; text-decoration:underline; }
.cl-ic-hint{ display:flex; align-items:flex-start; gap:8px; }
.cl-ic-hint svg{ flex-shrink:0; margin-top:2px; }
.cl-peligro{ display:flex; justify-content:flex-end; padding-top:12px; border-top:1px solid var(--sep); }

/* montos de las personas: el "S/" va dentro de la caja */
.cl-monto{ gap:0; border-radius:12px; border:1px solid var(--edge); background:var(--sunken); padding-left:10px; min-height:44px; }
.cl-monto:focus-within{ border-color:var(--accent); }
.cl-monto .cur{ font-size:14px; }
.cl-persona .cl-monto input{ border:0; background:transparent; width:84px; min-height:42px; padding:0 10px 0 6px; }
.cl-persona .cl-monto input:focus{ border:0; }
.card-head:has(> .cl-add-mini), .card-head:has(> .btn){ flex-direction:row; align-items:center; }
.card-head:has(> .cl-add-mini) > .cl-add-mini, .card-head:has(> .btn) > .btn{ margin-left:auto; }
.cl-now .cl-chip{ background:var(--card); box-shadow:inset 0 0 0 1px var(--sep); color:var(--label); }
.tabbar a .tab-corto{ display:none; }
@media (max-width:400px){ .tabbar a .tab-txt{ display:none; } .tabbar a .tab-corto{ display:inline; } }
.cl-rangos .cl-chip{ white-space:nowrap; }
.aviso.con-accion{ width:max-content; }
.aviso.con-accion span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

/* v50: la barra de abajo queda quieta al cambiar de página (antes subía desde abajo en cada carga) */
.tabbar{ animation:none; }
/* v50: en iPhone, si la página es más corta que la pantalla (Clasificar sin pendientes), iOS ubicaba la barra
   fija como si aún estuviera la barra de Safari y quedaba ~85 pt más arriba. La página ocupa ahora siempre
   la pantalla completa (lvh = la pantalla grande, sin barras), así la barra queda pegada abajo como en las demás. */
@media (max-width:879px){ .wrap{ min-height:100vh; min-height:100lvh; } }
/* v50: la flecha va centrada con el número también dentro de un texto (Promedio por día, filas de Gastos), no apoyada arriba */
.arrow{ vertical-align:-0.2em; }

/* ============================================================
   v52 · CLASIFICAR (propuesta A2): tarjeta «Ahora» con el comercio y el monto grandes, la sugerencia con su porqué
   (las mismas frases de Telegram), acciones en iconos y selector «Todas» en mosaicos con los emojis del árbol.
   Movimiento: el mismo lenguaje de las demás pestañas (fadeUp, growX, pop, ease-v13); la regla global de
   prefers-reduced-motion lo apaga todo.
   ============================================================ */
.cl-prog2{ display:flex; align-items:center; gap:12px; margin:-2px 0 0; }
.cl-prog2-t{ font-size:13px; color:var(--label-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cl-prog2-t b{ color:var(--label); font-weight:700; }
.cl-prog2-s{ margin-left:auto; display:flex; gap:5px; align-items:center; }
.cl-prog2-s span{ width:22px; height:4px; border-radius:9px; background:var(--fill); transition:background .3s var(--ease-out), width .3s var(--ease-out); }
.cl-prog2-s span.hecho{ background:var(--ok); }
.cl-prog2-s span.ahora{ background:var(--accent); width:30px; }
.cl-prog2-b{ flex:1; height:4px; border-radius:9px; background:var(--fill); overflow:hidden; }
.cl-prog2-b span{ display:block; height:100%; background:var(--ok); border-radius:9px; transition:width .3s var(--ease-out); }

.a2-pila{ position:relative; padding-bottom:16px; }
.a2-pila::before, .a2-pila::after{ content:""; position:absolute; height:44px; border-radius:24px; background:var(--sunken); box-shadow:inset 0 0 0 1px var(--edge); z-index:0; display:none; }
.a2-pila::before{ left:14px; right:14px; bottom:8px; opacity:.75; }
.a2-pila::after{ left:28px; right:28px; bottom:0; opacity:.45; }
.a2-pila.p2::before, .a2-pila.p3::before, .a2-pila.p3::after{ display:block; }
.a2-pila > #clAhora{ position:relative; z-index:1; }

.cl-now.a2{ gap:16px; padding:22px 18px 16px; border-radius:26px; background:var(--sunken); box-shadow:inset 0 0 0 1px var(--edge), 0 14px 34px rgba(0,0,0,.28); }
.a2-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; }
.a2-mono{ width:56px; height:56px; border-radius:50%; background:var(--fill); color:var(--label-2); display:grid; place-items:center; font-size:20px; font-weight:700; letter-spacing:.02em; margin-bottom:6px; }
.a2-mono-t .tile{ width:56px; height:56px; border-radius:50%; background:transparent !important; }
.a2-name{ font-size:17px; font-weight:650; line-height:1.25; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:anywhere; }
.a2-monto{ font-family:var(--font-num); font-size:42px; font-weight:700; letter-spacing:-.03em; line-height:1.08; font-variant-numeric:tabular-nums; }
.a2-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:8px; }
.a2-chips span{ font-size:12px; color:var(--label-2); background:var(--fill); border-radius:999px; padding:5px 10px; }
.a2-desc{ display:flex; gap:6px; align-items:flex-start; justify-content:center; font-size:13px; line-height:1.4; color:var(--label-3); max-width:300px; margin-top:8px; text-align:left; }
.a2-desc svg{ flex-shrink:0; margin-top:2px; }
.a2-grupo{ display:flex; flex-direction:column; gap:14px; }
.a2-q{ margin:0; text-align:center; font-size:15px; font-weight:650; }

.a2-sug{ background:var(--card); border-radius:20px; padding:14px; display:flex; flex-direction:column; gap:12px; box-shadow:inset 0 0 0 1px var(--sep); }
.a2-sug-k{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--label-3); }
.a2-sug-k em{ margin-left:auto; font-style:normal; font-size:11px; letter-spacing:.02em; text-transform:none; font-weight:650; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:3px 9px; }
.a2-sug-r{ display:flex; align-items:center; gap:12px; }
.a2-emo{ width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font-size:24px; flex-shrink:0; }
.a2-emo.sm{ width:36px; height:36px; border-radius:11px; font-size:18px; }
.a2-sug-b{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.a2-sug-b b{ font-size:18px; font-weight:700; line-height:1.2; }
.a2-sug-b small{ font-size:12.5px; color:var(--label-3); }
.a2-conf{ display:flex; gap:4px; }
.a2-conf span{ flex:1; height:5px; border-radius:9px; background:var(--fill); transform-origin:left; }
.a2-conf span.on{ background:var(--accent); }
.a2-porque{ margin:0; font-size:12.5px; color:var(--label-2); }
.a2-ctx{ list-style:none; margin:0; padding:10px 0 0; border-top:1px solid var(--sep); display:flex; flex-direction:column; gap:5px; }
.a2-ctx li{ font-size:12.5px; line-height:1.4; color:var(--label-2); padding-left:14px; position:relative; }
.a2-ctx li::before{ content:""; position:absolute; left:2px; top:.55em; width:5px; height:5px; border-radius:50%; background:var(--label-3); }
.a2-ctx li.w{ color:var(--warn); font-weight:600; }
.a2-ctx li.w::before{ background:var(--warn); }
.a2-espera{ gap:10px; }
.a2-skel{ display:block; height:46px; border-radius:14px; background:var(--fill); animation:skel 1.2s ease-in-out infinite; }
.a2-skel.c{ height:8px; border-radius:9px; width:70%; }
/* v59 · la sugerencia «cargando» ocupa lo mismo que la ya cargada (sin saltos al llegar la respuesta de la IA) */
.a2-espera{ min-height:236px; }
.a2-skel.av{ width:48px; height:48px; border-radius:15px; flex-shrink:0; }
.a2-skel-b{ flex:1; display:flex; flex-direction:column; gap:8px; }
.a2-skel.t{ height:16px; border-radius:8px; width:55%; }
.a2-skel.t2{ height:11px; border-radius:6px; width:36%; }
.a2-skel.l{ height:11px; border-radius:6px; width:92%; }
.a2-skel.l2{ width:78%; }
.a2-skel.l3{ width:64%; }
.a2-skel-ok{ height:56px; min-height:56px; border-radius:18px; }

.a2-ok{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:56px; padding:0 16px; border:0; border-radius:18px; background:var(--accent); color:var(--accent-ink); font:inherit; font-size:17px; font-weight:700; cursor:pointer; transition:transform .12s var(--ease-out), filter .12s; }
.a2-ok:active{ transform:scale(.975); filter:brightness(.94); }
.a2-ok span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.a2-sec{ width:100%; min-height:50px; border:0; border-radius:16px; background:var(--fill); color:var(--label); font:inherit; font-size:15px; font-weight:650; cursor:pointer; }
.a2-sec:active{ transform:scale(.98); }
.a2-otras{ display:flex; flex-direction:column; gap:8px; }
.a2-k{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--label-3); }
.a2-otras-g{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.a2-alt{ display:flex; align-items:center; gap:9px; min-width:0; padding:10px; border:0; border-radius:16px; background:var(--card); box-shadow:inset 0 0 0 1px var(--sep); color:var(--label); font:inherit; text-align:left; cursor:pointer; transition:transform .12s var(--ease-out); }
.a2-alt:active{ transform:scale(.97); }
.a2-alt-b{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.a2-alt-b b{ font-size:13.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-alt-b small{ font-size:11.5px; color:var(--label-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a2-alt-b small.ia{ color:#BF9CFF; }
.a2-acc{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; border-top:1px solid var(--sep); padding-top:12px; }
.a2-a{ display:flex; flex-direction:column; align-items:center; gap:6px; border:0; background:transparent; color:var(--label-2); font:inherit; font-size:12px; cursor:pointer; padding:0; }
.a2-a-i{ width:44px; height:44px; border-radius:14px; background:var(--card); box-shadow:inset 0 0 0 1px var(--sep); display:grid; place-items:center; transition:transform .12s var(--ease-out), background .15s; }
.a2-a:active .a2-a-i{ transform:scale(.92); }

/* movimiento: la tarjeta entra por partes, como las demás pestañas */
.cl-now.a2.nuevo .a2-mono-ic{ animation:pop .5s var(--spring) both; }
.cl-now.a2.nuevo .a2-name{ animation:fadeUp .6s var(--ease-v13) both .04s; }
.cl-now.a2.nuevo .a2-monto{ animation:fadeUp .7s var(--ease-v13) both .08s; }
.cl-now.a2.nuevo .a2-chips, .cl-now.a2.nuevo .a2-desc{ animation:fadeUp .6s var(--ease-v13) both .14s; }
.cl-now.a2.nuevo .a2-acc{ animation:fadeUp .6s var(--ease-v13) both .34s; }
.a2-grupo.sug-nuevo .a2-sug{ animation:fadeUp .6s var(--ease-v13) both .12s; }
.a2-grupo.sug-nuevo .ic{ animation:pop .5s var(--spring) both .3s; }
.a2-grupo.sug-nuevo .a2-conf span{ animation:growX .5s var(--ease-v13) both; animation-delay:calc(.3s + var(--i,0) * 45ms); }
.a2-grupo.sug-nuevo .a2-ok{ animation:fadeUp .6s var(--ease-v13) both .2s; }
.a2-grupo.sug-nuevo .a2-otras, .a2-grupo.sug-nuevo .a2-sec{ animation:fadeUp .6s var(--ease-v13) both .28s; }

/* selector «Todas»: título, buscador, últimas usadas, rama y mosaicos */
.cl-sel-t{ margin:0; font-size:19px; font-weight:700; }
.cl-busca-w{ display:flex; align-items:center; gap:8px; border-radius:12px; background:var(--fill); padding:0 12px; min-height:44px; }
.cl-busca-w .cl-busca{ border:0; background:transparent; min-height:44px; padding:0; width:100%; }
.cl-pills{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cl-pills::-webkit-scrollbar{ display:none; }
.cl-pill{ flex:none; display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px 0 10px; border-radius:999px; white-space:nowrap; }
.cl-rtabs{ margin:0; }
.cl-rtabs[hidden]{ display:none; }
.cl-rtabs button span{ font-size:15px; }
.cl-sel-e{ font-size:14px; }
.cl-sel-g .block-label small{ margin-left:auto; font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--label-3); }
.cl-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.cl-tiles.uno{ grid-template-columns:1fr; }
.cl-chip.cl-tile{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; min-height:84px; padding:12px 6px 10px; border-radius:16px; text-align:center; font-size:12.5px; font-weight:650; line-height:1.2; animation:fadeIn .35s ease both; animation-delay:calc(var(--i,0) * 22ms); }
.cl-chip.cl-tile:active{ transform:scale(.96); }
.cl-tile-e{ line-height:0; display:grid; place-items:center; height:38px; }
.cl-tile-n{ overflow-wrap:anywhere; }
.cl-chip.cl-tile.sug{ background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent); }
.cl-tile-b{ position:absolute; top:-7px; right:-3px; font-style:normal; font-size:10px; font-weight:750; background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:2px 6px; }
.cl-chip.cl-tile-otra{ background:transparent; box-shadow:inset 0 0 0 1px var(--sep); color:var(--accent); }
.cl-chip.cl-tile-ancho{ display:flex; align-items:center; gap:8px; justify-content:center; min-height:52px; width:100%; }
.cl-sel-g .cl-chip[hidden]{ display:none; }
.cl-rtabs button.on{ background:var(--seg-on); color:var(--label); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.25); }

.a2-alt-b b{ white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; line-height:1.2; }
.a2-alt-b small{ white-space:normal; line-height:1.25; }
.a2-alt{ align-items:flex-start; }

/* v55 · chapas «suaves» (por defecto): misma tinta plana translúcida y trazo de color que el resto del dashboard.
   Para volver a las chapas con degradado: <html data-chapa="vivo"> */
.ic{ --s:40px; width:var(--s); height:var(--s); border-radius:calc(var(--s)*.30); flex:none; display:inline-grid; place-items:center; position:relative; vertical-align:middle;
  --hole:color-mix(in srgb,var(--t) 18%,var(--card,#1c1c1e));
  background:color-mix(in srgb,var(--t) 17%,transparent); }
.ic.ic-c{ border-radius:50%; }
.ic svg{ width:100%; height:100%; display:block; overflow:visible; }
.ic.ic-c svg{ width:80%; height:80%; }
.ic .ic-sh{ display:none; }
.ic .f{ fill:var(--t); }
.ic .b{ fill:var(--t); fill-opacity:.38; }
.ic .a{ fill:var(--ta); }
.ic .d{ fill:var(--hole); }
.ic .dm{ fill:var(--t); fill-opacity:.4; }
.ic [data-bb]{ fill:var(--ta); fill-opacity:.9; }
.ic .k{ fill:#000; fill-opacity:.14; }
.ic .s{ fill:none; stroke:var(--t); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.ic .s.sa{ stroke:var(--ta); } .ic .s.sb{ stroke:var(--t); stroke-opacity:.42; } .ic .s.sd{ stroke:#000; stroke-opacity:.42; }
:root[data-tema="claro"] .ic .a, :root[data-tema="claro"] .ic [data-bb]{ fill:var(--t); fill-opacity:.58; }
:root[data-tema="claro"] .ic .s.sa{ stroke:var(--t); stroke-opacity:.58; }
:root[data-tema="claro"] .ic .b{ fill-opacity:.3; }
.ic-logo{ background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); }
.ic-logo img{ width:74%; height:74%; object-fit:contain; display:block; }
.ic-ini{ color:var(--t); font-weight:800; font-size:calc(var(--s)*.36); letter-spacing:.01em; }
.a2-mono-ic{ margin-bottom:6px; }
.cl-tile .ic{ transition:transform .18s var(--ease-v13,ease); }
.cl-tile:active .ic{ transform:scale(.9); }
.cl-pill .ic, .cl-rtabs .ic, .block-label .ic{ vertical-align:-5px; }
.cl-rtabs .ic{ margin-right:2px; }
.block-label .ic{ margin-right:6px; }
.a2-sug-r .ic{ flex:none; }
.ap-mv .tile-ic, .cl-head .tile-ic{ flex-shrink:0; }

/* v53-54 · chapas con degradado (opcional) */
/* v53 · chapas */
:root[data-chapa="vivo"] .ic{ --s:40px; width:var(--s); height:var(--s); border-radius:calc(var(--s)*.30); flex:none; display:inline-grid; place-items:center; position:relative; isolation:isolate; vertical-align:middle;
  background:linear-gradient(152deg,var(--c1) 0%,var(--c2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1.5px 0 rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.30); }
:root[data-chapa="vivo"] .ic::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 52%); }
:root[data-chapa="vivo"] .ic svg{ width:100%; height:100%; display:block; overflow:visible; }
:root[data-chapa="vivo"] .ic .ic-sh{ opacity:.16; transform:translate(0,1.6px); }
:root[data-chapa="vivo"] .ic .ic-sh *{ fill:#000; stroke:none; fill-opacity:1; stroke-opacity:1; }
:root[data-chapa="vivo"] .ic .ic-sh .s{ fill:none; stroke:#000; }
:root[data-chapa="vivo"] .ic .f{ fill:#fff; }
:root[data-chapa="vivo"] .ic .b{ fill:#fff; fill-opacity:.45; }
:root[data-chapa="vivo"] .ic .a{ fill:var(--hi); }
:root[data-chapa="vivo"] .ic .d{ fill:var(--c2); }
:root[data-chapa="vivo"] .ic .k{ fill:#000; fill-opacity:.09; }
:root[data-chapa="vivo"] .ic .s{ fill:none; stroke:#fff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
:root[data-chapa="vivo"] .ic .s.sa{ stroke:var(--hi); } .ic .s.sb{ stroke:#fff; stroke-opacity:.5; } .ic .s.sd{ stroke:var(--c2); }
:root[data-chapa="vivo"] .ic-logo{ background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.25); }
:root[data-chapa="vivo"] .ic-logo::before{ display:none; }
:root[data-chapa="vivo"] .ic-logo img{ width:74%; height:74%; object-fit:contain; display:block; }

:root[data-chapa="vivo"][data-tema="claro"] .ic{ box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1.5px 0 rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.16); }
:root[data-chapa="vivo"] .ic-ini{ color:#fff; font-weight:800; font-size:calc(var(--s)*.36); letter-spacing:.01em; text-shadow:0 1px 2px rgba(0,0,0,.3); }

/* v56 · barra de pestañas con chapas. En el celular va el nombre corto (nunca se sobrepone); en escritorio, el nombre completo. */
.tabbar a{ gap:2px; min-height:56px; white-space:nowrap; overflow:hidden; }
.tabbar a .tab-txt{ display:none; }
.tabbar a .tab-corto{ display:inline; max-width:100%; overflow:hidden; text-overflow:clip; font-size:10.5px; letter-spacing:-0.03em; }
.tabbar a .ic-tab{ --s:28px; transition:transform .25s var(--ease-v13,ease), opacity .25s ease, filter .25s ease; opacity:.8; filter:saturate(.85); }
.tabbar a[aria-current="page"]{ color:var(--label); background:var(--fill); }
.tabbar a[aria-current="page"] .ic-tab{ opacity:1; filter:none; transform:translateY(-1px); }
[data-tema="claro"] .tabbar a[aria-current="page"], :root[data-tema="claro"] .tabbar a[aria-current="page"]{ background:rgba(0,0,0,.06); color:var(--label); }
.tabbar a .badge{ top:3px; left:calc(50% + 7px); }
@media (max-width:400px){ .tabbar a{ font-size:10.5px; } .tabbar a .tab-corto{ font-size:10.5px; letter-spacing:-0.04em; } }
@media (max-width:340px){ .tabbar a .tab-corto{ font-size:10px; } }
@media (min-width:880px){
  .tabbar a .tab-txt{ display:inline; } .tabbar a .tab-corto{ display:none; }
  .tabbar a{ min-height:46px; gap:12px; }
  .tabbar a .ic-tab{ --s:30px; transform:none; }
  .tabbar a[aria-current="page"] .ic-tab{ transform:none; }
}
@media (min-width:880px){ .tabbar a .badge{ top:6px; left:36px; } }

/* ---------- v57 · avisos en el teléfono (campana + hoja) ---------- */
.tema-btn.on{ color:var(--accent); background:var(--accent-soft); }
.av-wrap{ display:flex; flex-direction:column; gap:12px; padding:2px 2px 8px; }
.av-t{ margin:0; font-size:17px; font-weight:650; letter-spacing:-0.01em; color:var(--label); }
.av-wrap .hint{ margin:0; line-height:1.45; }
.av-pasos{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:15px; color:var(--label-2); }
.av-estado{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; padding:10px 12px; border-radius:12px; background:var(--ok-soft); color:var(--ok); }
.av-estado svg{ flex-shrink:0; }
.av-acciones{ display:flex; gap:10px; flex-wrap:wrap; }
.av-acciones .btn{ align-self:auto; }
.av-fila{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border-radius:14px; background:var(--fill); }
.av-fila > div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.av-fila b{ font-size:15px; font-weight:600; color:var(--label); }
.av-sw{ position:relative; flex-shrink:0; width:51px; height:31px; border:0; border-radius:999px; background:var(--track); cursor:pointer; transition:background .2s; }
.av-sw i{ position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s; }
.av-sw[aria-checked="true"]{ background:var(--ok); }
.av-sw[aria-checked="true"] i{ transform:translateX(20px); }
.av-sw:disabled{ opacity:.6; }
@media (prefers-reduced-motion:reduce){ .av-sw, .av-sw i{ transition:none; } }

/* ---------- v61/v62 · barra inferior: íconos blancos, plana (sin salto) y de vidrio líquido muy transparente ---------- */
.tabbar{ min-height:64px; box-sizing:border-box; border-radius:999px; padding:5px; gap:2px;
  background:rgba(6,7,9,.22);
  -webkit-backdrop-filter:blur(7px) saturate(1.7) brightness(.78); backdrop-filter:blur(7px) saturate(1.7) brightness(.78);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.24), inset 0 -1px 1px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.30); }
.tabbar::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.60),rgba(255,255,255,.06) 28%,rgba(255,255,255,.06) 72%,rgba(255,255,255,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.tabbar a{ transition:none; transform:none; border-radius:999px; min-height:50px; }
.tabbar a .ic-tab, .tabbar a[aria-current="page"] .ic-tab{ --s:32px; --hole:rgba(10,11,14,.8); background:transparent; box-shadow:none; transition:none; transform:none; filter:none; }
.tabbar a:not([aria-current="page"]) .ic-tab{ opacity:.82; }
.tabbar a[aria-current="page"]{ background:rgba(255,255,255,.16); color:var(--label);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28), inset 0 0 0 .5px rgba(255,255,255,.12); }
.tabbar a:active{ transform:none; }
.tabbar a .badge{ top:5px; left:calc(50% + 9px); }
@media (max-width:879px){ .tabbar a .tab-txt, .tabbar a .tab-corto{ display:none; } }
[data-tema="claro"] .tabbar, :root[data-tema="claro"] .tabbar{ background:rgba(255,255,255,.22);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.4), 0 10px 28px rgba(20,30,60,.16); }
[data-tema="claro"] .tabbar::before{ background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.2) 30%,rgba(255,255,255,.2) 70%,rgba(255,255,255,.8)); }
[data-tema="claro"] .tabbar a[aria-current="page"], :root[data-tema="claro"] .tabbar a[aria-current="page"]{ background:rgba(0,0,0,.07); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.05); }
@media (prefers-reduced-transparency: reduce){ .tabbar{ background:#1C1C1E; } [data-tema="claro"] .tabbar{ background:#FFFFFF; } }
@media (min-width:880px){ .tabbar{ border-radius:22px; } .tabbar a{ border-radius:10px; } }
/* v62 · avatar de préstamos: silueta + inicial */
.av-p{ position:relative; display:inline-flex; flex:none; }
.av-p .av-i{ position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:9.5px; font-weight:800; color:#0B0B0D; box-shadow:0 0 0 2px var(--card,#1c1c1e); }

/* v65 · tarjeta de Inicio: «Hoy puedes gastar» */
.ap-hoy{ --hc:var(--accent); display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:18px;
  background:color-mix(in srgb, var(--hc) 13%, transparent); }
.ap-hoy-k{ font-size:12.5px; font-weight:650; letter-spacing:.06em; color:var(--hc); }
.ap-hoy-n{ font-family:var(--font-num); font-size:44px; font-weight:700; letter-spacing:-0.025em; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ap-hoy-bar{ height:10px; border-radius:99px; background:color-mix(in srgb, var(--label) 12%, transparent); overflow:hidden; }
.ap-hoy-bar i{ display:block; height:100%; border-radius:99px; background:var(--hc); min-width:6px; }
.ap-hoy-bl{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--label-3); font-variant-numeric:tabular-nums; margin-top:-4px; }
.ap-hoy-s{ font-size:13.5px; line-height:1.35; color:var(--label-2); text-wrap:pretty; }
.ap-hoy-m{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; border-top:1px solid color-mix(in srgb, var(--label) 12%, transparent); padding-top:10px; }
.ap-hoy-m span{ font-size:14px; color:var(--label-2); }
.ap-hoy-m b{ font-family:var(--font-num); font-size:19px; font-variant-numeric:tabular-nums; }
.ap-hoy-1{ font-size:12.5px; margin-top:-6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-dos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ap-dos > div{ display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:14px; background:color-mix(in srgb, var(--label) 7%, transparent); min-width:0; }
.ap-dos small{ font-size:12px; color:var(--label-3); }
.ap-dos b{ font-family:var(--font-num); font-size:20px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ap-dos em{ font-style:normal; font-size:12px; color:var(--label-3); }

/* ============================================================
   v66 · línea gráfica unificada
   Dos piezas, siempre las mismas:
   · CHAPA / GLIFO = el dibujo (relleno, dos tonos). Íconos de acción incluidos (más, check, papelera, cámara…).
   · VIDRIO = todo lo que se toca (botones, segmentados, chips de rango, cerrar, atrás, campana y tema).
   Misma receta que la barra inferior: tinte translúcido + desenfoque suave + borde de luz.
   ============================================================ */
:root{
  --gl-bg:rgba(255,255,255,.075); --gl-on:rgba(255,255,255,.17); --gl-ac:color-mix(in srgb, var(--accent) 30%, transparent);
  --gl-rim:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.04);
  --gl-sh:0 4px 12px rgba(0,0,0,.26);
  --gl-blur:blur(8px) saturate(1.6);
}
:root[data-tema="claro"]{
  --gl-bg:rgba(255,255,255,.58); --gl-on:#FFFFFF; --gl-ac:color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.55));
  --gl-rim:inset 0 0 0 1px rgba(255,255,255,.7), inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 .5px rgba(0,0,0,.07);
  --gl-sh:0 4px 12px rgba(0,0,0,.10);
}
/* glifo suelto dentro de un botón: sin recuadro; el "agujero" toma el color del vidrio */
.ic.ic-glifo{ background:none; border-radius:0; --hole:rgba(10,12,16,.78); }
:root[data-tema="claro"] .ic.ic-glifo{ --hole:rgba(255,255,255,.9); }
.ic.ic-glifo svg{ width:100%; height:100%; }
.ia-gl{ display:inline-grid; place-items:center; line-height:0; }

/* ---- botones de vidrio ---- */
.btn, .btn.ghost, .sheet-x, .sheet-back, .tema-btn, .cl-mini, .cl-x, .cl-atras, .cl-lote, .ia-chip, .ia-sb,
.cl-rangos .cl-chip, .cl-chip-otra, .cl-conocidos .cl-chip, .a2-a-i{
  background:var(--gl-bg); box-shadow:var(--gl-rim), var(--gl-sh); border:0; color:var(--label);
  -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur);
}
.btn.solid, .a2-ok, .cl-atras, .cl-lote, .cl-rangos .cl-chip.on, .tema-btn.on{
  background:var(--gl-ac); color:var(--label);
  box-shadow:var(--gl-rim), inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--gl-sh);
}
.btn.solid, .a2-ok{ color:#FFFFFF; font-weight:650; }
:root[data-tema="claro"] .btn.solid, :root[data-tema="claro"] .a2-ok{ color:var(--accent); }
:root[data-tema="claro"] .btn.solid.danger{ color:var(--alto); }
:root[data-tema="claro"] .ic-neutro{ --t:#2C2C2E !important; --ta:#8E8E93 !important; }
:root[data-tema="claro"] .btn.solid .ic-neutro, :root[data-tema="claro"] .a2-ok .ic-neutro{ --t:#0B6FAE !important; --ta:#5AA9D6 !important; }
.btn.danger, .btn.ghost.danger{ color:var(--alto); }
.btn.solid.danger{ background:color-mix(in srgb, var(--alto) 34%, transparent); color:#FFFFFF; box-shadow:var(--gl-rim), inset 0 0 0 1px color-mix(in srgb, var(--alto) 50%, transparent), var(--gl-sh); }
.btn.done, .btn.sm.done{ background:color-mix(in srgb, var(--ok) 26%, transparent); color:var(--ok); }
.btn{ border-radius:999px; }
.a2-ok{ border-radius:999px; }
.btn:active, .a2-ok:active, .cl-mini:active, .cl-x:active{ filter:brightness(1.12); }
.cl-atras{ color:var(--accent); }
.cl-lote{ border-radius:16px; }
.sheet-x, .sheet-back, .tema-btn, .cl-mini, .cl-x{ color:var(--label); }
.cl-mini{ width:42px; height:42px; border-radius:999px; }
.cl-x{ width:38px; height:38px; }
.cl-mini .ic, .cl-x .ic, .sheet-x .ic, .sheet-back .ic, .tema-btn .ic{ display:block; }
.a2-a-i{ border-radius:999px; }
/* los botones con un glifo adentro se ven a la par del texto */
.btn .ic, .a2-ok .ic, .cl-lote .ic, .cl-atras .ic{ flex:none; }

/* ---- segmentados (Pendientes · Recientes · Ingresos, Categoría · Días) ---- */
.seg{ background:rgba(255,255,255,.045); box-shadow:var(--gl-rim); border:0; padding:3px;
  -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); }
.seg .pill{ background:var(--gl-on); box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.12), 0 3px 10px rgba(0,0,0,.28); }
.seg button, .seg button[aria-pressed="true"]{ color:var(--label); }
.seg button:not([aria-pressed="true"]){ color:var(--label-2); }
:root[data-tema="claro"] .seg{ background:rgba(120,120,128,.12); }
:root[data-tema="claro"] .seg .pill{ box-shadow:0 3px 10px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.05); }
.cl-rangos .cl-chip{ border-radius:999px; font-weight:600; color:var(--label-2); }
.cl-rangos .cl-chip.on{ color:var(--label); }

/* ---- hoja de abonos: campo y botones a la misma altura ---- */
.cl-abono{ align-items:center; gap:8px; }
.cl-abono .presu-row-input input{ min-height:44px; border-radius:999px; font-size:16px; padding:0 16px; }
.cl-abono .btn, .cl-abono .btn.sm{ min-height:44px; padding:0 16px; font-size:15px; border-radius:999px; }
.cl-abono .presu-row-input{ gap:8px; }
.cl-acc{ gap:8px; }

/* ---- estado vacío y fila de búsqueda ---- */
.search .ic{ flex:none; }

/* v66 · repaso: lo que faltaba (Gestionar presupuesto de Inicio, selector de mes, píldoras, alternativas, «En vivo») */
.ap-btn, .ap-btn.solid, .month, .live, .cl-pill, .a2-alt{
  background:var(--gl-bg); box-shadow:var(--gl-rim), var(--gl-sh); border:0;
  -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur);
}
.ap-btn, .ap-btn.solid{ background:var(--gl-ac); color:var(--label); font-weight:650; border-radius:999px;
  box-shadow:var(--gl-rim), inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), var(--gl-sh); }
:root[data-tema="claro"] .ap-btn, :root[data-tema="claro"] .ap-btn.solid{ color:var(--accent); }
.ap-btn:active, .month:active, .live:active, .a2-alt:active{ filter:brightness(1.12); }
.month{ border-radius:999px; }
.live{ border-radius:999px; box-shadow:var(--gl-rim); }
.live.sync{ background:var(--gl-ac); }
.cl-pill{ color:var(--label); }
.a2-alt{ border-radius:18px; }

/* ---------- v68 · barra inferior en modo día: vidrio claro como en iOS (blanco esmerilado, íconos oscuros, píldora gris en la pestaña activa). El modo noche no cambia. ---------- */
:root[data-tema="claro"] .tabbar{
  background:rgba(255,255,255,.60);
  -webkit-backdrop-filter:blur(26px) saturate(1.9); backdrop-filter:blur(26px) saturate(1.9);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.07), inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.5), 0 8px 28px rgba(20,30,60,.13), 0 1px 3px rgba(20,30,60,.08); }
:root[data-tema="claro"] .tabbar::before{ background:linear-gradient(135deg,rgba(255,255,255,1),rgba(255,255,255,.35) 30%,rgba(255,255,255,.35) 70%,rgba(255,255,255,.9)); }
:root[data-tema="claro"] .tabbar a .ic-tab, :root[data-tema="claro"] .tabbar a[aria-current="page"] .ic-tab{ --t:#1C1C1E !important; --ta:#6E6E73 !important; --hole:rgba(255,255,255,.95); }
:root[data-tema="claro"] .tabbar a:not([aria-current="page"]) .ic-tab{ opacity:.88; }
:root[data-tema="claro"] .tabbar a[aria-current="page"]{ background:rgba(60,60,67,.13); box-shadow:inset 0 0 0 .5px rgba(60,60,67,.06), inset 0 1px 1px rgba(255,255,255,.6); }
:root[data-tema="claro"] .tabbar a .badge{ box-shadow:0 0 0 2px rgba(255,255,255,.95); }
@media (prefers-reduced-transparency: reduce){ :root[data-tema="claro"] .tabbar{ background:#FFFFFF; backdrop-filter:none; -webkit-backdrop-filter:none; } }


/* ---------- v71 · la píldora de la barra inferior se desliza entre pestañas (misma animación que los selectores segmentados) ---------- */
@media (max-width:879px){
  .tabbar{ --tp:5px; }
  .tabbar .tab-pill{ position:absolute; top:var(--tp); bottom:var(--tp); left:var(--tp); width:calc((100% - 2 * var(--tp) - 10px) / 6); border-radius:999px; pointer-events:none; z-index:0;
    background:rgba(255,255,255,.16); box-shadow:inset 0 1px 1px rgba(255,255,255,.28), inset 0 0 0 .5px rgba(255,255,255,.12);
    transition:transform .5s var(--ease-v13, cubic-bezier(.22,1,.36,1)); will-change:transform; }
  .tabbar.con-pill a[aria-current="page"]{ background:transparent !important; box-shadow:none !important; }
  :root[data-tema="claro"] .tabbar .tab-pill{ background:rgba(60,60,67,.13); box-shadow:inset 0 0 0 .5px rgba(60,60,67,.06), inset 0 1px 1px rgba(255,255,255,.6); }
}
@media (max-width:340px){ .tabbar{ --tp:4px; } }
@media (min-width:880px){ .tabbar .tab-pill{ display:none; } }
@media (prefers-reduced-motion:reduce){ .tabbar .tab-pill{ transition:none; } }

/* v76: chapa del título de las hojas más grande (44 px) y trazos de detalle (.sd) en sombra neutra: antes tomaban el color «hueco» y se veían amarronados sobre el glifo */
.sheet-head h2 > .ic.tile-ic{ --s:44px !important; }

/* v77: el glifo de toda chapa se centra con posición absoluta (no depende del centrado de grid, que en Safari de iPhone
   lo dejaba arriba a la izquierda dentro de las hojas) */
.ic svg{ position:absolute; left:0; top:0; width:100%; height:100%; }
.ic.ic-c svg{ left:10%; top:10%; width:80%; height:80%; }
.ic.ic-glifo svg, .ic.ic-glifo.ic-c svg{ left:0; top:0; width:100%; height:100%; }
:root[data-chapa="vivo"] .ic svg{ left:0; top:0; width:100%; height:100%; }

/* v81 · meses clicables: barras de las hojas, celdas del mapa de calor y chips de la Tendencia */
.vbars .col[data-mes], .xlabels span[data-mes], .heat-c[data-mes]{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.vbars .col[data-mes]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
button.mes-pill{ font-family:inherit; color:var(--label-2); border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button.mes-pill:active{ transform:scale(.96); }

.bars-wrap .goal-line, .vbars .col[data-mes] .v{ pointer-events:none; }

/* ============================================================
   v86 · barra de acciones (Todas · Dividir · Préstamo · Prueba · Eliminar), personas rápidas y chapa «Otra»
   ============================================================ */
.cl-conocidos .cl-chip.on{ background:var(--gl-ac); color:var(--label);
  box-shadow:var(--gl-rim), inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--gl-sh); }
.cl-conocidos .cl-chip .ic{ flex:none; }
.cl-chip.cl-tile-ancho .ic, .cl-op .tile .ic{ flex:none; }
.a2-a{ min-width:0; }
.a2-a{ font-size:11.5px; letter-spacing:-0.01em; white-space:nowrap; }
.cl-dos .btn.sm{ flex:1 1 auto; justify-content:center; min-width:max-content; }

/* ---------- v87 · Clasificar más rápido ---------- */
/* el botón principal (Confirmar / Elegir categoría) queda siempre a la vista, justo encima de la barra inferior */
.a2-grupo > .a2-ok[data-ah-sug]{ position:sticky; z-index:5; bottom:calc(max(10px, calc(env(safe-area-inset-bottom,0px) - 12px)) + 82px); background:linear-gradient(var(--gl-ac), var(--gl-ac)), var(--sunken); box-shadow:var(--gl-rim), inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 5px var(--sunken), 0 12px 24px rgba(0,0,0,.22); }   /* base opaca: el texto que pasa por debajo no se transparenta */
@media (min-width:880px){ .a2-grupo > .a2-ok[data-ah-sug]{ bottom:16px; } }
/* «Préstamo a Luis P · S/ 40» en una transferencia */
.a2-pres{ display:flex; align-items:center; justify-content:center; gap:8px; padding:0 14px; }
.a2-pres span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.a2-pres .ic{ flex:none; }
/* «Tus más usadas» cuando no hay sugerencia */
.a2-tops .a2-alt{ min-width:0; }
.a2-tops .a2-alt-b small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-parte .cl-link{ margin-left:4px; }
.a2-tops .a2-otras-g{ grid-template-columns:minmax(0,1fr); }   /* una por fila: los nombres largos (Supermercado) no se parten */
.a2-tops .a2-alt{ flex-direction:row; text-align:left; }

.a2-pres{ min-height:56px; justify-content:flex-start; padding:0 16px; }
.a2-pres-t{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; line-height:1.2; }
.a2-pres-t b{ font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.a2-pres-t small{ font-size:12.5px; font-weight:600; color:var(--label-2); }
.a2-grupo > .a2-ok[data-ah-sug]{ font-size:16px; padding:0 12px; gap:6px; }

/* ============================================================
   v90 · ESCRITORIO — grilla de 2 columnas que llena todo el ancho
   Reglas: filas alineadas (las tarjetas de una fila miden lo mismo),
   ningún hueco negro, la tarjeta más alta ocupa 2 filas a un lado.
   Todo dentro de min-width:1240px: el celular no cambia.
   ============================================================ */
@media (min-width:880px){
  .wrap{ max-width:1680px; }
  .donut-row{ max-width:640px; margin:0 auto; }
}
@media (min-width:1240px){
  #app{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; align-items:stretch; }
  body[data-page="inicio"] #app{ gap:28px 20px; }
  body[data-page="inicio"] #app > .ap-hero{ order:1; }
  body[data-page="inicio"] #app > .ap-sec{ margin:0; display:flex; flex-direction:column; }
  body[data-page="inicio"] #app > .ap-sec > .ap-group{ flex:1; }
  body[data-page="inicio"] #app > .ap-sec:has(.ap-tx){ order:2; }
  body[data-page="inicio"] #app > .ap-sec:not(:has(.ap-tx)):not(#cobrar){ order:3; grid-column:1 / -1; }
  body[data-page="inicio"] #app > #cobrar{ order:4; grid-column:1 / -1; }
  body[data-page="inicio"] #app > .note-i{ order:5; }
  body[data-page="inicio"] .ap-hero .ap-btn{ margin-top:auto; }
  /* alertas y préstamos: filas lado a lado en vez de una tira larga */
  body[data-page="inicio"] .ap-group:not(.ap-tx):not(.ap-loans){ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:40px; }
  body[data-page="inicio"] .ap-group:not(.ap-tx):not(.ap-loans) > .ap-row:only-child{ grid-column:1 / -1; }
  body[data-page="inicio"] .ap-group:not(.ap-tx):not(.ap-loans) > .ap-row::before{ display:none; }
  body[data-page="inicio"] .ap-group:not(.ap-tx):not(.ap-loans) > .ap-row{ border-top:1px solid var(--sep); }
  body[data-page="inicio"] .ap-group:not(.ap-tx):not(.ap-loans) > .ap-row:nth-child(-n+2){ border-top:0; }
  body[data-page="inicio"] .ap-loans{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:40px; }
  body[data-page="inicio"] .ap-loans > .ap-loans-sum{ grid-column:1 / -1; }
  body[data-page="inicio"] .ap-loans .loan, body[data-page="inicio"] .ap-loans .loan + .loan{ border:0; box-shadow:none; }

  /* Gastos */
  body[data-page="gastos"] #app > section:first-child{ flex-direction:row !important; align-items:center; gap:16px !important; margin-bottom:20px; }
  body[data-page="gastos"] #app > section:first-child .search{ flex:1; }
  body[data-page="gastos"] #app > section:first-child .seg{ flex:0 0 300px; }
  #gMain:not([hidden]){ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; align-items:stretch; }
  #gMain > .card{ margin:0; }
  #gMain > .card:first-child{ grid-column:1; grid-row:1; display:flex; flex-direction:column; justify-content:center; }
  #gVista{ display:contents; }
  #gVista > .card{ margin:0; grid-column:1; }
  #gVista > .card.wide{ grid-column:1 / -1; }
  #gVista > .card.k-reparto{ grid-column:2; grid-row:1; }
  #gVista > .card.k-cobros{ grid-column:2; grid-row:span 3; }
  #gVista > .card.k-a{ grid-column:2; grid-row:1; }
  .cal-card .cal, .cal-card .cal-legend{ max-width:none; }
  .k-recientes #clReci .cl-list > .cl-row::before, .k-ingresos .cl-list > .cl-row::before{ display:none; }
  .donut-row{ max-width:none; justify-content:center; gap:44px; height:100%; }
  .donut{ width:188px; height:188px; } .donut > svg{ width:100%; height:100%; }
  .donut .c b{ font-size:26px; } .donut .c b.sm{ font-size:21px; } .donut .c span{ font-size:12.5px; max-width:110px; }
  .leg{ flex:0 1 270px; } .leg div{ font-size:15px; padding:7px 0; } .leg .n b, .leg .v{ font-size:14.5px; } .leg .p{ font-size:13px; }

  /* Inversiones */
  body[data-page="inversiones"] #app > .card{ grid-column:auto; }
  body[data-page="inversiones"] #app > .k-tu{ order:1; }
  body[data-page="inversiones"] #app > .k-inversion{ order:2; }
  body[data-page="inversiones"] #app > .k-posiciones{ order:3; }
  body[data-page="inversiones"] #app > .k-hacia{ order:4; }
  body[data-page="inversiones"] #app > .k-evolucion{ order:5; grid-column:1; }
  body[data-page="inversiones"] #app > .k-aportes{ order:6; grid-column:2; }
  body[data-page="inversiones"] #app > #iaCard{ order:7; grid-column:1 / -1; }
  body[data-page="inversiones"] #app > .note-i{ order:8; }

  /* Presupuesto: las categorías (lista larga) ocupan 2 filas a la izquierda; margen y la inversión del mes se apilan a la derecha */
  body[data-page="presupuesto"] #app > .k-gastado{ grid-column:1; grid-row:1; }
  body[data-page="presupuesto"] #app > .k-ritmo{ grid-column:2; grid-row:1; }
  body[data-page="presupuesto"] #app > .k-categorias{ grid-column:1; grid-row:2 / span 2; }
  body[data-page="presupuesto"] #app > .k-margen{ grid-column:2; grid-row:2; }
  body[data-page="presupuesto"] #app > #disciplina{ grid-column:2; grid-row:3; }

  /* Historial */
  body[data-page="historial"] #app > .card{ grid-column:auto; }
  body[data-page="historial"] #app > .k-tendencia{ order:1; grid-column:1; grid-row:span 2; }
  body[data-page="historial"] #app > .k-ultimos{ order:2; grid-column:2; }
  body[data-page="historial"] #app > .k-categorias{ order:3; grid-column:2; }
  body[data-page="historial"] #app > .k-que{ order:4; }
  body[data-page="historial"] #app > .k-tus{ order:5; }
  body[data-page="historial"] #app > .note-i{ order:6; }

  /* Clasificar: la tarjeta de ahora a la izquierda, la cola (o lo último clasificado) a la derecha */
  body[data-page="clasificar"] #app{ display:block; }
  body[data-page="clasificar"] .cl-top{ margin-bottom:20px; }
  body[data-page="clasificar"] .cl-top .seg{ max-width:560px; }
  #clCuerpo > .card.k-por{ display:grid; grid-template-columns:minmax(420px,560px) minmax(0,1fr); grid-template-rows:repeat(4,auto) 1fr auto; column-gap:32px; align-content:start; }
  .k-por > *{ grid-column:1; }
  .k-por > .card-head{ grid-row:1; } .k-por > .cl-prog2{ grid-row:2; } .k-por > .a2-pila{ grid-row:3; } .k-por > .cl-lotes{ grid-row:4; }
  .k-por > .cl-vacio{ grid-row:2 / 5; }
  .k-por > .cl-cola{ grid-column:2; grid-row:1 / 6; align-self:start; background:var(--sunken); border-radius:16px; padding:16px 18px; margin-top:0; }
  .k-por > .cl-nota{ grid-column:1 / -1; grid-row:6; text-align:center; margin-top:20px; }
  .k-recientes #clReci .cl-list, .k-ingresos .cl-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:40px; }
  .k-recientes #clReci .cl-dia{ grid-column:1 / -1; }
}

/* ============================================================
   v90b/v91 · ESCRITORIO — letra de los gráficos proporcional al espacio
   (números del calendario, barras, mapa de calor, leyendas y métricas).
   El celular no cambia: todo va dentro de min-width:880px.
   ============================================================ */
@media (min-width:880px){
  .cal{ gap:8px; }
  .cal .wd{ font-size:13px; padding-bottom:2px; }
  .cal .d{ padding:9px 11px; border-radius:10px; }
  .cal .d .n{ font-size:15px; font-weight:800; }
  .cal .d .a{ font-size:16px; font-weight:800; opacity:1; }
  .cal .d.fut .n{ font-size:13px; }
  .cal-legend{ font-size:13.5px; }
  .cal-legend .sc i{ width:14px; height:14px; }
  .daybox .lbl{ font-size:13.5px; }
  .vbars .v{ font-size:13px; }
  .vbars{ gap:10px; }
  .xlabels{ font-size:13px; gap:10px; }
  .heat{ gap:6px; }
  .heat-row{ gap:6px; }
  .heat-c{ height:42px; font-size:13.5px; border-radius:8px; }
  .heat-h .heat-c{ font-size:13px; }
  .heat-name{ font-size:14px; }
  .legend{ font-size:13.5px; gap:8px 20px; }
  .legend i{ width:11px; height:11px; }
  .metric{ padding:14px 16px; }
  .metric .ml, .metric .ms{ font-size:13px; }
  .metric .mv{ font-size:21px; }
  .mes-pill{ padding:10px 6px; }
  .mes-pill b{ font-size:13.5px; }
  .mes-pill span{ font-size:12.5px; }
  .hint{ font-size:13px; }
  .block-label{ font-size:13px; }
  .row .sub, .row .meta{ font-size:13px; }
  .loan .meta{ font-size:13px; }
  .ap-loans-sum{ font-size:14.5px; }
  .note, .note-i{ font-size:13px; }
}

/* v95 · diagnóstico de avisos (campana): listas hora + texto; el estado «mal» lleva palabra e ícono, no solo color */
.av-estado.mal{ background:color-mix(in srgb, #FF453A 14%, transparent); align-items:flex-start; color:var(--label); }
.av-log{ display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:12px; background:var(--sunken); }
.av-log > b{ font-size:13.5px; font-weight:650; color:var(--label); }
.av-log ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.av-log li{ display:flex; gap:10px; align-items:baseline; font-size:13.5px; line-height:1.35; }
.av-log li span{ flex:0 0 auto; min-width:84px; color:var(--label-3); font-variant-numeric:tabular-nums; }
.av-log li em{ font-style:normal; color:var(--label-2); min-width:0; overflow-wrap:anywhere; }

/* ---------- v98 · la casita: la barra plegada en una burbuja (celular) y el aviso de guardado en ella ---------- */
.tab-casita, .av-casita{ display:none; }
@media (max-width:879px){
  :root{ --bar-b:max(10px, calc(env(safe-area-inset-bottom,0px) - 12px)); }
  .tabbar{ left:12px; transform:none; transition:width .42s cubic-bezier(.16,1,.3,1); }
  .tabbar{ height:64px; box-sizing:border-box; }
  .tabbar{ width:64px; }
  .tabbar.abierta{ width:min(528px, calc(100% - 24px)); }
  .tabbar > a, .tabbar .tab-pill{ transition:opacity .25s ease .1s, visibility 0s; }
  .tabbar:not(.abierta) > a, .tabbar:not(.abierta) .tab-pill{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .12s ease, visibility 0s .12s; }
  .tab-casita{ position:absolute; left:0; top:0; width:64px; height:64px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:999px; background:transparent; color:var(--label); cursor:pointer;
    -webkit-tap-highlight-color:transparent; opacity:0; pointer-events:none; transition:opacity .15s ease; }
  .tabbar:not(.abierta) .tab-casita{ opacity:1; pointer-events:auto; transition:opacity .2s ease; }
  .tab-casita:active{ transform:scale(.94); }
  .tab-casita .ic-tab{ --s:32px; --hole:rgba(10,11,14,.8); background:transparent; box-shadow:none; }
  :root[data-tema="claro"] .tabbar .tab-casita .ic-tab{ --t:#1C1C1E !important; --ta:#6E6E73 !important; --hole:rgba(255,255,255,.95); }
  .tab-casita .badge{ position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--accent); color:var(--accent-ink);
    font-style:normal; font-size:10px; font-weight:750; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--bg); }
  .tabbar[data-av] .tab-casita .badge{ display:none; }
  .av-ring{ position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; transform-origin:50% 50%; }
  .av-ring circle{ fill:none; stroke-width:3; stroke-linecap:round; }
  .tabbar[data-av] .av-ring{ opacity:1; }
  .tabbar[data-av="guardando"] .av-ring{ animation:avGira 1s linear infinite; }
  .tabbar[data-av="guardando"] .av-ring circle{ stroke:var(--accent); stroke-dasharray:62 130; }
  .tabbar[data-av="ok"] .av-ring circle{ stroke:var(--ok); }
  .tabbar[data-av="nuevo"] .av-ring circle{ stroke:var(--accent); }
  .tabbar[data-av="error"] .av-ring circle{ stroke:var(--alto); stroke-dasharray:7 6; }
  .av-b{ position:absolute; top:-4px; right:-4px; width:24px; height:24px; border-radius:50%; display:none; align-items:center; justify-content:center; box-shadow:0 0 0 3px var(--bg); font-size:15px; font-weight:800; line-height:1; }
  .av-b svg{ width:14px; height:14px; }
  .tabbar[data-av="ok"] .av-b-ok{ display:flex; background:var(--ok); color:#04210D; }
  .tabbar[data-av="nuevo"] .av-b-nuevo{ display:flex; background:var(--accent); color:var(--accent-ink); }
  .tabbar[data-av="error"] .av-b-error{ display:flex; background:var(--alto); color:#fff; }
  @keyframes avGira{ to{ transform:rotate(360deg); } }
  .av-casita{ display:flex; position:fixed; z-index:150; left:86px; bottom:calc(var(--bar-b) + 32px); min-height:34px; max-width:calc(100vw - 98px); box-sizing:border-box; align-items:center; gap:8px;
    padding:7px 14px; border-radius:18px; background:var(--raised); color:var(--label); font-size:13.5px; font-weight:700; line-height:1.25; white-space:normal;
    box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08); opacity:0; transform:translate(-12px,50%); pointer-events:none;
    transition:transform .4s var(--ease-v13,ease), opacity .25s ease; }
  .av-casita.on{ opacity:1; transform:translate(0,50%); }
  .av-casita.con-accion{ pointer-events:auto; padding:4px 5px 4px 14px; }
  .av-casita .av-t{ overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; min-width:0; }
  .av-casita.av-ok{ box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 1px var(--ok); }
  .av-casita.av-error{ box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 1px var(--alto); }
  .av-acc{ height:26px; padding:0 12px; border:0; border-radius:13px; background:var(--accent-soft-2); color:var(--accent); font:inherit; font-size:12.5px; font-weight:750; cursor:pointer; white-space:nowrap; }
  .av-acc:active{ transform:scale(.96); }
}
@media (max-width:879px){ .tabbar{ view-transition-name:none; } }
@media (prefers-reduced-motion:reduce){ .tabbar, .tab-casita, .av-casita, .tabbar > a{ transition:none !important; } .tabbar[data-av="guardando"] .av-ring{ animation:none; } }

/* v103 · simulación de fin de semana en la tarjeta de Inicio: ocupa todo el ancho bajo los dos escenarios */
.ap-dos .ap-sim{ grid-column:1 / -1; }

/* ---------- v105 · el aviso de la casita es del mismo vidrio líquido que la barra (oscuro y claro) ---------- */
@media (max-width:879px){
  .av-casita{ border-radius:22px; background:rgba(6,7,9,.22); color:#F5F5F7;
    -webkit-backdrop-filter:blur(7px) saturate(1.7) brightness(.78); backdrop-filter:blur(7px) saturate(1.7) brightness(.78);
    box-shadow:inset 0 1.5px 1px rgba(255,255,255,.24), inset 0 -1px 1px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.30); }
  .av-casita::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.60),rgba(255,255,255,.06) 28%,rgba(255,255,255,.06) 72%,rgba(255,255,255,.45));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
  .av-casita.av-ok::before{ background:linear-gradient(135deg,color-mix(in srgb,var(--ok) 85%,#fff),color-mix(in srgb,var(--ok) 25%,transparent) 30%,color-mix(in srgb,var(--ok) 25%,transparent) 70%,color-mix(in srgb,var(--ok) 70%,#fff)); }
  .av-casita.av-error::before{ background:linear-gradient(135deg,color-mix(in srgb,var(--alto) 85%,#fff),color-mix(in srgb,var(--alto) 25%,transparent) 30%,color-mix(in srgb,var(--alto) 25%,transparent) 70%,color-mix(in srgb,var(--alto) 70%,#fff)); }
  .av-casita.av-ok, .av-casita.av-error{ box-shadow:inset 0 1.5px 1px rgba(255,255,255,.24), inset 0 -1px 1px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.30); }
  :root[data-tema="claro"] .av-casita{ background:rgba(255,255,255,.60); color:#1C1C1E;
    -webkit-backdrop-filter:blur(26px) saturate(1.9); backdrop-filter:blur(26px) saturate(1.9);
    box-shadow:inset 0 0 0 .5px rgba(0,0,0,.07), inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.5), 0 8px 28px rgba(20,30,60,.13), 0 1px 3px rgba(20,30,60,.08); }
  :root[data-tema="claro"] .av-casita::before{ background:linear-gradient(135deg,rgba(255,255,255,1),rgba(255,255,255,.35) 30%,rgba(255,255,255,.35) 70%,rgba(255,255,255,.9)); }
  :root[data-tema="claro"] .av-casita.av-ok::before{ background:linear-gradient(135deg,var(--ok),color-mix(in srgb,var(--ok) 20%,transparent) 30%,color-mix(in srgb,var(--ok) 20%,transparent) 70%,var(--ok)); }
  :root[data-tema="claro"] .av-casita.av-error::before{ background:linear-gradient(135deg,var(--alto),color-mix(in srgb,var(--alto) 20%,transparent) 30%,color-mix(in srgb,var(--alto) 20%,transparent) 70%,var(--alto)); }
  :root[data-tema="claro"] .av-casita.av-ok, :root[data-tema="claro"] .av-casita.av-error{ box-shadow:inset 0 0 0 .5px rgba(0,0,0,.07), inset 0 1.5px 1px rgba(255,255,255,.95), 0 8px 28px rgba(20,30,60,.13); }
}
@media (prefers-reduced-transparency:reduce){ .av-casita{ background:#1C1C1E; backdrop-filter:none; -webkit-backdrop-filter:none; } :root[data-tema="claro"] .av-casita{ background:#FFFFFF; } }

/* v109: el logo 381 abre «Ajustes» (antes campana y luna en la cabecera) */
.brand-logo{ appearance:none; -webkit-appearance:none; border:0; background:none; padding:0; margin:0; cursor:pointer; display:block; border-radius:14px; flex:none; -webkit-tap-highlight-color:transparent; }
.brand-logo:active{ transform:scale(.94); }
.brand-logo:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* v110: el odómetro del logo espera a que la app termine de dibujar */
html:not(.listo) .logo381__tira{ animation-play-state:paused; }

/* v111: mientras la app guarda o actualiza (casita girando / punto «En vivo» sincronizando) el logo hace pausa, para no competir por el dibujo y verse lento */
body:has(#tabbar[data-av="guardando"]) .logo381__tira,
body:has(.live.sync) .logo381__tira{ animation-play-state:paused; }

/* ============================================================
   v113 · Clasificar en celular: el «Confirmar» fijo baja a la fila de la casita (al lado, no encima)
   Antes flotaba 82 px arriba (medida de la barra completa): tapaba «al confirmar» y dejaba un hueco.
   ============================================================ */
@media (max-width:879px){
  .a2-grupo > .a2-ok[data-ah-sug]{ bottom:calc(var(--bar-b) + 4px); min-height:56px; transition:margin-left .25s var(--ease-v13, ease); }
  .a2-grupo > .a2-ok[data-ah-sug].pegado{ margin-left:36px; }
  /* la última fila de acciones (Todas, Dividir…) se puede subir por encima de la casita */
  .a2-acc{ scroll-margin-bottom:90px; }
}
/* «Ver N más» nativo (cobros recurrentes) */
.mas-plegado > summary{ list-style:none; align-self:center; min-height:44px; margin:2px auto 0; display:flex; justify-content:center; }
.mas-plegado > summary::-webkit-details-marker{ display:none; }
.mas-plegado[open] > summary{ display:none; }
.mas-plegado{ display:flex; flex-direction:column; }

.a2-ctx.a2-ctx-bajo{ border-top:0; padding:0 4px; margin-top:-4px; }
.a2-ok-fin{ display:block; height:1px; margin-top:-14px; pointer-events:none; }
.row .name.nom-corte{ display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; -webkit-line-clamp:unset; }   /* v113 · Gasto hormiga: «ESTACIONAMIE…» en una línea (antes «ESTACIONAMI / ENTO») */

/* ============================================================
   v114 · propuesta 4 · zonas de toque de al menos 44 px (guía de Apple)
   Lo que se ve más grande: logo 381, «En vivo», segmentados, selector de mes.
   Lo demás crece solo en la zona tocable (alto mínimo / relleno), sin mover el diseño.
   ============================================================ */
.brand-logo .logo381{ width:44px; height:44px; border-radius:12px; }
.live{ min-height:44px; }
.seg button, .seg button[aria-pressed="true"]{ min-height:44px; }
.month, .month select{ min-height:44px; }
@media (max-width:360px){ .month, .month select{ min-height:44px; } }
.more, .ap-link{ min-height:44px; display:inline-flex; align-items:center; }
.btn.sm{ min-height:44px; }
.cl-mini{ width:44px; height:44px; }
.note-i > summary, .mas > summary{ min-height:44px; }
.search input{ min-height:44px; box-sizing:border-box; }
.note a{ padding:14px 2px; margin:0 -2px; }   /* enlace dentro del texto («Historial»): zona de toque alta sin mover las líneas */

/* v114 · propuesta 3 · proyección por categoría */
.row .row-track .gx-proy{ position:absolute; left:0; top:0; bottom:0; border-radius:inherit; }
.row .row-track .gx-proy + .gx{ position:relative; }
.sub.proy-cat{ display:flex; align-items:center; gap:4px; margin-top:6px; font-weight:650; }
.sub.proy-cat svg{ flex:none; }
.proy-leg .proy-sw{ background:var(--accent); opacity:.38; }
.proy-leg .proy-sw{ background:var(--label-3); opacity:1; }
.row.con-proy{ flex-wrap:wrap; row-gap:0; }
.row.con-proy > .proy-cat{ flex:1 0 100%; margin-top:2px; padding-left:var(--proy-x, 52px); box-sizing:border-box; }
.cl-mini{ min-width:44px; min-height:44px; }
.heat-row{ min-height:44px; }
.note a{ padding:15px 2px; }

/* ============================================================
   v115 · Inicio: tarjeta «Gasto del mes» compacta (opción A de la maqueta «Inicio compacto»)
   Misma información, ~60% del alto: anillo más chico, «hoy» en una franja, 3 cierres en una fila,
   «Ver detalle» y «Gestionar presupuesto» en una sola fila.
   ============================================================ */
.ap-compacta{ gap:14px; }
.ap-compacta .ap-ring{ width:84px; height:84px; }
.ap-compacta .ap-amount{ font-size:40px; }
@media (max-width:360px){ .ap-compacta .ap-amount{ font-size:34px; } .ap-compacta .ap-ring{ width:72px; height:72px; } }
@media (min-width:1240px){ .ap-compacta .ap-ring{ width:104px; height:104px; } .ap-compacta .ap-amount{ font-size:46px; } }
.ap-c-hoy{ gap:8px; padding:12px 14px; border-radius:16px; }
.ap-c-fila{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ap-c-tit{ display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:700; color:var(--hc); }
.ap-c-tit svg{ flex:none; align-self:center; }
.ap-c-de{ font-size:14px; color:var(--label-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ap-c-de b{ color:var(--label); }
.ap-c-hoy .ap-hoy-bar{ height:6px; }
.ap-c-sig{ display:flex; justify-content:space-between; gap:6px 12px; flex-wrap:wrap; font-size:13.5px; color:var(--label-2); }
.ap-c-sig b{ color:var(--label); font-variant-numeric:tabular-nums; }
.ap-c-ach{ display:inline-flex; align-items:center; gap:2px; margin-left:5px; font-style:normal; font-size:12.5px; font-weight:650; color:var(--hc); }
.ap-c-cierre{ display:flex; flex-direction:column; gap:8px; }
.ap-c-k{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--label-3); }
.ap-c-cajas{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.ap-c-cajas.tres{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ap-c-cajas > div{ display:flex; flex-direction:column; gap:2px; padding:10px; border-radius:14px; background:color-mix(in srgb, var(--label) 7%, transparent); min-width:0; }
.ap-c-cajas small{ font-size:12px; color:var(--label-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-c-cajas b{ font-family:var(--font-num); font-size:17px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ap-c-cajas em{ font-style:normal; font-size:11.5px; line-height:1.25; color:var(--label-3); }
@media (max-width:360px){ .ap-c-cajas b{ font-size:15.5px; } .ap-c-cajas > div{ padding:9px 8px; } }
/* pie: «Ver detalle» a la izquierda y «Gestionar presupuesto» a la derecha; al abrir el detalle, el botón baja */
.ap-c-pie.on{ display:flex; flex-wrap:wrap; align-items:center; gap:0 10px; border-top:1px solid var(--sep); }
.ap-c-pie.on > .ap-more{ flex:1 1 auto; border-top:0; margin-top:0; }
.ap-c-pie.on > .ap-more > summary{ justify-content:flex-start; gap:6px; min-height:44px; }
.ap-c-pie.on > .ap-more[open]{ flex-basis:100%; }
.ap-c-pie.on > .ap-btn{ min-height:44px; padding:0 18px; border-radius:22px; font-size:15px; margin:6px 0; }
.ap-c-pie.on > .ap-more[open] + .ap-btn{ flex:1 1 100%; }
@media (max-width:400px){ .ap-c-pie.on > .ap-btn{ padding:0 14px; font-size:14px; } .ap-c-pie.on > .ap-more > summary{ font-size:15px; } }

/* ============================================================
   v116 · Gastos: Subcategorías en acordeón (grupo cerrado = total + barrita; tocar abre en el mismo cuadro)
   ============================================================ */
.acc{ border-bottom:1px solid var(--sep); margin:0; }
.acc:last-child{ border-bottom:0; }
.acc > summary{ list-style:none; }
.acc > summary::-webkit-details-marker{ display:none; }
.acc-h{ display:flex; align-items:center; gap:12px; min-height:60px; padding:8px 0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.acc-m{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.acc-n{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.acc-n b{ font-size:16px; font-weight:650; color:var(--label); }
.acc-s{ font-size:12.5px; color:var(--label-3); font-weight:500; white-space:nowrap; }
.acc-t{ height:5px; }
.acc-r{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-variant-numeric:tabular-nums; }
.acc-r b{ font-size:16px; color:var(--label); }
.acc-ch{ flex:none; color:var(--label-3); transition:transform .3s var(--ease-out, ease); }
.acc[open] > summary .acc-ch{ transform:rotate(180deg); }
.acc[open] > summary .acc-t{ opacity:.35; }
.acc-b{ padding:0 0 8px 6px; animation:apOpen .35s var(--ease-out, ease) both; }
@media (prefers-reduced-motion: reduce){ .acc-b{ animation:none; } .acc-ch{ transition:none; } }

/* v117 · Ritmo del mes en Inicio */
.ap-ritmo{ background:var(--card); border-radius:20px; padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; }
.ap-h-hint{ font-size:13px !important; font-weight:600 !important; color:var(--label-2) !important; }
.ap-ritmo .insight svg{ vertical-align:-2px; margin-right:2px; }
@media (min-width:880px){ .ap-ritmo .chart{ width:100%; max-width:620px; margin:0 auto; } }

/* v118 · Subcategorías con presupuesto y margen */
.acc-t{ position:relative; }
.acc-t .gx-proy{ position:absolute; left:0; top:0; bottom:0; border-radius:inherit; }
.acc-t .gx-proy + .gx{ position:relative; }
.acc-s svg{ vertical-align:-1px; }
.acc-nota{ margin:6px 0 4px; }
.acc-total{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 12px; border-top:1px solid var(--sep); padding-top:12px; margin-top:4px; font-size:14px; color:var(--label-2); }
.acc-total b{ color:var(--label); }
.acc-total svg{ vertical-align:-1px; }
#subsPresu{ min-height:44px; border:0; background:none; font:inherit; }
/* v118 · Préstamos por cobrar plegado */
.ap-loans-pl > summary{ list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:8px; padding:14px 0 12px; -webkit-tap-highlight-color:transparent; }
.ap-loans-pl > summary::-webkit-details-marker{ display:none; }
.ap-pl-top{ display:flex; align-items:baseline; gap:10px; }
.ap-pl-t{ flex:1; font-size:15px; color:var(--label-2); }
.ap-pl-t b{ color:var(--label); }
.ap-pl-n{ font-family:var(--font-num); font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.ap-pl-top .acc-ch{ color:var(--label-3); transition:transform .25s ease; align-self:center; }
.ap-loans-pl[open] .ap-pl-top .acc-ch{ transform:rotate(180deg); }
.ap-pl-bar{ display:block; height:6px; border-radius:3px; background:var(--sunken); overflow:hidden; }
.ap-pl-bar i{ display:block; height:100%; border-radius:3px; background:var(--accent); }
.ap-loans-pl .ap-loans-sum{ padding:0; border:0; }
.ap-loans-pl[open] > summary{ border-bottom:1px solid var(--sep); }
.ap-loans-pl[open] .ap-pl-b{ animation:apOpen .3s ease; }
@media (prefers-reduced-motion:reduce){ .ap-pl-top .acc-ch{ transition:none; } .ap-loans-pl[open] .ap-pl-b{ animation:none; } }
@media (min-width:1240px){
  body[data-page="inicio"] .ap-loans-pl{ display:block; }
  body[data-page="inicio"] .ap-loans-pl .ap-pl-b{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:40px; }
}
.acc-est{ white-space:normal; margin-top:-1px; line-height:1.35; }

/* ============================================================
   v119 · hoja Presupuesto en bloques + Tus ingresos · hoja Patrimonio
   ============================================================ */
.pz-card{ background:var(--sunken); border-radius:18px; padding:14px 16px 4px; display:flex; flex-direction:column; gap:10px; }
.pz-card-h{ font-size:16px; }
.pz-linea{ display:flex; flex-direction:column; gap:6px; }
.pz-barra{ display:flex; gap:2px; height:12px; border-radius:6px; overflow:hidden; background:var(--track); }
.pz-barra i{ display:block; height:100%; }
.pz-queda{ background:color-mix(in srgb, var(--down, #30D158) 18%, transparent); box-shadow:inset 0 0 0 1.5px var(--down, #30D158); border-radius:0 6px 6px 0; }
.pz-l{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px; color:var(--label-2); }
.pz-l b{ color:var(--label); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pz-l i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; }
.pz-l.pz-tot{ border-top:1px solid var(--sep); padding-top:8px; font-weight:600; }
.pz-l.pz-tot b svg{ vertical-align:-1px; }
.pz-fino{ font-size:12.5px; color:var(--label-3); }
.pz-link{ display:flex; align-items:center; justify-content:space-between; min-height:46px; border:0; border-top:1px solid var(--sep); background:none; color:var(--accent); font:inherit; font-size:15px; font-weight:600; padding:0; cursor:pointer; }
.card > .pz-link{ margin-bottom:-6px; }
.pz-sec{ border-radius:18px; }
.pz-sec > summary{ list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.pz-sec > summary::-webkit-details-marker{ display:none; }
.pz-h{ display:flex; align-items:center; gap:10px; min-height:48px; padding:0 2px; }
.pz-h > b{ flex:1; font-size:17px; }
.pz-r{ font-size:13.5px; color:var(--label-2); font-variant-numeric:tabular-nums; }
.pz-r b{ color:var(--label); }
.pz-h .acc-ch{ color:var(--label-3); transition:transform .3s var(--ease-out, ease); }
.pz-sec[open] > .pz-h .acc-ch{ transform:rotate(180deg); }
.pz-b{ background:var(--sunken); border-radius:18px; padding:8px 14px 14px; display:flex; flex-direction:column; animation:apOpen .3s var(--ease-out, ease) both; }
.pz-b .row{ border-color:var(--sep); }
.pz-sub{ margin-left:auto; font-weight:500; color:var(--label-3); }
.pz-sub b{ color:var(--label); font-weight:650; }
.pz-impr{ border-top:2px solid var(--sep); margin-top:8px; }
.pz-total{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 12px; border-top:1px solid var(--sep); padding-top:10px; margin-top:4px; font-size:13.5px; color:var(--label-2); }
.pz-total b{ color:var(--label); }
.pz-op{ display:flex; flex-direction:column; gap:8px; padding:10px 0; border-bottom:1px solid var(--sep); }
.pz-op .name{ font-size:15px; }
.pz-chips{ margin:0; flex-wrap:wrap; }
.pz-chips .cl-chip{ min-height:38px; }
.pz-calc{ background:var(--card); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:7px; margin-top:8px; }
.pz-sec.pz-ing .pz-b{ box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 40%, transparent); }
.pz-vacio{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:24px 8px; }
.pat-hoja .card{ background:var(--sunken); padding:16px; gap:12px; }
.pt-f{ display:flex; flex-direction:column; gap:5px; }
.pt-fl{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px; }
.pt-fl small{ margin-left:6px; color:var(--label-3); font-size:12px; }
.pt-fl b{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.pt-tr{ height:8px; border-radius:4px; background:var(--track); overflow:hidden; }
.pt-tr i{ display:block; height:100%; border-radius:4px; }
.pt-libre{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; border-top:1px solid var(--sep); padding-top:10px; }
.pt-libre span{ flex:1; }
.pt-libre b{ font-variant-numeric:tabular-nums; }
.pt-big{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin-top:-6px; }
.pt-big b{ font-family:var(--font-num); font-size:32px; font-weight:800; letter-spacing:-0.02em; }
.pt-big span{ color:var(--label-2); font-size:14px; }
.pt-tot{ font-family:var(--font-num); font-size:17px; font-variant-numeric:tabular-nums; }
.pt-sw{ flex:none; width:12px; height:12px; border-radius:3px; margin:0 8px 0 2px; }
.pat-hoja a.row{ color:inherit; text-decoration:none; }
.pt-viene .main{ min-width:0; }
.pt-fecha{ flex:none; width:44px; display:flex; flex-direction:column; align-items:center; font-size:11px; color:var(--label-3); line-height:1.15; }
.pt-fecha b{ font-family:var(--font-num); font-size:18px; color:var(--label); }
.pt-ok{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; border-top:1px solid var(--sep); padding-top:10px; font-size:14px; }
.pt-ok > span:first-child{ flex:1 1 160px; }
.pt-ok svg{ vertical-align:-2px; }
.pt-otro[hidden]{ display:none; }
.pt-anio{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:4px; align-items:end; height:146px; }
.pt-col{ display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.pt-col i{ display:block; width:100%; }
.pt-col i:first-child{ border-radius:3px 3px 0 0; }
.pt-col i:last-child{ border-radius:0 0 3px 3px; }
.pt-col i.cts{ background-image:repeating-linear-gradient(135deg, transparent 0 3px, var(--sunken) 3px 5px) !important; }
.pt-col.fut{ opacity:.42; }
.pt-col.hoy i:last-child{ box-shadow:0 0 0 1.5px var(--label); }
.pt-meses{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:4px; text-align:center; font-size:10.5px; color:var(--label-3); }
.pt-meses .hoy{ color:var(--label); font-weight:800; }
.legend i.pt-rayas{ background-image:repeating-linear-gradient(135deg, transparent 0 2px, var(--sunken) 2px 3.5px) !important; }
.pt-ah{ display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:30px; font-size:13px; font-variant-numeric:tabular-nums; }
.pt-ah > span:first-child{ color:var(--label-2); }
.pt-ah svg{ vertical-align:-1px; }
@media (prefers-reduced-motion:reduce){ .pz-b{ animation:none; } .pz-h .acc-ch{ transition:none; } }
.pz-vacio .btn{ align-self:center; }
@media (min-width:880px){ body[data-page="patrimonio"] .chart{ width:100%; max-width:620px; margin:0 auto; } }

/* ============================================================
   v122 · punto 1 de la línea gráfica (opción A): en Inicio cada sección es una tarjeta
   con su título DENTRO, igual que en el resto de pestañas (17 px, esquina 22, 16 px entre tarjetas)
   ============================================================ */
body[data-page="inicio"] .ap-sec{ margin-top:16px; background:var(--card); border-radius:var(--radius); box-shadow:inset 0 1px 0 var(--edge); padding:18px 18px 6px; }
body[data-page="inicio"] .ap-sec > .ap-h,
body[data-page="inicio"] .ap-sec > .ap-h-row > .ap-h{ margin:0; font-family:inherit; font-size:17px; font-weight:650; letter-spacing:-0.02em; }
body[data-page="inicio"] .ap-sec > .ap-h{ margin-bottom:4px; }
body[data-page="inicio"] .ap-sec > .ap-h-row{ margin:0 0 4px; padding-right:0; align-items:center; }
body[data-page="inicio"] .ap-sec .ap-h-n{ font-family:inherit; font-size:12.5px; font-weight:500; color:var(--label-2); }
body[data-page="inicio"] .ap-sec .ap-link{ font-size:15px; font-weight:500; gap:3px; }
body[data-page="inicio"] .ap-sec > .ap-group,
body[data-page="inicio"] .ap-sec > .ap-ritmo{ background:transparent; border-radius:0; padding-left:0; padding-right:0; box-shadow:none; }
body[data-page="inicio"] .ap-sec > .ap-ritmo{ padding:6px 0 12px; }
body[data-page="inicio"] .ap-sec > .ap-loans-pl > summary{ padding-top:6px; }
body[data-page="inicio"] .ap-card{ border-radius:var(--radius); }
body[data-page="inicio"] .ap-sec > .ap-foot{ padding:0 0 10px; }

/* v123 · punto 2A: Patrimonio con cifra principal */
.pt-hero .card-head .ap-link{ appearance:none; border:0; background:none; padding:4px 0; min-height:32px; font:inherit; font-size:15px; font-weight:500; color:var(--accent); cursor:pointer; display:inline-flex; align-items:center; gap:2px; }
.pt-hero .card-head .ap-link[aria-expanded="true"] svg{ transform:rotate(90deg); }
.pt-comp{ height:10px; }
.pt-partes .metric{ border-top:1px solid var(--sep); padding:10px 0 6px; }
.pt-sw.sm{ display:inline-block; width:9px; height:9px; border-radius:2px; margin:0 6px 0 0; vertical-align:0; }
.pt-act[hidden]{ display:none; }
.pt-hero .card-head:has(> #patAct){ flex-direction:row; align-items:center; }
.pt-hero .card-head:has(> #patAct) > #patAct{ margin-left:auto; }

/* v125 · punto 4A: dos grosores de barra, puntas redondas.
   6 px = una cifra (cuánto llevas de algo) · 10 px = reparto de un total o medidor contra tu meta */
.track, .row .row-track, .div-track, .fx-track, .cl-prog .track, .cl-prog2-b, .acc-t, .ap-pl-bar, .pt-tr, .tl-track{ height:6px; border-radius:3px; }
.track > span, .track > .gx, .pt-tr i, .ap-pl-bar i, .cl-prog2-b > span, .div-bar{ border-radius:3px; }
.tl-track{ top:13px; }
.stack, .meter, .vs .r .t, .ap-split .stack, .pz-barra, .pt-comp, .ap-hoy-bar, .ap-c-hoy .ap-hoy-bar{ height:10px; border-radius:5px; }
.stack span:first-child{ border-radius:5px 0 0 5px; } .stack span:last-child{ border-radius:0 5px 5px 0; } .stack span:only-child{ border-radius:5px; }
.meter .fill, .meter .ghost, .vs .r .t span{ border-radius:5px; }
.meter .mark{ top:-5px; height:20px; }
.meter-leg i.k-mark{ height:10px; }

/* v126 · punto 5A: «Tu año de ingresos» con el molde de Aportes */
.pt-anio{ height:150px; }
.pt-col{ align-items:stretch; }
.pt-col .v{ display:block; text-align:center; font-size:9.5px; font-weight:650; color:var(--label-3); white-space:nowrap; padding-bottom:3px; font-variant-numeric:tabular-nums; }
.pt-col i{ background:color-mix(in srgb, var(--c) 32%, transparent); box-sizing:border-box; }
.pt-col i:first-of-type{ border-radius:3px 3px 0 0; }
.pt-col i:last-child{ border-radius:0 0 3px 3px; }
.pt-col i:only-of-type{ border-radius:3px; }
.pt-col.hoy i{ background:var(--c); }
.pt-col.hoy .v{ color:var(--label); }
.pt-col.fut{ opacity:1; }
.pt-col.fut i{ background:transparent; border:1.5px dashed var(--c); }
.pt-col.fut i + i{ border-top:0; }
.pt-col.hoy i:last-child{ box-shadow:none; }
.legend i.pt-punt{ background:transparent !important; border:1.5px dashed var(--label-3); box-sizing:border-box; }

/* v128 · punto 7A: dos estilos de acción.
   Enlace (ir, abrir, desplegar): celeste 15 px/500 con › o ⌄ · Botón lleno (guardar/confirmar): .btn.solid / .ap-btn.solid */
#app .more, #app .ap-link, #app .ap-more > summary{ font-family:var(--font-ui); font-size:15px; font-weight:500; letter-spacing:-0.01em; color:var(--accent); background:none; border:0; padding:0; min-height:44px; display:inline-flex; align-items:center; gap:3px; cursor:pointer; }
#app .ap-more > summary{ display:flex; }
#app .more svg, #app .ap-link svg{ color:currentColor; }
#app .more.ap-accion{ align-self:flex-start; margin-top:auto; }

/* v130 · punto 9A: todas las leyendas a 12.5 px */
#app .legend, #app .meter-leg, #app .cal-legend, #app .ap-split-l, #app .legend span, #app .cal-legend span, #app .ap-split-l span{ font-size:12.5px; }

/* v131 · AFP = inversión bloqueada: morado rayado (la forma, no solo el color) */
.pt-afp{ background:repeating-linear-gradient(135deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 35%, var(--card)) 3px 5.5px) !important; }

/* v133 · gasto clasificado solo: rayo + palabra (no depende del color) */
.tag-auto{ display:inline-flex; align-items:center; gap:3px; margin-left:6px; padding:1px 6px; border-radius:6px; font-size:11.5px; font-weight:700; color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent); vertical-align:1px; white-space:nowrap; }
.tag-auto svg{ flex:none; }

/* v134 · fluidez
   1) el encabezado («Finanzas» + título) reserva su alto antes de dibujarse: las tarjetas ya no saltan 112 px al abrir cada pestaña
   2) las tarjetas lejos de la pantalla no se calculan hasta acercarte al hacer scroll (content-visibility); recuerdan su alto real */
#top:empty{ min-height:114px; }
body[data-page="clasificar"] #top:empty{ min-height:107px; }
#app > .card:nth-child(n+3), #app > .ap-sec:nth-child(n+3), #app .vista-cards > .card:nth-child(n+3){ content-visibility:auto; contain-intrinsic-size:auto 320px; }   /* las 2 primeras (en pantalla al abrir) se calculan siempre: así no salta nada */

/* v137 · Se clasifican solos */
.ra-grupo{ background:var(--sunken); border-radius:16px; padding:0 14px; margin-bottom:6px; }
.ra-grupo > * + *{ border-top:1px solid var(--sep); }
.ra-btn{ display:block; width:100%; font:inherit; color:inherit; background:transparent; border:0; padding:0; text-align:left; cursor:pointer; }
.ra-btn:disabled{ opacity:.5; cursor:default; }
.ra-btn:active:not(:disabled){ opacity:.7; }
.ra-fila{ display:flex; align-items:center; gap:12px; padding:11px 0; min-height:34px; }
.ra-main{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.ra-main b{ font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ra-main span{ font-size:13px; color:var(--label-2); }
.ra-acc{ font-size:14px; color:var(--accent); flex-shrink:0; }
.ra-monto{ font-size:14px; font-weight:600; flex-shrink:0; }
.ra-est{ font-size:12.5px; font-weight:600; color:var(--label-3); flex-shrink:0; }
.ra-est.on{ color:var(--ok); }
.ra-agregar{ width:100%; min-height:50px; margin-top:8px; display:flex; align-items:center; justify-content:center; gap:8px; }
.ra-form{ border:2px solid var(--accent); border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:10px; }
.ra-t{ margin:0; font-size:15px; }
.ra-cat{ display:flex; align-items:center; gap:10px; width:100%; min-height:52px; font:inherit; color:var(--label); background:var(--sunken); border:0; border-radius:12px; padding:0 12px; text-align:left; cursor:pointer; }
.ra-seg{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
.ra-seg button{ min-height:40px; }
.ra-max{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; color:var(--label-2); }
.ra-max span{ display:flex; align-items:center; gap:4px; background:var(--sunken); border-radius:10px; padding:0 12px; min-height:44px; color:var(--label); font-size:16px; font-weight:600; }
.ra-max input{ width:64px; font:inherit; color:inherit; background:transparent; border:0; outline:0; }
.ra-quitar{ width:100%; min-height:44px; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:15px; font-weight:600; color:var(--alto); background:transparent; border:0; cursor:pointer; }
.ra-seg button.on{ background:var(--seg-on); color:var(--label); box-shadow:0 2px 6px rgba(0,0,0,.2); }

/* v139 · calendario contra tu tope del día + columna «Sem» + marcas de pago */
:root{ --cal-bajo:rgba(90,200,250,0.18); --cal-sobre:rgba(255,159,10,0.32); --cal-muy:rgba(255,159,10,0.62); --cal-sobre-tx:#FFB340; --cal-muy-tx:#FFFFFF; --cal-ex:rgba(255,159,10,0.75); }
:root[data-tema="claro"]{ --cal-bajo:rgba(11,111,174,0.12); --cal-sobre:rgba(178,80,0,0.16); --cal-muy:rgba(178,80,0,0.34); --cal-sobre-tx:#8A3E00; --cal-muy-tx:#3D1C00; --cal-ex:rgba(178,80,0,0.6); }
.cal.cal8{ grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; }
.cal8 .wd-sem{ color:var(--label); }
.cal8 .d{ aspect-ratio:1 / 1.15; padding:4px 4px 3px; }
.cal8 .d .n{ display:flex; justify-content:space-between; align-items:flex-start; font-size:10.5px; }
.cal8 .d .a{ font-size:11px; font-weight:700; }
.cal8 .d.bajo{ background:var(--cal-bajo); color:var(--label); }
.cal8 .d.bajo .a{ color:var(--label-2); }
.cal8 .d.cero{ background:var(--fill); color:var(--label); }
.cal8 .d.sobre{ background:var(--cal-sobre); color:var(--label); }
.cal8 .d.sobre .a, .cal8 .d.sobre .cal-up{ color:var(--cal-sobre-tx); }
.cal8 .d.muy{ background:var(--cal-muy); color:var(--cal-muy-tx); }
.cal8 .d.muy .a, .cal8 .d.muy .cal-up{ color:var(--cal-muy-tx); }
.cal8 .d.fut .a{ color:var(--label-3); font-weight:600; }
.cal8 .d.fut.pago .a{ font-size:8.5px; color:var(--ok); }
.cal8 .cal-p{ display:inline-flex; color:var(--ok); }
.cal8 .d.muy .cal-p{ color:var(--cal-muy-tx); }
.cal-sem{ aspect-ratio:1 / 1.15; border-radius:8px; background:var(--sunken); padding:4px 4px 3px; display:flex; flex-direction:column; justify-content:space-between; box-sizing:border-box; }
.cal-sem.vacia{ background:transparent; }
.cal-sem .n{ display:flex; justify-content:flex-end; color:var(--cal-sobre-tx); min-height:9px; }
.cal-sem .a{ font-size:11px; font-weight:700; text-align:right; color:var(--label); line-height:1; }
.cal-sem.sobre .a{ color:var(--cal-sobre-tx); }
.cal-resumen{ margin:0; font-size:13px; color:var(--label-2); }
.cal-resumen b{ color:var(--label); }
.cal-ley{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--label-2); }
.cal-ley > span{ display:flex; align-items:center; gap:8px; }
.cal8 .cal-ics{ display:inline-flex; align-items:center; gap:2px; }
.cal-ley b{ color:var(--label); }
.cal-ley .sw{ width:14px; height:14px; border-radius:4px; flex-shrink:0; display:flex; align-items:flex-start; justify-content:flex-end; box-sizing:border-box; }
.cal-ley .sw.bajo{ background:var(--cal-bajo); }
.cal-ley .sw.sobre{ background:var(--cal-sobre); color:var(--cal-sobre-tx); }
.cal-ley .sw.sobre svg{ width:7px; height:7px; }
.cal-ley .sw.fut{ border:1.5px dashed var(--raised); }
.cal-ley .sw.ico{ color:var(--ok); align-items:center; justify-content:center; }
.cal-ley .sw.ico svg{ width:14px; height:14px; }
.cal-tope{ display:flex; flex-direction:column; gap:6px; }
.cal-tope-bar{ position:relative; height:8px; border-radius:4px; background:var(--track); }
.cal-tope-bar i{ position:absolute; top:0; bottom:0; border-radius:4px; }
.cal-tope-bar i.ok{ left:0; background:var(--accent); }
.cal-tope-bar i.ex{ background:var(--cal-ex); border-radius:0 4px 4px 0; }
.cal-tope-bar b{ position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:var(--label); }
.cal-tope-t{ font-size:12.5px; color:var(--label-2); display:flex; align-items:center; gap:4px; }
.cal-tope-t.sobre{ color:var(--cal-sobre-tx); font-weight:700; }

/* v142 · leyenda de la línea de la simulación de finde (raya larga) */
.legend .dash.dash-sim{ border-top-style:dashed; border-top-width:2px; }