/* =====================================================================
   Finanzas C&A — estilos (Versión Mejorada)
   Paleta: verde mineral de fondo, tinta pizarra, verde Paracas para
   lo común; azul para Christians y ciruela para Alessandra.
   ===================================================================== */

:root {
  --bg: #EDF1EF;
  --surface: #FFFFFF;
  --surface-2: #F5F8F7;
  --ink: #15252B;
  --muted: #5A6A6F;
  --line: #D3DCD9;
  --ambos: #0E6E5E;
  --chris: #2D5BA6;
  --ale: #A8406F;
  --ingreso: #1D7A46;
  --alerta: #B42318;
  --sobre-color: #FFFFFF;

  --f-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;

  --r-s: 8px;
  --r-m: 16px;
  --r-pill: 999px;
  --ancho: 640px;
  --tabs-h: 64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101A1C;
    --surface: #17252A;
    --surface-2: #1C2D32;
    --ink: #E5EEEC;
    --muted: #96A7AA;
    --line: #2A3C41;
    --ambos: #3DB39C;
    --chris: #82A6E8;
    --ale: #E58BB4;
    --ingreso: #5CC48A;
    --alerta: #F27D70;
    --sobre-color: #0D1719;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101A1C; --surface: #17252A; --surface-2: #1C2D32; --ink: #E5EEEC;
  --muted: #96A7AA; --line: #2A3C41; --ambos: #3DB39C; --chris: #82A6E8;
  --ale: #E58BB4; --ingreso: #5CC48A; --alerta: #F27D70; --sobre-color: #0D1719;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.45 var(--f-ui);
  -webkit-font-smoothing: antialiased;
}
main {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 20px) 16px calc(var(--tabs-h) + env(safe-area-inset-bottom) + 32px);
  outline: none;
}
h1, h2, h3 { margin: 0; font-family: var(--f-num); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; line-height: 1.15; }
h2 { font-size: 1.125rem; line-height: 1.3; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ambos); }
:focus-visible { outline: 2px solid var(--ambos); outline-offset: 2px; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.cargando { color: var(--muted); padding: 40vh 0; text-align: center; }
[hidden] { display: none !important; }

/* ---------- Encabezado con mes ---------- */
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cabecera h1 { text-transform: none; }
.mes-nav { display: flex; align-items: center; gap: 6px; }
.mes-nav button {
  width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; display: grid; place-items: center;
  transition: transform .12s ease, background .15s ease;
}
.mes-nav button:active:not(:disabled) { transform: scale(0.94); }
.mes-nav button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.mes-nav button:disabled { opacity: .35; cursor: default; }

/* ---------- Bloques ---------- */
.bloque {
  background: var(--surface);
  border-radius: var(--r-m);
  padding: 18px 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(15, 29, 34, 0.03);
}
.bloque > h2 { margin-bottom: 12px; }
.bloque .nota { font-size: .875rem; color: var(--muted); margin-top: 10px; }

/* ---------- 1. Tarjeta Héroe estilo Fintech ---------- */
.heroe-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0E6E5E 0%, #113C3B 55%, #15252B 100%);
  color: #FFFFFF;
  border-radius: 22px;
  padding: 22px 20px 18px;
  margin-bottom: 16px;
  box-shadow: 0 12px 28px -8px rgba(14, 110, 94, 0.38);
}
.heroe-card::before {
  content: "";
  position: absolute;
  top: -50px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.heroe-card .etiqueta {
  color: rgba(255, 255, 255, 0.78);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.heroe-card .monto-grande {
  font-family: var(--f-num);
  font-weight: 700;
  font-size: clamp(2.4rem, 10vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 6px 0 6px;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
.heroe-card .contexto {
  color: rgba(255, 255, 255, 0.72);
  font-size: .85rem;
  margin-bottom: 16px;
}
.heroe-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.heroe-pill {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 9px 12px;
  text-decoration: none;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background .15s ease;
}
.heroe-pill:hover { background: rgba(255, 255, 255, 0.16); }
.heroe-pill .k { font-size: .75rem; color: rgba(255, 255, 255, 0.75); }
.heroe-pill .num { font-size: 1.05rem; font-weight: 700; }

/* ---------- 2. Botones de Acción Rápida ---------- */
.acciones-rapidas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.accion-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  padding: 12px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.accion-btn:hover { background: var(--surface-2); border-color: var(--muted); }
.accion-btn:active { transform: scale(0.95); }
.accion-circulo {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  font-weight: 700;
}
.accion-circulo svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.accion-btn.gasto .accion-circulo { background: rgba(180, 35, 24, 0.12); color: var(--alerta); }
.accion-btn.ingreso .accion-circulo { background: rgba(29, 122, 70, 0.14); color: var(--ingreso); }
.accion-btn.transf .accion-circulo { background: rgba(45, 91, 166, 0.13); color: var(--chris); }
.accion-btn.cuentas .accion-circulo { background: rgba(14, 110, 94, 0.13); color: var(--ambos); }
.accion-btn span { font-size: .8125rem; font-weight: 600; }

/* La barra de reparto: el elemento protagonista */
.reparto { display: flex; height: 18px; border-radius: var(--r-pill); overflow: hidden; background: var(--line); margin: 6px 0 14px; }
.reparto span { display: block; height: 100%; min-width: 3px; }
.reparto span + span { box-shadow: -2px 0 0 var(--surface); }
.leyenda { display: grid; gap: 10px; }
.leyenda .fila { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: baseline; gap: 10px; }
.leyenda .pt { width: 12px; height: 12px; border-radius: 3px; transform: translateY(1px); }
.leyenda .pct { color: var(--muted); font-size: .875rem; min-width: 3.2em; text-align: right; }

.c-Ambos { background: var(--ambos); }
.c-Christians { background: var(--chris); }
.c-Alessandra { background: var(--ale); }
.t-Ambos { color: var(--ambos); }
.t-Christians { color: var(--chris); }
.t-Alessandra { color: var(--ale); }

/* ---------- Estado de resultados ---------- */
.estado { width: 100%; border-collapse: collapse; }
.estado td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.estado td:last-child { text-align: right; white-space: nowrap; }
.estado tr.total td { border-bottom: 0; padding-top: 12px; font-weight: 600; }
.estado tr.total td:last-child { font-family: var(--f-num); font-size: 1.35rem; font-weight: 700; }
.estado .sub { display: block; font-size: .8125rem; color: var(--muted); }
.pos { color: var(--ingreso); }
.neg { color: var(--alerta); }

/* ---------- Presupuesto ---------- */
.pres { display: grid; gap: 14px; }
.pres > div { min-width: 0; }
.pres .fila-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .9375rem; margin-bottom: 6px; }
.pres .fila-top > span:first-child { min-width: 0; flex: 1; display: flex; align-items: center; gap: 6px; overflow-wrap: break-word; }
.pres .fila-top .num { white-space: nowrap; color: var(--muted); font-size: .8125rem; flex-shrink: 0; }
.pres .fila-top .num b { color: var(--ink); font-weight: 600; }
.barra { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.barra i { display: block; height: 100%; background: var(--ambos); border-radius: var(--r-pill); }
.barra.excedido i { background: var(--alerta); }

/* ---------- Comparativo de personas ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duo > div { border-radius: var(--r-s); padding: 12px; background: var(--surface-2); border-left: 4px solid; }
.duo .nombre { font-size: .875rem; color: var(--muted); }
.duo .num { font-size: 1.25rem; font-weight: 700; display: block; margin-top: 2px; }
.duo .det { font-size: .8125rem; color: var(--muted); }

/* ---------- Saldos y Cuentas ---------- */
.saldos-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.saldos-mini > div { padding: 12px; border-radius: var(--r-s); background: var(--surface-2); }
.saldos-mini .k { font-size: .8125rem; color: var(--muted); }
.saldos-mini .num { display: block; font-size: 1.15rem; font-weight: 700; margin-top: 2px; }

.grupo-cuentas { margin-bottom: 16px; }
.grupo-cuentas header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 8px; }
.grupo-cuentas header .num { font-weight: 700; }
.lista-cuentas { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--r-m); overflow: hidden; }
.lista-cuentas li + li { border-top: 1px solid var(--line); }

/* 5. Botón interactivo de cada cuenta */
.cuenta-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.cuenta-item:hover { background: var(--surface-2); }
.cuenta-item .izq { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cuenta-item .titular-tag { font-size: .75rem; color: var(--muted); }
.cuenta-item .der { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cuenta-item .num { white-space: nowrap; font-weight: 600; }
.cuenta-item svg { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 2; }

/* ---------- 3 y 4. Movimientos con Buscador e Íconos ---------- */
.buscador-wrap {
  position: relative;
  margin-bottom: 12px;
}
.buscador-wrap svg {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  stroke: var(--muted); fill: none; stroke-width: 2;
  pointer-events: none;
}
.buscador-input {
  width: 100%;
  padding: 11px 38px 11px 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: .95rem;
}
.buscador-limpiar {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1rem;
}

.filtro-cuenta-activa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(14, 110, 94, 0.12);
  border: 1px solid var(--ambos);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: .875rem;
}
.filtro-cuenta-activa button {
  border: 0;
  background: var(--ambos);
  color: var(--sobre-color);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}

.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.dia { margin-bottom: 16px; }
.dia > h3 { font: 600 .875rem/1.3 var(--f-ui); color: var(--muted); margin: 0 2px 8px; }
.dia > h3::first-letter { text-transform: uppercase; }
.lista-movs { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--r-m); overflow: hidden; }
.lista-movs li + li { border-top: 1px solid var(--line); }

.mov {
  width: 100%;
  display: grid;
  grid-template-columns: 4px 40px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px 12px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.mov:hover { background: var(--surface-2); }
.mov .marca { width: 4px; align-self: stretch; border-radius: 0 3px 3px 0; }
.mov .icono-cat {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  position: relative;
}
.mov .badge-persona {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: .62rem;
  font-weight: 700;
  color: #FFF;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface);
}
.mov .titulo { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov .detalle { font-size: .8125rem; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov .derecha { text-align: right; }
.mov .monto { font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; display: block; }
.mov .quien { font-size: .75rem; color: var(--muted); }
.vacio { background: var(--surface); border-radius: var(--r-m); padding: 28px 20px; text-align: center; color: var(--muted); }
.vacio a { display: inline-block; margin-top: 10px; font-weight: 600; }

/* ---------- Formulario de registro ---------- */
.segmentado { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border-radius: var(--r-pill); padding: 4px; margin-bottom: 18px; }
.segmentado button { border: 0; background: none; padding: 10px 6px; border-radius: var(--r-pill); font-weight: 600; cursor: pointer; color: var(--muted); }
.segmentado button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.monto-entrada { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px 10px; margin-bottom: 18px; border-bottom: 3px solid var(--ambos); }
.monto-entrada.p-Christians { border-color: var(--chris); }
.monto-entrada.p-Alessandra { border-color: var(--ale); }
.monto-entrada .moneda { font-family: var(--f-num); font-size: 1.75rem; color: var(--muted); font-weight: 500; }
.monto-entrada input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--f-num); font-weight: 700; font-size: clamp(2.6rem, 13vw, 3.8rem); letter-spacing: -0.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums; padding: 0;
}
.monto-entrada input::placeholder { color: var(--line); }

.campo { margin-bottom: 18px; }
.campo > label, .campo > .rotulo { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 8px; }
.campo .ayuda { font-size: .8125rem; color: var(--muted); margin-top: 6px; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="password"],
.campo input[type="number"], .campo input[type="datetime-local"], .campo select, .campo textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface); min-height: 48px;
}
.campo textarea { min-height: 80px; resize: vertical; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill);
  padding: 8px 14px; min-height: 40px; cursor: pointer; font-size: .9375rem; white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip.persona[aria-pressed="true"].p-Ambos { background: var(--ambos); border-color: var(--ambos); color: var(--sobre-color); }
.chip.persona[aria-pressed="true"].p-Christians { background: var(--chris); border-color: var(--chris); color: var(--sobre-color); }
.chip.persona[aria-pressed="true"].p-Alessandra { background: var(--ale); border-color: var(--ale); color: var(--sobre-color); }

.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
details.mas { margin-bottom: 18px; }
details.mas summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 6px 0; }
details.mas[open] summary { margin-bottom: 12px; }
.conversion { font-size: .9375rem; margin-top: 8px; }

.acciones { display: grid; gap: 10px; margin-top: 8px; }
.btn {
  border: 0; border-radius: var(--r-pill); padding: 15px 20px; font-weight: 600; font-size: 1rem; cursor: pointer;
  background: var(--ink); color: var(--bg); min-height: 52px;
}
.btn:disabled { opacity: .5; cursor: progress; }
.btn.secundario { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn.peligro { background: none; color: var(--alerta); border: 1px solid var(--line); }
.error { color: var(--alerta); font-size: .9375rem; margin-top: 4px; }
.registra { font-size: .875rem; color: var(--muted); margin-bottom: 14px; }

/* ---------- Acceso ---------- */
.acceso { min-height: 80vh; display: grid; align-content: center; }
.acceso .marca-app { display: flex; gap: 12px; align-items: center; margin-bottom: 28px; }
.acceso .marca-app img { width: 52px; height: 52px; border-radius: 14px; }
.acceso h1 { font-size: 1.6rem; }

/* ---------- Pie de cuentas ---------- */
.pie { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: .9375rem; }

/* ---------- Barra de pestañas ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr);
  max-width: var(--ancho); margin: 0 auto;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
}
@media (min-width: 700px) {
  .tabs { bottom: 12px; border: 1px solid var(--line); border-radius: 20px; padding: 6px 8px; }
}
.tabs a {
  display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px;
  color: var(--muted); text-decoration: none; font-size: .75rem; font-weight: 600;
}
.tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs a[aria-current="page"] { color: var(--ink); }
.tabs a.tab-registrar svg { background: var(--ambos); color: var(--sobre-color); border-radius: var(--r-pill); width: 34px; height: 26px; padding: 3px 8px; }
.tabs a.tab-registrar[aria-current="page"] svg { background: var(--ink); color: var(--bg); }

/* ---------- Aviso flotante ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 20px);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: var(--r-pill);
  font-weight: 500; max-width: calc(100% - 32px); z-index: 20;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 900px) {
  :root { --ancho: 920px; }
  .inicio-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: start; }
  .inicio-grid > div > .bloque:last-child { margin-bottom: 0; }
  .form-angosto, .lista-angosta { max-width: 600px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
/* ---------- Selector de cuentas ---------- */
.cuenta-campo {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 10px 14px; min-height: 56px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface);
}
.cuenta-campo:hover { border-color: var(--muted); }
.cuenta-campo > svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc-texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cc-banco { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.cc-detalle { font-size: .8125rem; color: var(--muted); line-height: 1.3; }
.cc-vacio { color: var(--muted); }
.cc-rapidas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip.chip-chico { min-height: 32px; padding: 5px 12px; font-size: .8125rem; }

.hoja-fondo {
  position: fixed; inset: 0; z-index: 30; background: rgba(10, 20, 22, .45);
  display: flex; align-items: flex-end; justify-content: center;
  animation: hoja-fondo-in .18s ease;
}
.hoja {
  width: 100%; max-width: 560px; max-height: 82vh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 20px 20px 0 0;
  padding: 8px 0 env(safe-area-inset-bottom);
  animation: hoja-in .22s ease;
}
@media (min-width: 700px) {
  .hoja-fondo { align-items: center; }
  .hoja { border-radius: 20px; max-height: 76vh; }
}
.hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 6px 20px; }
.hoja-cab h2 { font-size: 1.0625rem; }
.hoja-cerrar { width: 40px; height: 40px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); cursor: pointer; display: grid; place-items: center; }
.hoja-cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hoja-filtros { display: flex; gap: 6px; padding: 4px 20px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.hoja-lista { overflow-y: auto; padding: 4px 8px 16px; overscroll-behavior: contain; }
.hoja-lista section + section { margin-top: 4px; }
.hoja-lista h3 { font: 600 .75rem/1.3 var(--f-ui); color: var(--muted); margin: 14px 12px 4px; }
.hoja-lista ul { list-style: none; margin: 0; padding: 0; }
.hoja-opcion {
  width: 100%; display: grid; grid-template-columns: 1fr auto 20px; align-items: center; gap: 10px;
  padding: 10px 12px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer;
}
.hoja-opcion:hover { background: var(--surface-2); }
.hoja-opcion[aria-pressed="true"] { background: var(--surface-2); }
.ho-texto { display: grid; min-width: 0; }
.ho-banco { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.ho-detalle { font-size: .8125rem; color: var(--muted); line-height: 1.3; }
.ho-saldo { font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.ho-saldo.neg { color: var(--alerta); }
.ho-check { width: 20px; height: 20px; fill: none; stroke: var(--ambos); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.hoja-opcion[aria-pressed="true"] .ho-check { visibility: visible; }

@keyframes hoja-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes hoja-fondo-in { from { opacity: 0; } to { opacity: 1; } }
.chip { display: inline-flex; align-items: center; gap: 6px; }

/* =====================================================================
   v2.3: vencimientos, tarjetas, bolsillos y reportes
   ===================================================================== */
:root { --ambar: #B26B00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ambar: #E8B04B; } }
:root[data-theme="dark"] { --ambar: #E8B04B; }

.tabs a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tabs { padding-left: 4px; padding-right: 4px; }
.tabs a { padding-left: 0; padding-right: 0; letter-spacing: -0.01em; }
@media (max-width: 440px) { .tabs a { font-size: .6875rem; } }

.titulo-seccion { font-size: 1.125rem; margin: 22px 2px 12px; }
.bloque-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bloque-cab h2 { margin: 0; }
.enlace-btn {
  border: 0; background: none; padding: 6px 2px; color: var(--ambos); font-weight: 600; font-size: .875rem;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.enlace-btn:hover { text-decoration: underline; }
.hoy-grid { margin-bottom: 4px; }
.aviso-info { background: var(--surface); border-left: 4px solid var(--ambar); border-radius: var(--r-s); padding: 14px 16px; margin-bottom: 14px; font-size: .9375rem; }

/* Aviso urgente arriba del inicio */
.aviso-urgente {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center;
  background: color-mix(in srgb, var(--alerta) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--alerta) 35%, transparent);
  color: var(--ink); border-radius: var(--r-m); padding: 12px 14px; margin-bottom: 14px;
}
.aviso-urgente svg { width: 22px; height: 22px; fill: none; stroke: var(--alerta); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.aviso-urgente p { font-size: .9375rem; line-height: 1.35; }
.aviso-urgente .mas-urg { color: var(--muted); white-space: nowrap; }
.btn-pagar {
  border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); font-weight: 600;
  padding: 9px 14px; font-size: .875rem; cursor: pointer; white-space: nowrap;
}
.btn-pagar.chico { padding: 6px 12px; font-size: .8125rem; }

/* Lista de vencimientos con semáforo */
.vencs { list-style: none; margin: 0; padding: 0; }
.venc { display: grid; grid-template-columns: 12px 1fr auto; grid-template-areas: "p t m" "p t a"; column-gap: 10px; row-gap: 6px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.venc:last-child { border-bottom: 0; }
.venc .punto { grid-area: p; width: 10px; height: 10px; border-radius: 50%; align-self: center; }
.venc-texto { grid-area: t; display: grid; min-width: 0; }
.venc-nombre { font-weight: 600; font-size: .9375rem; }
.venc-sub { font-size: .8125rem; color: var(--muted); }
.venc-monto { grid-area: m; text-align: right; font-weight: 700; white-space: nowrap; }
.venc-acc { grid-area: a; display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.s-rojo .punto { background: var(--alerta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alerta) 22%, transparent); }
.s-rojo .venc-sub { color: var(--alerta); font-weight: 600; }
.s-ambar .punto { background: var(--ambar); }
.s-ambar .venc-sub { color: var(--ambar); font-weight: 600; }
.s-verde .punto { background: var(--ingreso); }
.s-gris .punto { background: var(--line); }
.btn-cal {
  width: 34px; height: 34px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; color: var(--ink);
}
.btn-cal:hover { border-color: var(--muted); }
.btn-cal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ¿Con qué tarjeta pago hoy? */
.mini-seg { display: inline-flex; background: var(--surface-2); border-radius: var(--r-pill); padding: 3px; flex-shrink: 0; }
.mini-seg button { border: 0; background: none; padding: 5px 10px; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.mini-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ranking li:last-child { border-bottom: 0; }
.pos-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8125rem; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.ranking li.primera .pos-num { background: var(--ambos); color: var(--sobre-color); }
.rk-texto { display: grid; min-width: 0; }
.rk-nombre { font-weight: 600; font-size: .9375rem; }
.rk-sub { font-size: .8125rem; color: var(--muted); }
.rk-dias { display: grid; text-align: right; }
.rk-dias .num { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.ranking li.primera .rk-dias .num { color: var(--ambos); }
.sello { display: inline-block; font-size: .6875rem; font-weight: 700; color: var(--ambos); background: color-mix(in srgb, var(--ambos) 12%, transparent); border-radius: var(--r-pill); padding: 1px 8px; margin-left: 4px; vertical-align: 1px; }

/* Bolsillos */
.metas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.meta { width: 100%; display: grid; gap: 6px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-s); padding: 12px; cursor: pointer; }
.meta:hover { border-color: var(--muted); }
.meta-top { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.meta-det { font-size: .8125rem; color: var(--muted); }
.meta .barra i, .hoja .barra i { background: var(--ambos); }
.meta-grande { font-family: var(--f-num); font-size: 1.75rem; font-weight: 700; }
.meta-grande .muted { font-size: 1rem; font-weight: 500; }
.heroe-nota { font-size: .8125rem; color: rgba(255, 255, 255, .78); margin-top: 10px; }
.sub-titulo { font: 600 .875rem/1.3 var(--f-ui); color: var(--muted); margin: 18px 0 6px; }
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .875rem; }
.hist li:last-child { border-bottom: 0; }

/* Hojas con formularios */
.hoja-cuerpo { overflow-y: auto; padding: 8px 20px 24px; overscroll-behavior: contain; }
.hoja-cuerpo .campo input { width: 100%; }
.segmentado.dos { grid-template-columns: repeat(2, 1fr); }

/* Cuentas: fechas de tarjetas */
.tarjeta-fechas { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 16px 12px; margin-top: -4px; font-size: .8125rem; color: var(--muted); }
.vinculo { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--muted); margin: -8px 0 16px; }

/* Reportes */
.filtros-rep { display: grid; gap: 10px; margin-bottom: 16px; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 500; cursor: pointer; width: fit-content; }
.interruptor input { width: 20px; height: 20px; accent-color: var(--ambos); margin: 0; }
.rep-total { background: var(--surface); border-radius: var(--r-m); padding: 16px; margin-bottom: 14px; }
.monto-rep { font-family: var(--f-num); font-size: clamp(2rem, 9vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 2px 0 6px; }
.comparacion { font-size: .875rem; display: flex; flex-wrap: wrap; gap: 6px; }
.rep-acciones { display: flex; justify-content: flex-end; gap: 14px; margin-bottom: 4px; }
.rep-lista { background: var(--surface); border-radius: var(--r-m); overflow: hidden; }
.rep-cat + .rep-cat { border-top: 1px solid var(--line); }
.rep-cat summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  display: grid; grid-template-columns: 1fr auto 44px; gap: 4px 10px; align-items: center;
}
.rep-cat summary::-webkit-details-marker { display: none; }
.rep-cat summary:hover { background: var(--surface-2); }
.rc-nombre { font-weight: 600; min-width: 0; }
.rc-nombre::before { content: "▸"; display: inline-block; width: 1em; color: var(--muted); transition: transform .15s ease; }
.rep-cat[open] .rc-nombre::before { transform: rotate(90deg); }
.rc-monto { font-weight: 700; white-space: nowrap; }
.rc-pct { color: var(--muted); text-align: right; font-size: .875rem; }
.rc-barra { grid-column: 1 / -1; height: 6px; }
.rc-prev { grid-column: 1 / -1; font-size: .75rem; color: var(--muted); }
.rep-subs { list-style: none; margin: 0; padding: 0 16px 12px 36px; }
.rep-subs li { display: grid; grid-template-columns: 1fr auto 44px; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: .875rem; }
.rep-subs li .muted { text-align: right; }

@media (min-width: 900px) {
  .hoy-grid > div > .bloque:last-child { margin-bottom: 0; }
}

/* ---------- Reportes: subcategorías desplegables con sus movimientos ---------- */
.rep-subs { padding: 0 12px 10px 28px; }
.rep-sub { border-top: 1px dashed var(--line); }
.rep-sub summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto 44px; gap: 10px;
  align-items: center; padding: 9px 4px; font-size: .875rem; border-radius: 8px;
}
.rep-sub summary::-webkit-details-marker { display: none; }
.rep-sub summary:hover { background: var(--surface-2); }
.rep-sub summary .muted { text-align: right; }
.rs-nombre { min-width: 0; }
.rs-nombre::before { content: "▸"; display: inline-block; width: 1em; color: var(--muted); font-size: .75rem; transition: transform .15s ease; }
.rep-sub[open] .rs-nombre::before { transform: rotate(90deg); }
.rs-n { display: inline-block; min-width: 1.5em; padding: 0 6px; margin-left: 4px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); font-size: .6875rem; font-weight: 600; text-align: center; }
.rep-movs { list-style: none; margin: 2px 0 8px; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.rep-mov {
  width: 100%; display: grid; gap: 2px; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 8px 8px; border-radius: 8px;
}
.rep-mov:hover { background: var(--surface-2); }
.rm-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rm-titulo { font-weight: 600; font-size: .875rem; min-width: 0; }
.rm-monto { font-weight: 600; font-size: .875rem; white-space: nowrap; }
.rm-monto small { color: var(--muted); font-weight: 400; }
.rm-det { font-size: .75rem; color: var(--muted); }
.rm-obs { font-size: .75rem; color: var(--muted); font-style: italic; }

/* ---------- Registrar: sugerencia de pago fijo y nota de pago ---------- */
.sugerencia { background: color-mix(in srgb, var(--ambos) 7%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--ambos) 45%, transparent); border-radius: var(--r-s); padding: 12px; }
.sugerencia .chip { border-color: var(--ambos); color: var(--ambos); font-weight: 600; }
.nota-pago { display: block; background: var(--surface); border-radius: var(--r-s); padding: 10px 12px; color: var(--ink); }
.saldos-mini small { font-size: .8125rem; font-weight: 600; }

/* =====================================================================
   v2.4: gráfico por día y topes de presupuesto
   ===================================================================== */
.gd-ayuda { font-size: .75rem; }
.grafico-dias {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px;
  height: 150px; align-items: end; border-bottom: 1px solid var(--line); margin-top: 4px;
}
.gd-barra { height: 100%; display: flex; align-items: flex-end; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 4px 4px 0 0; }
.gd-barra:disabled { cursor: default; }
.gd-barra i { display: block; width: 100%; background: var(--ambos); border-radius: 4px 4px 0 0; transition: filter .15s ease; }
.gd-barra.finde i { background: color-mix(in srgb, var(--ambos) 45%, var(--surface)); }
.gd-barra:hover:not(:disabled) { background: var(--surface-2); }
.gd-barra:hover:not(:disabled) i { filter: brightness(1.12); }
.gd-barra.sel i { background: var(--ink); }
.gd-barra.sel { background: var(--surface-2); }
.gd-barra:focus-visible { outline: 2px solid var(--ambos); outline-offset: 1px; }
.gd-prom { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--muted); pointer-events: none; z-index: 1; }
.gd-prom span { position: absolute; right: 0; bottom: 2px; font-size: .6875rem; color: var(--muted); background: var(--surface); padding: 0 4px; border-radius: 4px; }
.gd-ejes { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px; margin-top: 4px; }
.gd-ejes span { font-size: .6875rem; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.gd-leyenda { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); margin: 8px 0 12px; flex-wrap: wrap; }
.gd-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.gd-leyenda i + * { margin-right: 8px; }
.ley-lab { background: var(--ambos); }
.ley-fin { background: color-mix(in srgb, var(--ambos) 45%, var(--surface)); margin-left: 10px; }
.gd-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gd-datos > div { background: var(--surface-2); border-radius: var(--r-s); padding: 10px; display: grid; gap: 2px; min-width: 0; }
.gd-datos .k { font-size: .75rem; color: var(--muted); }
.gd-datos .num { font-weight: 700; font-size: 1rem; }
.gd-datos .d { font-size: .75rem; color: var(--muted); }
.detalle-dia { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.dd-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.dd-cab .num { font-weight: 700; }
@media (max-width: 380px) { .gd-datos { grid-template-columns: 1fr 1fr; } }

.pres-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px; margin: -4px; border-radius: 8px; cursor: pointer; }
.pres-item:hover { background: var(--surface-2); }
.topes { list-style: none; margin: 0; padding: 0; }
.topes li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.topes li:last-child { border-bottom: 0; }
.topes label { font-size: .9375rem; min-width: 0; }
.tope-input { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tope-input input { width: 110px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); text-align: right; min-height: 44px; }

/* =====================================================================
   v2.5 — plegables, insignias, cuentas por persona, filtros y deudas
   ===================================================================== */
/* Filtros de Movimientos: los 4 botones entran en el ancho del celular */
.filtros { flex-wrap: wrap; overflow: visible; }
.filtros .chip { padding-left: 12px; padding-right: 12px; font-size: .875rem; }
@media (max-width: 400px) { .filtros { gap: 6px; } .filtros .chip { padding-left: 10px; padding-right: 10px; font-size: .8125rem; } }

/* Bloques plegables */
.pleg .bloque-cab { margin-bottom: 12px; }
.pleg-btn { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 0; margin: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; flex: 1; min-width: 0; }
.pleg-btn h2 { margin: 0; }
.pleg-btn .flecha { color: var(--muted); font-size: .85rem; width: 14px; flex-shrink: 0; transition: transform .2s; }
.pleg.cerrado .flecha { transform: rotate(-90deg); }
.pleg.cerrado .bloque-cab { margin-bottom: 4px; }
.pleg.cerrado .pleg-cuerpo, .pleg.cerrado .pleg-acc { display: none; }
.pleg-resumen { display: none; margin: 0 0 0 22px; font-size: .875rem; color: var(--muted); }
.pleg-resumen b { color: var(--ink); font-weight: 700; }
.pleg-resumen b.neg { color: var(--alerta); }
.pleg-resumen b.pos { color: var(--ingreso); }
.pleg.cerrado .pleg-resumen { display: block; }
.pt-res { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--line); }
.pt-res.s-rojo { background: var(--alerta); } .pt-res.s-ambar { background: var(--ambar); } .pt-res.s-verde { background: var(--ingreso); }

/* Insignias de banco (letras y colores propios, no son logos) */
.insignia { --anillo: var(--ambos); position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 800 11px/1 var(--f-ui); letter-spacing: -.02em; margin: 4px 12px 4px 4px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--anillo); }
.insignia.grande { width: 40px; height: 40px; font-size: 12px; }
.insignia.largo { font-size: 9.5px; } .insignia.grande.largo { font-size: 10.5px; }
.insignia.mini { width: 22px; height: 22px; font-size: 7.5px; margin: 0 8px 0 2px; vertical-align: -6px; box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--anillo); }
.insignia.mini.largo { font-size: 6.5px; }
.insignia.micro { width: 16px; height: 16px; font-size: 5.5px; margin: 0 4px 0 1px; vertical-align: -4px; box-shadow: 0 0 0 1px var(--surface), 0 0 0 2px var(--anillo); }
.insignia.micro.largo { font-size: 4.8px; }
.ins-usd { position: absolute; right: -6px; bottom: -6px; width: 17px; height: 17px; border-radius: 50%; background: #E8A317; color: #222; font: 800 10px/13px var(--f-ui); text-align: center; font-style: normal; border: 2px solid var(--surface); }
.insignia.mini .ins-usd { width: 12px; height: 12px; font-size: 7px; line-height: 9px; right: -5px; bottom: -4px; border-width: 1.5px; }
.insignia.micro .ins-usd { width: 9px; height: 9px; font-size: 5.5px; line-height: 7px; right: -4px; bottom: -3px; border-width: 1px; }
.hoja-opcion { grid-template-columns: auto 1fr auto 20px; }
.cuenta-campo .insignia { margin-right: 10px; }

/* Cuentas por persona */
.resumen-cuentas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--surface); border-radius: var(--r-m); padding: 14px 12px; margin-bottom: 12px; }
.resumen-cuentas > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resumen-cuentas .k { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.resumen-cuentas .num { font: 700 1rem var(--f-num); white-space: nowrap; }
.resumen-cuentas small { font-size: .72rem; color: var(--muted); }
.cuentas-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.cuentas-barra .pista { font-size: .78rem; }
.con-ins { flex-direction: row !important; align-items: center; }
.ins-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ins-nom { font-weight: 600; }
.num-col { display: flex; flex-direction: column; align-items: flex-end; }
.usd-linea { font-size: .78rem; font-weight: 600; }
.grupo-persona, .grupo-ceros { margin-bottom: 14px; }
.grupo-persona > summary, .grupo-ceros > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 4px 2px 8px; cursor: pointer; font-weight: 700; }
.grupo-persona > summary::-webkit-details-marker, .grupo-ceros > summary::-webkit-details-marker { display: none; }
.gp-punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.gp-nombre { font: 700 1.1rem var(--f-num); flex: 1; }
.gp-tot { display: flex; flex-direction: column; align-items: flex-end; font-size: .85rem; font-weight: 600; }
.gp-flecha { color: var(--muted); font-size: .85rem; transition: transform .2s; }
details:not([open]) > summary .gp-flecha { transform: rotate(-90deg); }
.grupo-ceros > summary { font-weight: 600; color: var(--ambos); justify-content: center; background: var(--surface); border-radius: var(--r-m); padding: 12px; }
.grupo-ceros[open] > summary { margin-bottom: 8px; }

/* Filtro por categoría en Movimientos */
.filtro-cat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 6px; }
.sel-cat { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; position: relative; min-width: 0; }
.sel-cat span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sel-cat select { border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); padding: 2px 18px 2px 0; appearance: none; -webkit-appearance: none; width: 100%; text-overflow: ellipsis; }
.sel-cat select option { color: #15252B; }
.sel-cat::after { content: '▾'; position: absolute; right: 10px; bottom: 9px; color: var(--muted); pointer-events: none; }
.sel-cat.activo { border-color: var(--ambos); box-shadow: 0 0 0 1px var(--ambos) inset; }
.sel-cat.apagado { opacity: .5; }
.resumen-filtro { display: flex; justify-content: space-between; align-items: center; font-size: .875rem; margin: 8px 2px 10px; }
.resumen-filtro button { border: 0; background: none; color: var(--ambos); font: inherit; font-weight: 700; cursor: pointer; }
#resumen-filtro:empty { display: none; }
.filtro-cat + #resumen-filtro:empty { display: block; height: 8px; }

/* Reportes: línea de dólares */
.linea-usd { font-size: .8125rem; color: var(--muted); margin: 2px 0 4px; }
.linea-usd b { color: var(--ink); }

/* Deudas y préstamos */
.tot2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 14px; }
.tot2 > div { background: var(--surface); border-radius: var(--r-m); padding: 12px 14px; border-left: 5px solid var(--alerta); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tot2 > div.verde { border-left-color: var(--ingreso); }
.tot2 .k { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tot2 .num { font: 700 1.2rem var(--f-num); white-space: nowrap; }
.tot2 small { font-size: .72rem; color: var(--muted); }
.bloque .tot2 > div { background: var(--surface-2); }
.tabs2 { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; margin-bottom: 10px; }
.tabs2 button { border: 0; background: none; padding: 9px 6px; border-radius: var(--r-pill); font: 600 .9rem var(--f-ui); color: var(--muted); cursor: pointer; }
.tabs2 button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.quien-deudas { margin-bottom: 6px; }
.deudas .subt { font: 600 .75rem/1.3 var(--f-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 2px 8px; }
.deuda-card { display: block; width: 100%; background: var(--surface); border: 0; border-radius: var(--r-m); padding: 14px; margin-bottom: 10px; text-align: left; color: inherit; font: inherit; cursor: pointer; }
div.deuda-card { cursor: default; }
.dc-abrir { display: block; width: 100%; border: 0; background: none; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.dc-top { display: flex; align-items: flex-start; gap: 10px; }
.dc-ico { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; background: var(--surface-2); }
.dc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-nom { font-weight: 700; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dc-sub { font-size: .8rem; color: var(--muted); }
.dc-falta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.dc-falta .num { font: 700 1.05rem var(--f-num); }
.dc-falta small { font-size: .72rem; color: var(--muted); }
.dc-barra { display: block; margin: 12px 0 6px; }
.barra.rojo i { background: #C2554D; }
.dc-pie { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--muted); }
.dc-pie b { color: var(--ink); }
.dc-falta-dato { color: var(--ambos); font-weight: 600; }
.dc-pie:has(.dc-falta-dato) { margin-top: 10px; }
.tag-inv { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); background: #FFF1D6; color: #8A5A00; }
.dueno-tag { font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); color: #fff; }
.btn-abono { margin-top: 10px; width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-pill); padding: 9px; font: 600 .85rem var(--f-ui); color: var(--ambos); cursor: pointer; }
.nuevo-deuda { display: block; width: 100%; text-align: center; background: var(--surface); border: 0; border-radius: var(--r-m); padding: 13px; color: var(--ambos); font: 700 .95rem var(--f-ui); margin-top: 6px; cursor: pointer; }
.hist-deudas { margin-top: 12px; font-size: .875rem; }
.hist-deudas summary { cursor: pointer; text-align: center; color: var(--muted); padding: 6px; }
.hist-deudas ul { list-style: none; margin: 8px 0 0; padding: 0 14px; background: var(--surface); border-radius: var(--r-m); }
.hist-deudas li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hist-deudas li:last-child { border-bottom: 0; }
.acciones.vertical { gap: 12px; }
.opcion-grande { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px 16px; height: auto; }
.opcion-grande span { font-size: .8125rem; font-weight: 400; opacity: .85; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag-inv { background: #4A3A12; color: #F3D27A; } }
:root[data-theme="dark"] .tag-inv { background: #4A3A12; color: #F3D27A; }
.opcion-grande { border-radius: 16px; }

/* v2.6 — préstamos en soles y dólares */
.tag-mon { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); background: #E3ECF8; color: #24508F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag-mon { background: #1E3350; color: #A9C6F0; } }
:root[data-theme="dark"] .tag-mon { background: #1E3350; color: #A9C6F0; }
.tot-usd { font: 700 .9rem var(--f-num); color: inherit; }
.tot2 .rojo .tot-usd { color: var(--alerta); } .tot2 .verde .tot-usd { color: var(--ingreso); }
.dc-barra.doble { margin: 10px 0 5px; }
.dc-pie .mon { color: var(--ink); margin-right: 2px; }
.dp-parte + .dp-parte { border-top: 1px solid var(--line); padding-top: 10px; }
[data-solo][hidden] { display: none; }
.fca-nombre { display: inline-flex; align-items: center; min-width: 0; }
.info-tarjeta-mov { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .8125rem; color: var(--muted); margin: -4px 2px 12px; }
.info-tarjeta-mov .enlace-btn { flex-shrink: 0; }

/* v2.6 — totales de deudas: préstamos, inversiones y lo que me deben */
:root { --inv: #A86A00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --inv: #E8B04B; } }
:root[data-theme="dark"] { --inv: #E8B04B; }
.num.inv, .pleg-resumen b.inv { color: var(--inv); }
.tot3 { display: grid; gap: 0; margin: 0 0 14px; background: var(--surface); border-radius: var(--r-m); overflow: hidden; }
.tot3 > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-left: 5px solid var(--alerta); }
.tot3 > div + div { border-top: 1px solid var(--line); }
.tot3 > div.dorado { border-left-color: var(--inv); }
.tot3 > div.verde { border-left-color: var(--ingreso); margin-top: 6px; border-top: 6px solid var(--bg); }
.tot3 > div.total-debo { border-left-color: var(--line); background: var(--surface-2); font-size: .875rem; font-weight: 600; padding-top: 8px; padding-bottom: 8px; }
.t3-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.t3-txt .k { font-weight: 700; font-size: .9rem; }
.t3-txt small { font-size: .72rem; color: var(--muted); }
.t3-num { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.t3-num .num { font: 700 1.05rem var(--f-num); white-space: nowrap; }
.total-debo .t3-num .num { font-size: .95rem; }
.tot3 .tot-usd { font-size: .8rem; font-weight: 700; }
.tot3 .rojo .tot-usd { color: var(--alerta); } .tot3 .verde .tot-usd { color: var(--ingreso); }
.bloque .tot3 { background: var(--surface-2); }
.bloque .tot3 > div.verde { border-top-color: var(--surface); }
.bloque .tot3 > div.total-debo { background: var(--bg); }
.pt-res.s-dorado { background: var(--inv); }
.barra.dorada i { background: var(--inv); }

/* =====================================================================
   v2.7 — Registrar por voz con IA
   ===================================================================== */
.dictar { background: var(--surface); border: 1.5px solid var(--ambos); border-radius: var(--r-m); padding: 12px 12px 12px 14px; margin-bottom: 16px; }
.dictar.chico { padding-top: 8px; padding-bottom: 8px; }
.dictar-fila { display: flex; align-items: center; gap: 12px; }
.dictar-txt { flex: 1; min-width: 0; }
.dictar-txt b { display: block; font-size: .9375rem; }
.dictar-txt small { display: block; color: var(--muted); font-size: .8125rem; margin-top: 2px; }
.dictar-txt .enlace-btn { font-size: .8125rem; margin-top: 4px; padding: 0; }
.mic { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--ambos); color: var(--sobre-color); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dictar.chico .mic { width: 44px; height: 44px; }
.mic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mic.on { background: #C62828; color: #fff; animation: ia-pulso 1.4s ease-out infinite; }
@keyframes ia-pulso { 0% { box-shadow: 0 0 0 0 rgba(198,40,40,.35); } 100% { box-shadow: 0 0 0 16px rgba(198,40,40,0); } }
.dictar.escuchando { border-color: #C62828; }
.ondas { display: flex; gap: 4px; justify-content: center; align-items: center; height: 30px; margin: 10px 0 6px; }
.ondas i { width: 4px; height: 8px; border-radius: 3px; background: #C62828; animation: ia-onda 0.9s ease-in-out infinite; }
.ondas i:nth-child(2n) { animation-delay: .15s; } .ondas i:nth-child(3n) { animation-delay: .3s; } .ondas i:nth-child(5n) { animation-delay: .45s; }
@keyframes ia-onda { 0%, 100% { height: 6px; } 50% { height: 28px; } }
.transc { background: var(--surface-2); border-radius: var(--r-s); padding: 10px 12px; font-size: 1rem; line-height: 1.4; margin: 0; min-height: 44px; }
.dictar.escribir textarea { width: 100%; margin-top: 10px; border: 1.5px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; font: 1rem/1.4 var(--f-ui); background: var(--surface-2); color: var(--ink); resize: vertical; min-height: 84px; }
.dictar.escribir textarea:focus { outline: none; border-color: var(--ambos); }
.dictar-acc { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.dictar-acc .btn { flex: 1; }
.ia-error { margin: 8px 0 0; font-size: .875rem; }
.ia-girando { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ambos); animation: ia-gira .8s linear infinite; flex: 0 0 auto; margin-right: 12px; }
@keyframes ia-gira { to { transform: rotate(360deg); } }
.aviso-ia { background: color-mix(in srgb, var(--ambos) 10%, var(--surface)); border: 1px solid var(--ambos); border-radius: var(--r-s); padding: 10px 12px; margin-bottom: 12px; font-size: .875rem; }
.aviso-ia p { margin: 0; }
.aviso-ia b { color: var(--ambos); }
.aviso-ia .ia-oido { color: var(--muted); font-size: .8125rem; margin-top: 3px; }
.aviso-ia .ia-falta { margin-top: 4px; color: var(--ink); }
.aviso-ia .ia-falta b { color: var(--alerta); }
.tag-ia { display: inline-block; font: 700 .65rem/1 var(--f-ui); color: var(--ambos); background: color-mix(in srgb, var(--ambos) 12%, transparent); border-radius: var(--r-pill); padding: 3px 7px; margin-left: 8px; vertical-align: 2px; letter-spacing: .02em; }
.monto-entrada .tag-ia { align-self: center; }
@media (prefers-reduced-motion: reduce) { .mic.on, .ondas i, .ia-girando { animation: none; } }

/* =====================================================================
   v2.8 — pendientes, cierre de fin de mes y topes por mes
   ===================================================================== */
.amb { color: var(--ambar); }
.btn-pagar.secundario { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }

/* Aviso rojo de Inicio: todo el aviso abre la ventana de pendientes */
.aviso-urgente { cursor: pointer; }
.aviso-urgente .mas-urg { display: inline-block; border: 0; background: none; padding: 6px 0 0; margin: 0; font: inherit; font-size: .875rem; font-weight: 700; color: var(--alerta); text-decoration: underline; cursor: pointer; }

/* Aviso del cierre de mes */
.aviso-cierre {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  background: color-mix(in srgb, var(--ambos) 9%, var(--surface)); border: 1.5px solid var(--ambos);
  border-radius: var(--r-m); padding: 12px 14px; margin-bottom: 14px;
}
.aviso-cierre.tarde { background: color-mix(in srgb, var(--ambar) 11%, var(--surface)); border-color: var(--ambar); }
.ac-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; background: color-mix(in srgb, var(--ambos) 18%, var(--surface)); }
.aviso-cierre.tarde .ac-ico { background: color-mix(in srgb, var(--ambar) 22%, var(--surface)); }
.aviso-cierre p { display: grid; gap: 1px; font-size: .9375rem; line-height: 1.3; min-width: 0; }
.aviso-cierre small { color: var(--muted); font-size: .8125rem; }
.ac-plazo { font-size: .8125rem; font-weight: 700; color: var(--ambos); }
.aviso-cierre.tarde .ac-plazo { color: var(--alerta); }
.aviso-cierre .btn-pagar { min-height: 44px; }

/* Ventana de pendientes */
.pend-titulo { display: flex; align-items: center; gap: 8px; font: 700 .8125rem/1.3 var(--f-ui); margin: 16px 2px 8px; }
.pend-titulo:first-child { margin-top: 4px; }
.pend-titulo .pt-res { margin: 0; }
.pend-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pend-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.pend-boton { width: 100%; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.pend-boton:active { filter: brightness(.96); }
.pend-txt { display: grid; gap: 2px; min-width: 0; }
.pend-txt b { font-size: .9375rem; display: flex; align-items: center; flex-wrap: wrap; }
.pend-txt small { font-size: .8125rem; color: var(--muted); }
.pend-txt small.neg { color: var(--alerta); font-weight: 600; }
.pend-txt small.amb { color: var(--ambar); font-weight: 600; }
.pend-der { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; text-align: right; font-weight: 700; }
.pend-der .btn-pagar.chico { min-height: 36px; }

/* Cierre de mes: acceso desde Cuentas */
.cierre-link { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 0; border-radius: var(--r-m); padding: 12px 14px; margin-bottom: 12px; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.cierre-link > span:first-child { font-size: 1.25rem; }
.cierre-link > span:nth-child(2) { flex: 1; display: grid; gap: 1px; }
.cierre-link small { color: var(--muted); font-size: .8125rem; }
.cierre-link svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; }

/* Cierre de mes: pantalla */
.cierre-avance .ca-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .875rem; margin-bottom: 8px; }
.cierre-avance .barra { height: 10px; }
.pasos-cierre { list-style: none; padding: 2px 6px; }
.pasos-cierre li + li { border-top: 1px solid var(--line); }
.paso-btn { width: 100%; display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 12px 8px; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; border-radius: 10px; min-height: 56px; }
.paso-btn:active { background: var(--surface-2); }
.paso-txt { display: grid; gap: 2px; min-width: 0; }
.paso-txt b { font-size: .9375rem; }
.paso-txt small { font-size: .8125rem; color: var(--muted); }
.paso-der { display: flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 700; color: var(--muted); }
.paso-der.pos { color: var(--ingreso); }
.paso-der svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; }
.ck { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--sobre-color); flex-shrink: 0; }
.ck.ok { background: var(--ingreso); border-color: var(--ingreso); }
.mes-cierre-nav { display: flex; justify-content: space-between; gap: 10px; margin: 4px 2px 0; }
.mes-cierre-nav .enlace-btn { min-height: 44px; }

/* Cierre de mes: cuadrar cuentas */
.cz-filtros { padding: 0 0 10px; border-bottom: 0; }
.cz-cuenta { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; background: var(--surface); }
.cz-top { display: flex; align-items: center; gap: 4px; }
.cz-top .insignia { margin-left: 2px; }
.cz-txt { flex: 1; display: grid; gap: 1px; min-width: 0; }
.cz-txt b { font-size: .9375rem; }
.cz-txt small { font-size: .78rem; color: var(--muted); }
.cz-comp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cz-comp > div, .cz-real { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; min-width: 0; }
.cz-comp .k { font-size: .75rem; color: var(--muted); }
.cz-comp .num { font-size: 1.05rem; white-space: nowrap; }
.cz-real { border: 1.5px solid var(--ambos); background: var(--surface); }
.cz-real input { border: 0; background: none; padding: 0; font: 700 1.05rem var(--f-num); width: 100%; min-height: 28px; outline: none; color: var(--ink); }
.cz-dif { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: .875rem; }
.cz-dif .btn-pagar.chico { min-height: 40px; padding-left: 16px; padding-right: 16px; }
.cz-dif .chip-chico { min-height: 40px; }
.cz-nota { flex-basis: 100%; font-size: .8125rem; color: var(--muted); margin: 6px 0 0; }
.aj-lista li b { text-align: right; }

/* Topes por mes */
.topes-modo { margin: 10px 0 6px; }
.topes-modo button { font-size: .8125rem; }
.topes label { display: grid; gap: 2px; }
.tope-det { font-size: .75rem; color: var(--muted); font-weight: 400; }
.tope-input input:disabled { opacity: .75; background: var(--surface-2); }
.tope-input input.cambio { border: 1.5px solid var(--ambos); background: color-mix(in srgb, var(--ambos) 7%, var(--surface)); }