/* ==========================================================
   Tokens
   ========================================================== */
:root {
  color-scheme: light;
  --bg: #f4f3ff;
  --surface: #ffffff;
  --surface-2: #efedfd;
  --surface-hover: #ebe8fc;
  --border: rgba(31, 16, 59, 0.08);
  --border-strong: rgba(31, 16, 59, 0.16);
  --text: #1f103b;
  --text-2: #4b4170;
  --muted: #6c6391;
  --grid: #ebe8f8;
  --axis: #c6c0e4;

  --accent: #4500fa;
  --mask: rgba(69, 0, 250, 0.15);
  --accent-ink: #f4f3ff;
  --brand-soft: #b8b8ff;
  --logo-a: #9381ff;
  --logo-b: #4500fa;
  /* Lo que avanza se intensifica: degradé de suave a intenso */
  --bar-grad: linear-gradient(90deg, #b8b8ff, #4500fa);
  --tick-grad: linear-gradient(45deg, #b8b8ff, #4500fa);
  --tick-ink: #f4f3ff;
  --sp-1a: #b8b8ff; --sp-1b: #9381ff; --sp-2a: #9381ff; --sp-2b: #4500fa;
  --income: #1baf7a;
  --expense: #eb6834;
  --balance: #4500fa;
  --good-text: #0f7a3d;
  --bad-text: #c0392b;
  --danger: #d03b3b;
  --warn: #9a6700;
  /* Tilde de los avisos (sobre fondo tinta) y rayas de los gastos en la opción Sin colores */
  --toast-ok: #1baf7a;
  --stripe: #361889;

  /* Categorías de los gráficos: arranca con el violeta de la marca; validada para daltonismo (fondo #ffffff) */
  --s1: #5b3ff0; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #2a78d6; --s8: #e34948;

  --shadow: 0 1px 2px rgba(31, 16, 59, 0.05), 0 8px 24px -12px rgba(31, 16, 59, 0.12);
  --shadow-lg: 0 24px 60px -20px rgba(31, 16, 59, 0.3);
  /* Fondo de la app: el degradé de la marca, suavizado en claro para que no compita con las tarjetas */
  --app-bg: radial-gradient(circle at 92% 6%, rgba(181, 182, 255, 0.55) 0, transparent 52%),
    radial-gradient(circle at 0% 0%, rgba(255, 255, 208, 0.65) 0, transparent 46%),
    radial-gradient(circle at 24% 100%, rgba(136, 111, 252, 0.28) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255, 253, 208, 0.55) 0, transparent 40%),
    #ebe9ff;
  --sidebar-bg: rgba(255, 255, 255, 0.4);
  --radius: 18px;
  --radius-sm: 12px;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Montos: Poppins no tiene números tabulares, así que las cifras usan Plus Jakarta Sans */
  --font-num: "Plus Jakarta Sans", "Poppins", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0819;
    --surface: #171030;
    --surface-2: #1f173b;
    --surface-hover: #251c45;
    --border: rgba(244, 243, 255, 0.08);
    --border-strong: rgba(244, 243, 255, 0.16);
    --text: #f4f3ff;
    --text-2: #cdc6e8;
    --muted: #9b92bf;
    --grid: #251c45;
    --axis: #3b3061;
    --accent: #ccafff;
  --mask: rgba(204, 175, 255, 0.24);
    --mask: rgba(204, 175, 255, 0.24);
    --accent-ink: #1f103b;
    --brand-soft: #ffd8be;
    --logo-a: #ccafff;
    --logo-b: #f4f3ff;
    --bar-grad: linear-gradient(90deg, #ffd8be, #ccafff);
    --tick-grad: linear-gradient(45deg, #ffd8be, #ccafff);
    --tick-ink: #1f103b;
    --sp-1a: #ffd8be; --sp-1b: #ccafff; --sp-2a: #ccafff; --sp-2b: #f4f3ff;
    --income: #199e70;
    --expense: #d95926;
    --balance: #ccafff;
    --good-text: #4fd69c;
    --bad-text: #ff8a80;
    --warn: #c98500;
    --toast-ok: #199e70;
    --stripe: #e0e1ff;
    /* Validada para daltonismo sobre la superficie oscura (#171030) */
    --s1: #8c74ff; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #3987e5; --s8: #e66767;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --app-bg: radial-gradient(circle at 0% 0%, #5b4a88 0, transparent 62%),
      radial-gradient(circle at 100% 100%, #1a007d 0, transparent 62%),
      radial-gradient(circle at 14% 100%, #03020f 0, transparent 50%),
      #160b2e;
    --sidebar-bg: rgba(11, 8, 25, 0.38);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0819;
  --surface: #171030;
  --surface-2: #1f173b;
  --surface-hover: #251c45;
  --border: rgba(244, 243, 255, 0.08);
  --border-strong: rgba(244, 243, 255, 0.16);
  --text: #f4f3ff;
  --text-2: #cdc6e8;
  --muted: #9b92bf;
  --grid: #251c45;
  --axis: #3b3061;
  --accent: #ccafff;
  --accent-ink: #1f103b;
  --brand-soft: #ffd8be;
  --logo-a: #ccafff;
  --logo-b: #f4f3ff;
  --bar-grad: linear-gradient(90deg, #ffd8be, #ccafff);
  --tick-grad: linear-gradient(45deg, #ffd8be, #ccafff);
  --tick-ink: #1f103b;
  --sp-1a: #ffd8be; --sp-1b: #ccafff; --sp-2a: #ccafff; --sp-2b: #f4f3ff;
  --income: #199e70;
  --expense: #d95926;
  --balance: #ccafff;
  --good-text: #4fd69c;
  --bad-text: #ff8a80;
  --warn: #c98500;
  --toast-ok: #199e70;
  --stripe: #e0e1ff;
  /* Validada para daltonismo sobre la superficie oscura (#171030) */
  --s1: #8c74ff; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #3987e5; --s8: #e66767;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --app-bg: radial-gradient(circle at 0% 0%, #5b4a88 0, transparent 62%),
    radial-gradient(circle at 100% 100%, #1a007d 0, transparent 62%),
    radial-gradient(circle at 14% 100%, #03020f 0, transparent 50%),
    #160b2e;
  --sidebar-bg: rgba(11, 8, 25, 0.38);
}

/* ==========================================================
   Daltonismo (Ajustes › Accesibilidad). theme.js pone data-vision en <html>;
   .vis-sw[data-vision] muestra los colores de cada opción en Ajustes aunque esté activa otra.
   Rojo y verde: protanopia, deuteranopia y sus formas leves · Azul y amarillo: tritanopia o tritanomalía ·
   Sin colores: acromatopsia o monocromatismo. Validadas con la simulación de Machado et al. (2009)
   ========================================================== */
.vis-sw[data-vision="normal"] {
  --income: #1baf7a; --expense: #eb6834; --balance: #4500fa;
  --good-text: #0f7a3d; --bad-text: #c0392b; --warn: #9a6700; --toast-ok: #1baf7a; --stripe: #361889;
  --s1: #5b3ff0; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #2a78d6; --s8: #e34948;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vis-sw[data-vision="normal"] {
    --income: #199e70; --expense: #d95926; --balance: #ccafff;
    --good-text: #4fd69c; --bad-text: #ff8a80; --warn: #c98500; --toast-ok: #199e70; --stripe: #e0e1ff;
    --s1: #8c74ff; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #3987e5; --s8: #e66767;
  }
}
:root[data-theme="dark"] .vis-sw[data-vision="normal"] {
  --income: #199e70; --expense: #d95926; --balance: #ccafff;
  --good-text: #4fd69c; --bad-text: #ff8a80; --warn: #c98500; --toast-ok: #199e70; --stripe: #e0e1ff;
  --s1: #8c74ff; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #3987e5; --s8: #e66767;
}
:root[data-vision="rv"], .vis-sw[data-vision="rv"] {
  --income: #5b3ff0; --expense: #e08600; --balance: #1f103b;
  --good-text: #4a2fd6; --bad-text: #9a4f00; --warn: #8f6200; --toast-ok: #a99cff; --stripe: #361889;
  --s1: #5b3ff0; --s2: #e08600; --s3: #c4c2ff; --s4: #8a4a12;
  --s5: #8f8cff; --s6: #f5c06a; --s7: #2f1fa0; --s8: #c25e00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-vision="rv"], :root:not([data-theme="light"]) .vis-sw[data-vision="rv"] {
    --income: #8c74ff; --expense: #f0a030; --balance: #f4f3ff;
    --good-text: #b39dff; --bad-text: #ffb347; --warn: #ffd38a; --toast-ok: #5b3ff0; --stripe: #e0e1ff;
    --s1: #8c74ff; --s2: #f0a030; --s3: #d6d4ff; --s4: #b5651d;
    --s5: #5f50e0; --s6: #ffd38a; --s7: #4a3ab8; --s8: #d97f2a;
  }
}
:root[data-theme="dark"][data-vision="rv"], :root[data-theme="dark"] .vis-sw[data-vision="rv"] {
  --income: #8c74ff; --expense: #f0a030; --balance: #f4f3ff;
  --good-text: #b39dff; --bad-text: #ffb347; --warn: #ffd38a; --toast-ok: #5b3ff0; --stripe: #e0e1ff;
  --s1: #8c74ff; --s2: #f0a030; --s3: #d6d4ff; --s4: #b5651d;
  --s5: #5f50e0; --s6: #ffd38a; --s7: #4a3ab8; --s8: #d97f2a;
}
:root[data-vision="tri"], .vis-sw[data-vision="tri"] {
  --income: #0f9488; --expense: #e34948; --balance: #4500fa;
  --good-text: #0b6b62; --bad-text: #c0392b; --warn: #c2185b; --toast-ok: #2bb3a8; --stripe: #361889;
  --s1: #5b3ff0; --s2: #e34948; --s3: #38b2a6; --s4: #8a1538;
  --s5: #f29bbd; --s6: #0b6b62; --s7: #b8b8ff; --s8: #c2185b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-vision="tri"], :root:not([data-theme="light"]) .vis-sw[data-vision="tri"] {
    --income: #2bb3a8; --expense: #ff6b6b; --balance: #ccafff;
    --good-text: #5fd3c6; --bad-text: #ff8a80; --warn: #f7a8c8; --toast-ok: #0f9488; --stripe: #e0e1ff;
    --s1: #8c74ff; --s2: #ff6b6b; --s3: #3cc4b6; --s4: #d9467a;
    --s5: #f7a8c8; --s6: #1a9488; --s7: #c9c7ff; --s8: #ff9a7a;
  }
}
:root[data-theme="dark"][data-vision="tri"], :root[data-theme="dark"] .vis-sw[data-vision="tri"] {
  --income: #2bb3a8; --expense: #ff6b6b; --balance: #ccafff;
  --good-text: #5fd3c6; --bad-text: #ff8a80; --warn: #f7a8c8; --toast-ok: #0f9488; --stripe: #e0e1ff;
  --s1: #8c74ff; --s2: #ff6b6b; --s3: #3cc4b6; --s4: #d9467a;
  --s5: #f7a8c8; --s6: #1a9488; --s7: #c9c7ff; --s8: #ff9a7a;
}
:root[data-vision="achro"], .vis-sw[data-vision="achro"] {
  --income: #361889; --expense: #a9a6fa; --balance: #1f103b;
  --good-text: #1f103b; --bad-text: #1f103b; --warn: #4b4170; --toast-ok: #b8b8ff; --stripe: #361889;
  --s1: #361889; --s2: #7e70ec; --s3: #d3d3fe; --s4: #5a37d1;
  --s5: #a9a6fa; --s6: #7e70ed; --s7: #d3d3ff; --s8: #5a37d2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-vision="achro"], :root:not([data-theme="light"]) .vis-sw[data-vision="achro"] {
    --income: #e0e1ff; --expense: #664fd8; --balance: #f4f3ff;
    --good-text: #f4f3ff; --bad-text: #f4f3ff; --warn: #cdc6e8; --toast-ok: #4934a3; --stripe: #e0e1ff;
    --s1: #e0e1ff; --s2: #8a81ef; --s3: #4934a3; --s4: #b3b2f9;
    --s5: #664fd8; --s6: #8a81f0; --s7: #4934a4; --s8: #b3b2fa;
  }
}
:root[data-theme="dark"][data-vision="achro"], :root[data-theme="dark"] .vis-sw[data-vision="achro"] {
  --income: #e0e1ff; --expense: #664fd8; --balance: #f4f3ff;
  --good-text: #f4f3ff; --bad-text: #f4f3ff; --warn: #cdc6e8; --toast-ok: #4934a3; --stripe: #e0e1ff;
  --s1: #e0e1ff; --s2: #8a81ef; --s3: #4934a3; --s4: #b3b2f9;
  --s5: #664fd8; --s6: #8a81f0; --s7: #4934a4; --s8: #b3b2fa;
}

/* ==========================================================
   Base
   ========================================================== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
/* Tamaño del texto (Ajustes › Accesibilidad, en cada dispositivo): las letras están en rem y crecen con la raíz.
   Parte del tamaño que tenga el navegador (16 px si no se cambió) */
:root { --text-scale: 1; }
:root[data-text="lg"] { --text-scale: 1.15; }
:root[data-text="xl"] { --text-scale: 1.3; }
html { font-size: calc(100% * var(--text-scale)); }
/* Con un diálogo abierto, la pantalla de atrás no se desplaza */
html:has(dialog[open]) { overflow: hidden; }
dialog { overscroll-behavior: contain; }
body {
  font-family: var(--font);
  background: var(--app-bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: .875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: 1.625rem; }
h2 { font-size: 1.0625rem; }
h3 { font-size: .875rem; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.chart svg { width: auto; height: auto; fill: initial; stroke: initial; stroke-width: initial; stroke-linecap: initial; stroke-linejoin: initial; }
.muted { color: var(--muted); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
em { font-style: normal; }

/* ==========================================================
   Layout
   ========================================================== */
.app { display: grid; grid-template-columns: calc(232px * var(--text-scale)) minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 28px;
  padding: 28px 16px;
  border-right: 1px solid var(--border);
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
/* Logo: los dos trazos (sólidos, porque es chico) + «Anthos Finance»; el símbolo mide 1,7 × la altura de las mayúsculas */
.brand-mark { display: inline-flex; }
.brand-sym { width: 27px; height: 22px; overflow: visible; }
.brand-sym path, .sym path { fill: none; stroke-width: 15; stroke-linecap: round; }
.brand-sym .a, .sym .a { stroke: var(--logo-a); }
.brand-sym .b, .sym .b { stroke: var(--logo-b); }
.sym { width: 22px; height: 18px; overflow: visible; }
.sym-sm { width: 20px; height: 16px; }
.sym-lg { width: 74px; height: 60px; }
.brand-name { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; white-space: nowrap; }
.brand-prod { font-weight: 300; color: var(--accent); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--text-2); font-weight: 500;
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--surface-hover); color: var(--text); }
.nav .nav-short { display: none; } /* en el celular, la barra de abajo usa el nombre corto */
.nav-more { display: none; } /* "Más": solo en el celular */
.nav-more[hidden] { display: none !important; }
.more-list { display: flex; flex-direction: column; gap: 4px; }
.more-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; color: var(--text); font-weight: 500; text-decoration: none; }
.more-item:hover, .more-item.active { background: var(--surface-2); }
.more-item svg { width: 20px; height: 20px; }
.nav a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); border: 1px solid var(--border); padding: 9px 11px; }

/* Ocupa todo el ancho disponible; solo en monitores muy anchos se limita y se centra */
.main { padding: 32px 40px 64px; min-width: 0; max-width: 1760px; width: 100%; margin-inline: auto; overflow-x: clip; }

.topbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
}
.topbar p { margin-top: 4px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.period { display: flex; align-items: center; gap: 8px; }
.period-nav {
  display: flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 3px;
}
.period-nav span { min-width: 120px; text-align: center; font-weight: 500; text-transform: capitalize; }

/* ==========================================================
   Controls
   ========================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; font-weight: 500;
  transition: transform .1s, background .15s, opacity .15s;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { opacity: .88; }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }
.btn-outline { background: var(--surface); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--surface-hover); }
.btn-danger { color: var(--danger); }
.btn-danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn-sm { height: 32px; padding: 0 14px; font-size: .8125rem; border-radius: 999px; }

.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: 9px; cursor: pointer; color: var(--text-2);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }

.segmented {
  display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px;
  border: 1px solid var(--border);
}
.segmented button {
  border: 0; background: transparent; padding: 6px 12px; border-radius: 999px;
  cursor: pointer; color: var(--text-2); font-weight: 500; font-size: .8125rem;
}
.segmented button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.segmented-lg { display: flex; }
.segmented-lg button { flex: 1; padding: 9px; font-size: .875rem; }
#txType button.active[data-type="income"] { color: var(--good-text); }
#txType button.active[data-type="expense"] { color: var(--bad-text); }

.input, .field input, .field select, .field textarea {
  width: 100%; height: 40px; padding: 0 12px;
  border-radius: 11px; border: 1px solid var(--border-strong);
  background: var(--surface); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { height: auto; padding: 10px 12px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: .75rem; font-weight: 500; color: var(--text-2); }
.field-amount input { height: 56px; font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.search { position: relative; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 16px; height: 16px; }
.search input { padding-left: 36px; min-width: 220px; }

/* ==========================================================
   Cards & dashboard
   ========================================================== */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  min-width: 0;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head p { font-size: .8125rem; }
.card-title { display: flex; flex-direction: column; gap: 2px; }

.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
.dash-row-1 { grid-template-columns: 1fr; margin-bottom: 16px; }
.dash-row-2 { grid-template-columns: 1fr 1.4fr; margin-bottom: 16px; }
.dash-row-3 { grid-template-columns: 1.4fr 1fr; }

.kpi { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; }
.kpi-label { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 500; font-size: .8125rem; }
.kpi-dot { width: 8px; height: 8px; border-radius: 50%; }
.kpi-value { font-family: var(--font-num); font-size: clamp(1.25rem, calc(1.9vw * var(--text-scale)), 1.75rem); overflow-wrap: anywhere; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.kpi-delta { font-size: .75rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; }
.kpi-delta .up, .kpi-delta .down { white-space: nowrap; }
.kpi-delta .up { color: var(--good-text); font-weight: 600; }
.kpi-delta .down { color: var(--bad-text); font-weight: 600; }
/* Pie de una tarjeta de indicadores: datos secundarios con presencia (A fin de mes, Al cierre, Ahorro) */
.kpi-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.kpi-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: .75rem; color: var(--text-2); }
.kpi-line b { font-size: .9375rem; font-weight: 600; color: var(--text); font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.kpi-line b.over { color: var(--bad-text); }
.kpi-line b.good { color: var(--good-text); }
.progress { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progress > div { height: 100%; border-radius: 99px; background: var(--bar-grad); transition: width .4s; }

.chart { width: 100%; height: 320px; }
.chart-sm { height: 280px; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .75rem; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend i.line { height: 2px; border-radius: 2px; width: 14px; }
/* Sin colores: gastos y categorías 6 a 8 con rayas a 50°, y el balance (o los gastos acumulados) en línea punteada */
:root[data-vision="achro"] .legend i.k-exp, .vis-sw[data-vision="achro"] .k-exp { background-image: repeating-linear-gradient(-50deg, transparent 0 3px, var(--stripe) 3px 4.5px); }
:root[data-vision="achro"] .k-cat { background-image: repeating-linear-gradient(-50deg, transparent 0 2px, color-mix(in srgb, var(--text) 60%, transparent) 2px 3.5px); }
/* Ícono de una categoría: fondo con su color y las iniciales en ese color. Con otra opción de visión, las iniciales
   se mezclan con el color del texto para que se lean aunque el color de la categoría sea muy claro u oscuro */
.cat-ic { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
:root[data-vision] .cat-ic { background: color-mix(in srgb, var(--c) 24%, transparent); color: color-mix(in srgb, var(--c) 45%, var(--text)); }
/* Editor de categoría: nota de la opción de visión, aviso de parecido y volver al color de la opción */
.cat-color-note { font-size: .75rem; margin: 8px 0 0; }
.cat-warn { display: flex; gap: 8px; align-items: flex-start; font-size: .8125rem; color: var(--text); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin: 8px 0 0; }
.cat-warn svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cat-warn small { color: var(--muted); font-size: inherit; }
.cat-reset { border: 0; background: none; padding: 0; margin-top: 8px; cursor: pointer; color: var(--accent); font: inherit; font-size: .8125rem; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; align-self: flex-start; }
:root[data-vision="achro"] .legend i.k-dash { background: none !important; height: 0; border-radius: 0; border-top: 2px dashed var(--balance); }
:root[data-vision="achro"] .legend i.k-dash[style*="expense"] { border-top-color: var(--expense); }

/* Lista de movimientos */
.tx-list { display: flex; flex-direction: column; }
.tx-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px; margin: 0 -8px;
  border-radius: 12px; cursor: pointer;
}
.tx-item:hover { background: var(--surface-hover); }
.tx-icon {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  font-weight: 600; font-size: .8125rem; flex-shrink: 0;
}
.tx-main { flex: 1; min-width: 0; }
.tx-main strong { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-main small { color: var(--muted); font-size: .75rem; }
.tx-amount { font-weight: 600; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.pos { color: var(--good-text); }
.neg { color: var(--text); }

/* Tabla */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .spacer { flex: 1; }
.table-wrap { overflow-x: auto; margin: 0 -22px -22px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 22px; white-space: nowrap; }
th {
  font-size: .75rem; font-weight: 500; color: var(--muted);
  border-bottom: 1px solid var(--border); cursor: pointer; user-select: none;
}
th.sorted { color: var(--text); }
th .arrow { opacity: .6; margin-left: 4px; }
td { border-bottom: 1px solid var(--border); }
tbody tr { cursor: pointer; transition: background .1s; }
tbody tr:hover { background: var(--surface-hover); }
tbody tr:last-child td { border-bottom: 0; }
td.amount, th.amount { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
td.amount { font-weight: 600; }
td.desc { white-space: normal; min-width: 180px; }
td.desc small { display: block; color: var(--muted); font-size: .75rem; }
tfoot td { font-weight: 600; border-top: 1px solid var(--border-strong); border-bottom: 0; }

/* Selección de movimientos: casilla, fila marcada y barra con la suma */
th.check, td.check { width: 1%; padding-right: 0; }
.tx-check {
  width: 20px; height: 20px; border-radius: 6px; padding: 0; display: grid; place-items: center;
  border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--accent-ink); cursor: pointer;
  vertical-align: middle; transition: background .1s, border-color .1s;
}
.tx-check svg { width: 14px; height: 14px; stroke-width: 3; opacity: 0; }
.tx-check:hover { border-color: var(--muted); }
.tx-check[aria-checked="true"], .tx-check[aria-checked="mixed"] { background: var(--accent); border-color: var(--accent); }
.tx-check[aria-checked="true"] svg { opacity: 1; }
.tx-check[aria-checked="mixed"]::after { content: ''; width: 10px; height: 2px; border-radius: 2px; background: var(--accent-ink); grid-area: 1 / 1; }
.tx-check[aria-checked="mixed"] svg { display: none; }
tbody tr.selected, tbody tr.selected:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
tr.projected td.check { opacity: 1; }
.selbar {
  position: sticky; bottom: 16px; z-index: 5; margin: 22px -6px -6px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  padding: 10px 12px 10px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
.selbar[hidden] { display: none; }
.selbar-info { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.selbar-count { font-size: .8125rem; color: var(--muted); }
.selbar-sum { font-size: 1.125rem; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.selbar-note { font-size: .75rem; }
.selbar-actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.selbar-actions [hidden] { display: none; }
.selbar .btn:disabled { opacity: .45; pointer-events: none; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 99px; font-size: .75rem; font-weight: 500;
  background: var(--surface-2); color: var(--text-2);
}
.pill i { width: 8px; height: 8px; border-radius: 50%; }
.tag { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; vertical-align: 1px; font-size: .6875rem; color: var(--muted); border: 1px solid var(--border-strong); padding: 0 7px; line-height: 18px; border-radius: 99px; margin: 2px 0 2px 6px; }

/* Resumen de categorías (gastos) */
.cat-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, transform .15s; box-shadow: var(--shadow);
}
.cat-card:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.cat-card.active { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.cat-card.dim { opacity: .45; }
.cat-card-top { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text-2); font-size: .8125rem; }
.cat-card-top i { width: 8px; height: 8px; border-radius: 50%; }
.cat-card-top em { margin-left: auto; color: var(--muted); font-size: .75rem; }
.cat-card-value { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }
.cat-card .progress { height: 4px; }
.cat-card small { font-size: .6875rem; color: var(--muted); }
.over { color: var(--bad-text) !important; font-weight: 600; }

/* Categorías */
.cat-columns { grid-template-columns: 1fr 1fr; }
/* Dentro de Ajustes, las dos columnas de categorías se apilan si la sección es angosta */
.aj-content { container: ajc / inline-size; }
@container ajc (max-width: 36rem) { .cat-columns { grid-template-columns: 1fr; } }
/* Bloques seguidos (Fijos y mensuales, Cuentas): el mismo aire que entre las demás filas */
.cat-columns + .cat-columns, .cat-columns + .card { margin-top: 16px; }
.cat-row { display: flex; align-items: center; gap: 12px; padding: 12px 8px; margin: 0 -8px; border-radius: 12px; cursor: pointer; }
.cat-row:hover { background: var(--surface-hover); }
.cat-row .tx-main small { display: block; }

/* Selector de color */
.cpick { display: flex; flex-direction: column; gap: 12px; }
.cpick-sv, .cpick-hue { position: relative; cursor: crosshair; touch-action: none; outline: none; }
.cpick-sv { height: 150px; border-radius: var(--radius-sm); }
.cpick-hue {
  height: 14px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
}
.cpick-knob {
  position: absolute; width: 18px; height: 18px; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 4px rgba(0, 0, 0, .4);
}
.cpick-hue .cpick-knob { top: 50%; }
.cpick-sv:focus-visible, .cpick-hue:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.cpick-row { display: flex; align-items: center; gap: 10px; }
.cpick-preview { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.cpick-hex { max-width: 140px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }

/* Ajustes */
.settings { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
/* Ajustes: menú de secciones (a la izquierda en la computadora; pantalla propia en el celular) */
.aj { display: grid; grid-template-columns: min(calc(300px * var(--text-scale)), 42%) minmax(0, 1fr); gap: 16px; align-items: start; }
.aj-menu { padding: 8px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.aj-item {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px;
  color: inherit; text-decoration: none;
}
.aj-item:hover { background: var(--surface-hover); }
.aj-item.active { background: var(--surface-2); }
.aj-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aj-item-text strong { font-size: .875rem; font-weight: 600; }
.aj-item-text small { font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-chevron { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: none; }
.aj-content { max-width: none; }
.aj-back { display: none; }
/* Si el espacio no alcanza para menú y sección lado a lado (por ejemplo, con el texto muy grande en una
   pantalla mediana), Ajustes funciona como en el celular: primero el menú y después la sección elegida */
.aj-wrap { container: ajustes / inline-size; }
@container ajustes (max-width: 36rem) {
  .aj { grid-template-columns: 1fr; }
  .aj-menu { position: static; }
  .aj-chevron { display: block; }
  .aj-item.active { background: none; }
  .aj--home .aj-content, .aj:not(.aj--home) .aj-menu { display: none; }
  .aj-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: -4px 0 -4px -6px; padding: 6px 8px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-size: .875rem; font-weight: 500; }
  .aj-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}
/* Encabezado de cada tarjeta de Ajustes */
.set-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.set-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-2);
}
.set-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.set-title { flex: 1; min-width: 0; }
.set-title h2 { margin: 0; }
.set-title p { font-size: .8125rem; margin-top: 2px; }
.set-head > .btn { flex-shrink: 0; }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.danger-zone .set-icon { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-row:first-of-type { padding-top: 0; }
.setting-row p { font-size: .8125rem; }
.setting-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.setting-row > .btn, .setting-row > .cselect { flex-shrink: 0; }
.setting-row .input { width: auto; min-width: 160px; }
/* Ajuste con control de ancho completo debajo del título (Accesibilidad) */
.setting-col { display: flex; flex-direction: column; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.setting-col:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-col:first-of-type { padding-top: 0; }
.setting-col p { font-size: .8125rem; }
/* Si con el texto grande las opciones no entran en una fila, se apilan una debajo de la otra */
.setting-col { container-type: inline-size; }
@container (max-width: 18rem) {
  .setting-col .segmented-lg { flex-direction: column; border-radius: 18px; }
  .setting-col .segmented-lg button { border-radius: 14px; justify-content: flex-start; text-align: left; padding: 10px 14px; }
}
/* Daltonismo: una opción por fila, con los colores de ingresos, gastos y balance de esa opción */
.vis-list { display: flex; flex-direction: column; gap: 8px; }
#sText button { display: inline-flex; align-items: baseline; justify-content: center; gap: 6px; }
.size-a { font-weight: 600; line-height: 1; }
.vis-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.vis-opt:hover { background: var(--surface-hover); }
.vis-opt[aria-checked="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.vis-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; display: grid; place-items: center; }
.vis-opt[aria-checked="true"] .vis-radio { border-color: var(--accent); }
.vis-opt[aria-checked="true"] .vis-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.vis-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vis-txt strong { font-size: .875rem; font-weight: 600; }
.vis-txt small { font-size: .75rem; line-height: 1.4; }
.vis-sw { display: flex; gap: 3px; flex: none; padding-right: 2px; }
.vis-sw i { width: 13px; height: 22px; border-radius: 99px; display: block; transform: rotate(40deg); }
#sInstallBox .setting-row { padding-top: 14px; }
.setting-row:has(+ #sInstallBox:empty) { border-bottom: 0; padding-bottom: 0; }

/* Vacío */
.empty { text-align: center; padding: 56px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-icon { width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); display: grid; place-items: center; color: var(--accent); margin-bottom: 6px; }
.empty-icon svg { width: 26px; height: 26px; }
.empty .actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.empty-inline { padding: 32px 0; text-align: center; color: var(--muted); }

/* ==========================================================
   Dialog
   ========================================================== */
.dialog {
  border: 0; padding: 0; border-radius: 22px; width: min(520px, calc(100vw - 32px));
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.dialog-sm { width: min(420px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(10, 10, 10, 0.35); backdrop-filter: blur(4px); }
.dialog[open] { animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.dialog-body { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
#planField:not([hidden]) { display: flex; flex-direction: column; gap: 16px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; }
.dialog-foot { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.dialog-foot .spacer { flex: 1; }

/* Toast */
.toast {
  /* Es un popover: así queda por encima de un diálogo abierto (si no, un aviso de error quedaba tapado) */
  position: fixed; inset: auto; margin: 0; border: 0; overflow: visible;
  bottom: 24px; left: 50%; transform: translate(-50%, 20px);
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 14px; box-shadow: var(--shadow-lg);
  font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .4s cubic-bezier(.34, 1.56, .64, 1); z-index: 100;
}
.tip {
  position: fixed; inset: auto; margin: 0; z-index: 300; max-width: 260px; padding: 6px 10px; border: 0; border-radius: 10px;
  background: var(--text); color: var(--bg); font-size: .75rem; line-height: 1.35; box-shadow: var(--shadow-lg);
  pointer-events: none; opacity: 0; transition: opacity .12s;
}
.tip.show { opacity: 1; }
.toast svg { width: 16px; height: 16px; stroke: var(--toast-ok); stroke-width: 2.4; }
.toast.show svg path { stroke-dasharray: 24; animation: tick-draw .35s .12s ease-out both; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

#view { animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }

/* ==========================================================
   Responsive
   ========================================================== */
/* Las columnas del contenido dependen del ancho de la vista medido en rem: con el texto grande se pasan
   a menos columnas antes. 49,25rem es el ancho que queda en una pantalla de 1100 px con el texto normal */
#view { container: view / inline-size; }
@container view (max-width: 49.25rem) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-row-2, .dash-row-3, .cat-columns { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto; z-index: 50;
    flex-direction: row; padding: 8px; gap: 0; border-right: 0; border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px);
  }
  .brand { display: none; }
  .nav { flex-direction: row; flex: 1; justify-content: space-around; }
  .nav a { flex-direction: column; gap: 2px; font-size: .6875rem; padding: 6px 8px; }
  .nav a.active { padding: 5px 7px; }
  .nav .nav-long { display: none; }
  .nav .nav-short { display: inline; }
  .aj { grid-template-columns: 1fr; }
  .aj-menu { position: static; }
  .aj-chevron { display: block; }
  .aj-item.active { background: none; }
  .aj--home .aj-content, .aj:not(.aj--home) .aj-menu { display: none; }
  .aj-back {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: -4px 0 -4px -6px;
    padding: 6px 8px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-size: .875rem; font-weight: 500;
  }
  .aj-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .set-head { flex-wrap: wrap; }
  .set-head .set-title { flex-basis: calc(100% - 48px); }
  .set-head > .btn { margin-left: 48px; }
  .main { padding: 20px 16px 110px; }
  h1 { font-size: 1.375rem; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar-actions { width: 100%; }
  .period { flex-wrap: wrap; }
  #addBtn { position: fixed; right: 16px; bottom: 84px; z-index: 40; height: 52px; border-radius: 16px; box-shadow: var(--shadow-lg); }
  .kpi-value { font-size: 1.375rem; }
  .search input { min-width: 0; }
  .search { flex: 1; }
  .grid-2 { grid-template-columns: 1fr; }
  .table-wrap { margin: 0 -16px -16px; }
  .card { padding: 16px; }
  th, td { padding: 10px 16px; }
}
@media (max-width: 420px) {
  .period-nav span { min-width: 96px; }
}

/* ==========================================================
   Componentes propios: desplegable, calendario, selector de mes
   ========================================================== */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cselect { position: relative; min-width: 0; }
.cfield {
  width: 100%; height: 40px; display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 12px; border-radius: 11px; border: 1px solid var(--border-strong);
  background: var(--surface); cursor: pointer; text-align: left; font-weight: 500;
  transition: border-color .15s, box-shadow .15s;
}
.cfield:hover { border-color: var(--text-2); }
.cfield:focus-visible, .cfield.open { outline: none; border-color: var(--text-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
.cfield-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfield > svg { width: 16px; height: 16px; color: var(--muted); }
.cfield > svg:last-child { transition: transform .15s; }
.cfield.open > svg:last-child { transform: rotate(180deg); }
.cfield-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.toolbar .cselect { min-width: 170px; }

.pop {
  position: fixed; inset: auto; margin: 0;
  padding: 6px; border: 1px solid var(--border-strong); border-radius: 14px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
  max-height: min(340px, calc(100vh - 16px)); overflow: auto;
  font-size: .875rem;
}
.pop:popover-open { animation: popIn .14s ease-out; }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

.copt {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px;
  cursor: pointer; color: var(--text-2); white-space: nowrap;
}
.copt span { flex: 1; }
.copt i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.copt svg { width: 16px; height: 16px; opacity: 0; color: var(--text); }
.copt.active { background: var(--surface-hover); color: var(--text); }
.copt.selected { color: var(--text); font-weight: 500; }
.copt.selected svg { opacity: 1; }

.cal-pop { padding: 12px; width: calc(296px * var(--text-scale)); max-width: calc(100vw - 24px); max-height: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head strong { font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-week span { text-align: center; font-size: .6875rem; font-weight: 500; color: var(--muted); padding: 4px 0; }
.cal-day {
  height: 36px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500;
}
.cal-day:hover { background: var(--surface-hover); }
.cal-day:focus-visible { outline: 2px solid var(--text-2); outline-offset: -2px; }
.cal-day.out { color: var(--muted); font-weight: 400; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.cal-day.selected { background: var(--accent); color: var(--accent-ink); }
.cal-day:disabled { opacity: .35; cursor: not-allowed; background: transparent; }
.cal-foot { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.month-pop { width: calc(260px * var(--text-scale)); max-width: calc(100vw - 24px); }
.month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

/* Monto + moneda */
.amount-row { position: relative; display: flex; align-items: center; gap: 8px; }
.amount-row input { flex: 1; padding-left: 38px !important; min-width: 0; }
.amount-row.usd input { padding-left: 66px !important; }
.amount-prefix { position: absolute; left: 14px; font-size: 1.25rem; font-weight: 600; color: var(--muted); pointer-events: none; }
.amount-row .segmented { flex-shrink: 0; }
.amount-row .segmented button { padding: 10px 12px; }
.fx-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 14px;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border);
}
.fx-box[hidden] { display: none; }
.fx-main { display: flex; flex-direction: column; flex: 1; min-width: 150px; }
.fx-main strong { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.fx-rate { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--text-2); }
.fx-rate-input { display: inline-flex; align-items: center; gap: 2px; }
.fx-rate input {
  width: 96px; height: 32px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--surface); outline: none; font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.fx-rate input:focus { border-color: var(--text-2); }
.fx-box > small { width: 100%; font-size: .6875rem; }

.rec-banner {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--balance) 10%, transparent); color: var(--text-2); font-size: .8125rem;
}
.rec-banner[hidden] { display: none; }
.link-hint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -6px;
  padding: 8px 8px 8px 12px; border-radius: 12px; font-size: .8125rem; color: var(--text-2);
  border: 1px dashed color-mix(in srgb, var(--balance) 45%, transparent);
}
.link-hint svg { width: 16px; height: 16px; color: var(--balance); }
.link-hint span { flex: 1 1 180px; }
.link-hint b { color: var(--text); }
.rec-banner a { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rec-banner svg { color: var(--balance); width: 16px; height: 16px; }
.rec-history { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; }
.rec-history:empty { display: none; }
.rec-history h3 { font-size: .75rem; font-weight: 500; color: var(--text-2); }
.rec-history ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rec-history li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.rec-history li b { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.rec-history li.current { box-shadow: inset 0 0 0 1px var(--border-strong); }

.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: var(--danger); color: #fff; opacity: .9; }
/* Tres o más opciones: una debajo de la otra, a todo el ancho, con la principal arriba y "Cancelar" al final */
.dialog-foot.stack { flex-direction: column-reverse; align-items: stretch; flex-wrap: nowrap; }
.dialog-foot.stack .spacer { display: none; }
.dialog-foot.stack .btn { justify-content: center; width: 100%; }
.dialog-body > p { line-height: 1.55; }

/* Barra lateral: cotización y estado */
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.rate-chip {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; text-align: left;
  padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer;
}
.rate-chip:hover { border-color: var(--border-strong); }
.rate-chip-label { font-size: .75rem; color: var(--text-2); font-weight: 500; }
.rate-chip strong { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: .9375rem; }
.rate-chip small { grid-column: 1 / -1; font-size: .6875rem; }
.rate-chip.stale small { color: var(--bad-text); }
.rate-chip.refreshing strong { opacity: .4; }
.sync { font-size: .6875rem; color: var(--muted); padding: 0 12px; display: flex; align-items: center; gap: 6px; }
.sync::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.sync.ok::before { background: var(--income); }
.sync.saving::before { background: var(--warn); }
.sync.error::before { background: var(--danger); }

.cur-note { display: block; font-size: .6875rem; color: var(--muted); font-weight: 400; }
.tag-usd { color: var(--balance); border-color: color-mix(in srgb, var(--balance) 40%, transparent); }
.badge { font-size: .6875rem; font-weight: 500; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.loading { padding: 80px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--muted); }
.loading .sym { width: 44px; height: 36px; }

@media (max-width: 820px) {
  .sidebar-foot { margin: 0; flex-direction: row; }
  .rate-chip, .sync { display: none; }
  .toolbar .cselect { min-width: 0; flex: 1 1 140px; }
  .nav a { padding: 6px 4px; }
}

/* Cotización manual, cuotas y programados */
.fx-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .75rem; font-weight: 500; color: var(--text-2); }
.segmented-sm button { padding: 4px 10px; font-size: .75rem; }
.fx-rate input[readonly] { background: transparent; border-color: transparent; color: var(--text-2); }
.amount-hint { margin: -8px 0 0; font-size: .8125rem; color: var(--text-2); }
.amount-hint b { color: var(--text); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
tr.projected td, .tx-item.projected { opacity: .62; }
tr.projected td.desc { font-style: normal; }
.tag-proj { color: var(--balance); border-style: dashed; }
.tag-cuota { color: var(--text-2); }
.tag-over { color: var(--bad-text); border-color: color-mix(in srgb, var(--bad-text) 40%, transparent); }
.cur-note.over { color: var(--bad-text); }

/* Para reservar (Resumen) */
.reserve { margin-bottom: 16px; }
.reserve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* Si los tres meses no entran lado a lado (texto grande en una pantalla mediana), una fila por mes como en el celular */
.reserve { container-type: inline-size; }
@container (max-width: 34rem) {
  .reserve-grid { grid-template-columns: 1fr; gap: 8px; }
  .reserve-month { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; }
  .reserve-month strong { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 1.0625rem; }
  .reserve-month .reserve-label, .reserve-month small { grid-column: 1; }
}
.reserve-month {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2);
  transition: border-color .15s;
}
.reserve-month:hover { border-color: var(--border-strong); }
.reserve-label { font-size: .75rem; font-weight: 500; color: var(--text-2); }
.reserve-month strong { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.reserve-month small { font-size: .75rem; }
/* Cuentas: saldos, extracto y lo que viene */
.kpis-2 { grid-template-columns: repeat(2, 1fr); }
.kpi-link { color: inherit; text-decoration: none; transition: border-color .15s; }
.kpi-link:hover { border-color: var(--border-strong); }
.card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.acc-row { color: inherit; text-decoration: none; }
.cat-row.nested { padding-left: 44px; }
.set-sublabel { margin: 14px 0 4px; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.back-link {
  display: inline-flex; align-items: center; gap: 4px; margin: -4px 0 12px -6px; padding: 6px 8px; border-radius: 10px;
  color: var(--text-2); font-size: .875rem; font-weight: 500; text-decoration: none;
}
.back-link:hover { background: var(--surface-hover); color: var(--text); }
.acc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.acc-head h2 { margin: 0; }
.acc-balance { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.acc-balance strong { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; }
.acc-actions { display: flex; gap: 8px; }
.acc-initial {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 12px 8px 0;
  border-top: 1px dashed var(--border-strong); font-size: .8125rem; color: var(--text-2);
}
.card-head > .btn svg { width: 16px; height: 16px; }
/* Montos en campos chicos (saldo de una cuenta, movimientos entre cuentas) */
.amount-row-sm .amount-prefix { font-size: .875rem; left: 12px; }
.amount-row-sm input { padding-left: 28px !important; }
.amount-row-sm.usd input { padding-left: 44px !important; }
.upcoming-month { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 4px; font-size: .75rem; font-weight: 600; color: var(--text-2); text-transform: capitalize; }
.upcoming-month:first-child { margin-top: 0; }
.upcoming-month span { font-weight: 500; color: var(--muted); text-transform: none; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.inst-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.inst-progress .progress { flex: 1; height: 4px; }
.inst-progress small { font-size: .6875rem; color: var(--muted); white-space: nowrap; }
.card-head .segmented button { padding: 4px 10px; font-size: .75rem; }
.hint-card { font-size: .8125rem; color: var(--muted); padding: 12px 14px; border-radius: 12px; background: var(--surface-2); margin-bottom: 16px; display: flex; gap: 10px; align-items: center; }
.hint-card svg { width: 16px; height: 16px; flex-shrink: 0; }
.hint-card a { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.dash-row-4 { grid-template-columns: 1fr 1fr; margin-top: 16px; }
@container view (max-width: 49.25rem) { .dash-row-4 { grid-template-columns: 1fr; } }


/* ==========================================================
   Acceso (login / configuración inicial)
   ========================================================== */
.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: var(--app-bg);
  background-attachment: fixed;
}
.auth-card {
  width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; padding: 32px 28px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 6px;
}
.auth-brand { padding: 0; margin-bottom: 18px; gap: 10px; }
.auth-brand .brand-sym { width: 32px; height: 26px; }
.auth-brand .brand-name { font-size: 1.375rem; }
.auth-card h1 { font-size: 1.375rem; }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.auth-form .field small { font-size: .75rem; }
.auth-submit { height: 44px; justify-content: center; margin-top: 4px; }
.auth-submit[disabled] { opacity: .6; cursor: progress; }
.auth-error {
  margin: 0; padding: 10px 12px; border-radius: 10px; font-size: .8125rem;
  background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--bad-text);
}
.auth-foot { font-size: .75rem; margin-top: 14px; text-align: center; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px !important; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.pw-toggle.on { color: var(--text); }
.pw-meter { height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: -6px; }
.pw-meter > div { height: 100%; width: 0; border-radius: 99px; transition: width .2s, background .2s; }
.pw-rules { font-size: .75rem; margin: -6px 0 0; }
#authCodeField input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }

.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 12px; }
.user-avatar {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--surface-2); color: var(--text-2); font-size: .6875rem; font-weight: 600; text-transform: uppercase;
}
.user-name { flex: 1; min-width: 0; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 820px) {
  .user-chip { padding: 0; }
  .user-avatar, .user-name { display: none; }
  #logoutBtn { width: 44px; height: 44px; }
}

/* Administración de usuarios */
.temp-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border-strong); }
.temp-box code { flex: 1; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.0625rem; letter-spacing: .04em; user-select: all; word-break: break-all; }
.user-row .tx-main small { display: block; }
.user-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.badge-admin { color: var(--balance); }
.badge-warn { color: var(--warn); }
.badge-off { color: var(--bad-text); }
.badge-ok { color: var(--good-text); }

/* Errores (administración) */
.kpis.kpis-3 { grid-template-columns: repeat(3, 1fr); }
.err-banner { color: var(--text-2); text-decoration: none; border: 1px solid var(--border-strong); }
.err-banner svg { color: var(--danger); }
.err-alert { margin-bottom: 16px; }
.err-alert .btn:disabled { opacity: .45; pointer-events: none; }
.err-warn { font-size: .8125rem; color: var(--bad-text); margin: 4px 0 8px; }
.err-row { align-items: flex-start; flex-wrap: wrap; row-gap: 8px; }
.err-row .tx-main { flex: 1 1 0; }
.err-row .user-actions { flex-basis: 100%; justify-content: flex-start; padding-left: 22px; }
.err-row .tx-main strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.err-row .tx-main strong .badge { margin-right: 4px; vertical-align: 1px; }
.err-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex-shrink: 0; margin-top: 6px; }
.err-dot.ok { background: var(--income); }
.err-item + .err-item { border-top: 1px solid var(--border); }
.err-detail { margin: 0 0 14px 22px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); font-size: .8125rem; color: var(--text-2); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.err-detail p { margin: 0; }
.err-detail b { color: var(--text); font-weight: 600; }
.err-events { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.err-tech { width: 100%; }
.err-tech summary { cursor: pointer; color: var(--text); font-weight: 500; }
.err-tech pre { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }
@media (max-width: 620px) {
  .kpis.kpis-3 { grid-template-columns: 1fr; }
  .err-detail { margin-left: 0; }
}
.wa-code { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.wa-code p { font-size: .8125rem; }
.wa-code .btn-primary { align-self: flex-start; }

/* Cuenta de administración: sin cotización ni estado de guardado */
body.admin-mode .rate-chip, body.admin-mode #syncStatus { display: none; }

/* ==========================================================
   Mobile
   ========================================================== */
@media (max-width: 820px) {
  :root { --nav-h: 54px; --safe-b: env(safe-area-inset-bottom, 0px); }
  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: none; }

  /* Barra de navegación fija abajo, respetando la zona segura del teléfono */
  .sidebar {
    position: fixed; inset: auto 0 0 0; height: auto; min-height: calc(var(--nav-h) + var(--safe-b));
    padding: 4px 6px calc(4px + var(--safe-b)); align-items: stretch;
  }
  .nav { gap: 0; }
  .nav a {
    flex: 1 1 auto; min-width: 0; justify-content: center; gap: 2px; padding: 4px 2px;
    border: 1px solid transparent; border-radius: 10px; font-size: .625rem; line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
  }
  .nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav a svg { width: 19px; height: 19px; }
  .nav a.active { padding: 4px 2px; box-shadow: none; }
  .sidebar-foot { display: none; }
  /* Barra de abajo: Resumen, Cuentas, Ingresos, Gastos y "Más" (Fijos y mensuales, Ajustes) */
  .nav a.nav-extra { display: none; }
  .nav-more {
    display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 4px 2px; border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer;
    color: var(--text-2); font: inherit; font-size: .625rem; font-weight: 500; line-height: 1.2; -webkit-tap-highlight-color: transparent;
  }
  .nav-more svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }
  .nav-more.active { color: var(--text); background: var(--surface); border-color: var(--border); }
  .acc-balance { margin-left: 0; align-items: flex-start; width: 100%; }
  .acc-actions { width: 100%; }

  .main { padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(var(--nav-h) + var(--safe-b) + 72px); }
  h1 { font-size: 1.5rem; }
  .topbar { gap: 14px; margin-bottom: 18px; }

  /* Período: selector y mes en una sola fila, a todo el ancho */
  #pageSubtitle { display: none; }
  .topbar { margin-bottom: 14px; gap: 10px; }
  .period { width: 100%; flex-wrap: nowrap; gap: 6px; }
  .period .segmented { flex: 0 0 auto; }
  .period .segmented button { padding: 6px 9px; }
  .period-nav { flex: 1 1 auto; justify-content: space-between; min-width: 0; }
  .period-nav span { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8125rem; }
  .period-nav .icon-btn { width: 30px; height: 30px; }
  /* Con texto grande, Mes/Año/Todo arriba y el mes completo abajo, en vez de cortarlo */
  :root[data-text] .period { flex-wrap: wrap; }
  :root[data-text] .period .segmented { flex: 1 1 100%; }
  :root[data-text] .period .segmented button { flex: 1; }
  :root[data-text] .period-nav { flex: 1 1 100%; }

  /* Botón de agregar: solo "+", redondo, fijo sobre la barra */
  #addBtn {
    position: fixed; right: 16px; bottom: calc(var(--nav-h) + var(--safe-b) + 12px); z-index: 45;
    width: 48px; height: 48px; padding: 0; border-radius: 50%; justify-content: center; box-shadow: var(--shadow-lg);
    transition: transform .2s ease, opacity .2s ease;
  }
  #addBtn svg { width: 22px; height: 22px; stroke-width: 2.4; }
  #addBtnLabel { display: none; }
  #addBtn.tucked { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }

  /* Indicadores en dos columnas */
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
  .kpi { padding: 14px; gap: 6px; }
  .kpi-label { font-size: .75rem; }
  .kpi-value { font-size: 1.1875rem; }
  .kpi-delta { font-size: .6875rem; flex-wrap: wrap; }
  .kpi-foot { padding-top: 8px; gap: 4px; }
  .kpi-line { font-size: .6875rem; flex-wrap: wrap; column-gap: 6px; }
  .kpi-line b { font-size: .875rem; }
  .grid { gap: 12px; }
  .dash-row-1, .dash-row-2, .dash-row-3 { margin-bottom: 12px; }
  .cat-columns + .cat-columns, .cat-columns + .card { margin-top: 12px; }
  .dash-row-4 { margin-top: 12px; }
  .chart { height: 260px; }
  .chart-sm { height: 240px; }
  .card-head { flex-wrap: wrap; }

  .cat-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* Texto muy grande en el celular: las tarjetas de a una por fila, así los montos entran enteros */
  :root[data-text="xl"] .kpis, :root[data-text="xl"] .cat-strip { grid-template-columns: 1fr; }
  .cat-card { padding: 12px; }
  .cat-card-value { font-size: 1rem; }

  /* Tablas de movimientos como lista de tarjetas */
  .table-wrap { overflow: visible; margin: 0; }
  .table-wrap table, .table-wrap tbody, .table-wrap tfoot { display: block; }
  .table-wrap thead { display: none; }
  .table-wrap tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding: 12px 8px; margin: 0 -8px; border-radius: 12px; border-bottom: 1px solid var(--border);
  }
  .table-wrap tbody tr:last-child { border-bottom: 0; }
  .table-wrap td { display: block; padding: 0; border: 0; white-space: normal; }
  .table-wrap td.desc { order: 1; flex: 1 1 0; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
  .table-wrap td.desc small { font-weight: 400; }
  .table-wrap td.amount { order: 2; flex-shrink: 0; white-space: nowrap; }
  .table-wrap tbody tr::before { content: ''; order: 3; flex-basis: 100%; height: 0; } /* salto de línea */
  .table-wrap td.date { order: 4; font-size: .75rem; }
  .table-wrap td.cat { order: 5; }
  .table-wrap td.cat .pill { font-size: .6875rem; padding: 1px 8px 1px 6px; }
  .table-wrap td.method { order: 6; font-size: .75rem; min-width: 0; }
  .table-wrap td.check { order: 0; width: auto; }
  .table-wrap tbody tr.selected { background: color-mix(in srgb, var(--accent) 7%, transparent); }
  .table-wrap tbody td.date { margin-left: 28px; } /* alineado con la descripción, debajo de la casilla */
  /* Con texto grande, el monto baja debajo de la descripción (así no la parte a mitad de palabra) */
  :root[data-text] .table-wrap td.desc { flex-basis: calc(100% - 28px); overflow-wrap: break-word; }
  :root[data-text] .table-wrap td.amount { flex-basis: 100%; margin-left: 28px; text-align: left; white-space: normal; }
  .selbar { bottom: calc(var(--nav-h) + var(--safe-b) + 12px); margin: 16px -8px 0; }
  .selbar-actions { width: 100%; }
  .selbar-actions .btn { flex: 1; justify-content: center; height: 40px; }
  .table-wrap tfoot tr { border-bottom: 0; padding: 10px 0 0; margin: 0; }
  .table-wrap tfoot tr + tr { padding-top: 4px; }
  .table-wrap tfoot td { flex: 1; font-size: .8125rem; }
  .table-wrap tfoot td.amount { flex: 0 0 auto; }
  .toolbar { gap: 8px; }
  .toolbar .spacer { display: none; }

  /* Ajustes: el texto largo baja de línea y el botón queda debajo si no entra */
  .setting-row { flex-wrap: wrap; gap: 10px 16px; }
  .setting-row > div:first-child { flex: 1 1 200px; }
  .setting-row .input, .setting-row .cselect { min-width: 0; }

  /* Diálogos como hoja inferior */
  .dialog, .dialog-sm {
    width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0;
    max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
  }
  .dialog[open] { animation: sheet .22s ease-out; }
  .dialog-body { padding: 20px 16px calc(20px + var(--safe-b)); }
  .dialog-foot { flex-wrap: wrap; }
  .dialog-foot .btn { flex: 1 1 auto; justify-content: center; height: 44px; }
  .dialog-foot .spacer { display: none; }
  .field input, .field textarea, .input, .fx-rate input { font-size: 1rem; } /* evita el zoom automático en iPhone */
  .field-amount input { font-size: 1.5rem; }

  /* Para reservar: una fila por mes */
  .reserve { margin-bottom: 12px; }
  .reserve-grid { grid-template-columns: 1fr; gap: 8px; }
  .reserve-month { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; }
  .reserve-month strong { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 1.0625rem; }
  .reserve-month .reserve-label, .reserve-month small { grid-column: 1; }

  /* Usuarios (administración): acciones debajo de los datos */
  .user-row { flex-wrap: wrap; align-items: flex-start; }
  .user-row .tx-main { flex: 1 1 0; }
  .user-row .tx-main strong { white-space: normal; }
  .user-row .tx-main small { overflow-wrap: anywhere; }
  .user-actions { flex-basis: 100%; justify-content: flex-start; padding-left: 48px; }

  .toast { bottom: calc(var(--nav-h) + var(--safe-b) + 72px); max-width: calc(100vw - 32px); text-align: center; }
}
@keyframes sheet { from { transform: translateY(40px); opacity: .6; } }

/* ==========================================================
   Bienvenida: primeros pasos y recorrido guiado
   ========================================================== */
.onb { display: flex; flex-direction: column; gap: 10px; }
.onb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.onb-head h2 { font-size: .9375rem; }
.onb-head p { font-size: .75rem; }
.onb-close { margin: -6px -8px 0 0; }
.onb-close svg { width: 16px; height: 16px; }
.onb-bar { height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.onb-bar span { display: block; height: 100%; border-radius: 99px; background: var(--bar-grad); transition: width .3s; }
.onb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.onb-item { display: flex; align-items: center; gap: 4px; }
.onb-go {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; text-align: left;
  padding: 7px 8px; margin: 0 -8px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--text);
}
.onb-go:hover:not(:disabled) { background: var(--surface-hover); }
.onb-go:disabled { cursor: default; }
.onb-check {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); display: grid; place-items: center;
}
.onb-check svg { width: 12px; height: 12px; stroke-width: 3; }
.onb-item.done .onb-check { background: var(--tick-grad); border-color: transparent; color: var(--tick-ink); }
.onb-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.onb-text strong { font-size: .8125rem; font-weight: 500; line-height: 1.35; }
.onb-text small { font-size: .75rem; line-height: 1.35; }
.onb-item.done .onb-text strong { color: var(--muted); text-decoration: line-through; }
.onb-skip { flex-shrink: 0; border: 0; background: none; padding: 4px 6px; border-radius: 8px; font-size: .75rem; color: var(--muted); cursor: pointer; }
.onb-skip:hover { color: var(--text); background: var(--surface-hover); }

/* En la barra lateral: compacta, sin la descripción de cada paso */
.onb-side { padding: 14px; border-radius: 14px; gap: 8px; }
/* En el Resumen: arriba de todo, con los pasos en columnas en pantallas anchas */
.onb-dash { margin-bottom: 16px; }
@media (min-width: 821px) { .onb-dash .onb-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 20px; } }
/* Dónde se ve: en la computadora con altura suficiente, en la barra lateral; si no, en el Resumen */
@media (min-width: 821px) and (min-height: 800px) { .onb-dash { display: none; } }
@media (max-width: 820px), (max-height: 799px) { .onb-slot { display: none; } }
/* Si Primeros pasos no entra en la barra lateral (pantalla baja o texto grande), app.js pone .onb-low
   y la lista pasa al Resumen. Por las dudas, la barra se desplaza en vez de cortarse */
:root.onb-low .onb-slot { display: none; }
:root.onb-low .onb-dash { display: block; }
@media (min-width: 821px) { .sidebar { overflow-y: auto; scrollbar-width: thin; } }

/* Recorrido: la pantalla se oscurece salvo el elemento que se explica */
.tour { position: fixed; inset: 0; z-index: 1000; }
/* En el tema oscuro, el fondo ya es oscuro: se oscurece más para que se note el foco */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tour { --tour-dim: rgba(0, 0, 0, .74); } }
:root[data-theme="dark"] .tour { --tour-dim: rgba(0, 0, 0, .74); }
.tour-block { position: absolute; inset: 0; }
.tour-spot {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 200vmax var(--tour-dim, rgba(0, 0, 0, .55)), 0 0 0 2px rgba(255, 255, 255, .5);
  transition: top .25s, left .25s, width .25s, height .25s;
}
.tour-pop {
  position: fixed; width: 380px; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-lg); transition: top .25s, left .25s; animation: tour-in .2s ease-out;
}
.tour-count { font-size: .75rem; font-weight: 500; }
.tour-count:empty { display: none; }
.tour-pop h2 { font-size: 1.0625rem; }
.tour-text { color: var(--text-2); line-height: 1.55; }
.tour-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tour-actions .spacer { flex: 1; }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Avisos: campanita y panel ---------- */
.bell, .privacy-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.bell[hidden] { display: none; }
.bell svg { width: 19px; height: 19px; }
.bell.has { color: var(--text); }
.bell-count {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--expense); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.bell-count[hidden] { display: none; }
.notify-dialog { width: min(400px, calc(100vw - 32px)); }
.notify-dialog .dialog-body { gap: 12px; padding: 18px 18px 14px; }
.notify-dialog .dialog-head h2 { font-size: 1.0625rem; }
.notify-dialog::backdrop { background: transparent; backdrop-filter: none; }
@media (min-width: 821px) {
  .notify-dialog { position: fixed; margin: 0; left: auto; max-height: min(640px, calc(100vh - 100px)); overflow-y: auto; border: 1px solid var(--border); }
  .notify-dialog[open] { animation: drop .16s ease-out; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.ntf-list { display: flex; flex-direction: column; gap: 8px; }
.ntf { position: relative; display: flex; gap: 12px; padding: 12px 36px 12px 12px; border-radius: 14px; background: var(--surface-2); }
.ntf-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--balance) 16%, transparent); color: var(--balance);
}
.ntf-bad .ntf-icon { background: color-mix(in srgb, var(--expense) 16%, transparent); color: var(--expense); }
.ntf-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ntf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ntf-main strong { font-size: .875rem; font-weight: 600; line-height: 1.35; }
.ntf-main small { font-size: .8125rem; color: var(--text-2); line-height: 1.45; }
.ntf-main b { color: var(--text); font-weight: 600; }
.ntf-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ntf-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; color: var(--muted); }
.ntf-x svg { width: 15px; height: 15px; }
.ntf-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 8px 26px; text-align: center; }
.ntf-empty span { font-size: 26px; }
@media (max-width: 820px) {
  .topbar { position: relative; }
  .topbar > div:first-child { padding-right: 100px; }
  .bell { position: absolute; top: 0; right: 0; }
  .privacy-btn { position: absolute; top: 0; right: 48px; }
  .ntf-actions .btn { flex: 1 1 auto; justify-content: center; height: 40px; }
  .notify-dialog::backdrop { background: rgba(10, 10, 10, 0.35); }
  .notify-dialog { width: 100%; max-height: 82dvh; }
}
.card-next { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.card-next .set-sublabel { margin: 0; }
.card-next #cardNextState { font-weight: 400; color: var(--muted); }
.card-next #cardNextHint:empty { display: none; }

/* Oferta de notificaciones (arriba del panel) y switch de Ajustes */
.ntf-promo { display: flex; gap: 12px; padding: 12px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--balance) 45%, transparent); }
.ntf-promo .ntf-actions .btn-ghost { color: var(--text-2); }
.switch {
  flex-shrink: 0; position: relative; width: 42px; height: 24px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--border-strong); transition: background .15s ease;
}
.switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
.switch[aria-checked="true"] { background: var(--income); }
.switch[aria-checked="true"] span { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ===================== Objetivos de ahorro ===================== */
.good { color: var(--good-text); }
.goal-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-2); font-size: 20px; line-height: 1;
}
.goal-icon svg { width: 20px; height: 20px; }
.goal-progress { height: 8px; margin-top: 10px; }
.goal-status { display: block; margin-top: 6px; font-size: .75rem; }
.goal-status.over { font-weight: 500; }

/* Resumen */
.goals-dash { margin-bottom: 16px; }
.goal-mini-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 24px; }
.goal-mini { display: flex; gap: 12px; align-items: flex-start; padding: 10px 8px; margin: 0 -8px; border-radius: 12px; color: inherit; text-decoration: none; }
.goal-mini:hover { background: var(--surface-hover); }
.goal-mini-main { flex: 1; min-width: 0; }
.goal-mini-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.goal-mini-top span { font-size: .8125rem; font-weight: 600; }
.goal-mini-top span .muted { font-weight: 400; }

/* Página de objetivos */
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.goal-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; cursor: pointer;
  display: flex; flex-direction: column; transition: background .1s, border-color .1s;
}
.goal-card:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.goal-card.done { border-color: color-mix(in srgb, var(--good-text) 45%, var(--border)); }
.goal-card-top { display: flex; gap: 12px; align-items: center; }
.goal-card-top .tx-main { display: flex; flex-direction: column; min-width: 0; }
.goal-card-top .tx-main h2 { margin: 0; }
.goal-pct { font-weight: 600; color: var(--text-2); }
.goal-amounts { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.goal-amounts strong { font-size: 1.25rem; }
.goal-amounts-lg strong { font-size: 1.875rem; letter-spacing: -.02em; }
.goal-save { align-self: flex-start; margin-top: 12px; }
.goal-head { margin-bottom: 16px; }
.goal-head.done .goal-progress > div { background: var(--good-text); }
.goal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.goal-actions .btn:disabled { opacity: .45; pointer-events: none; }
.goal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 16px; }
.goal-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.goal-stat > span { font-size: .75rem; }
.goal-stat strong { font-size: 1.125rem; }
.goal-stat small { font-size: .75rem; }
.goal-how { text-align: left; max-width: 460px; margin: 4px auto 8px; padding-left: 18px; color: var(--text-2); font-size: .875rem; display: grid; gap: 6px; }

/* Diálogo de objetivo */
.goal-name-row { display: grid; grid-template-columns: 76px 1fr; gap: 12px; }
.goal-emoji-field input { text-align: center; font-size: 20px; }
.goal-emojis { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 4px; }
.goal-emoji {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  font-size: 18px; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.goal-emoji:hover { background: var(--surface-hover); }
.goal-emoji.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
#goalMoveKind { margin-bottom: 4px; }
#goalMoveKind button { flex: 1; }
.goal-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.goal-quick:empty { display: none; }
.chip {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); cursor: pointer;
  border-radius: 99px; padding: 5px 12px; font-size: .8125rem; font-family: inherit;
}
.chip:hover { background: var(--surface-hover); color: var(--text); }

/* Control de saldos */
.check-list { display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow-y: auto; margin: 4px -4px 0; padding: 0 4px; }
.check-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.check-head { display: flex; flex-direction: column; gap: 2px; }
.check-head small { font-size: .75rem; }
.check-inputs { display: flex; gap: 8px; align-items: center; }
.check-inputs .amount-row { flex: 1; min-width: 0; }
.check-ok { flex-shrink: 0; }
.check-inputs .check-ok.active, .check-inputs .check-ok.active:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.check-diff { font-size: .75rem; color: var(--muted); }
.check-diff:empty { display: none; }
.check-diff.good { color: var(--good-text); }
.acc-check { flex-basis: 100%; margin: 4px 0 0; font-size: .8125rem; }
.adj-item.adj-off .tx-main strong { color: var(--bad-text); }

@media (max-width: 820px) {
  .goal-grid { grid-template-columns: 1fr; }
  .goal-amounts-lg strong { font-size: 1.625rem; }
  .goal-actions .btn { flex: 1 1 auto; justify-content: center; }
  .goal-stats { grid-template-columns: repeat(2, 1fr); }
  .goal-mini-list { grid-template-columns: 1fr; }
}
.goal-split { display: block; margin-top: 2px; font-size: .75rem; }
/* Encabezado con varias acciones: el título no se aplasta, las acciones bajan de línea */
.card-head:has(.card-actions) { flex-wrap: wrap; }
.card-head:has(.card-actions) .card-title { flex: 1 1 200px; }
/* Poppins es más ancha: los botones pueden pasar a otra línea en vez de salirse de la tarjeta */
.card-head:has(.card-actions) .card-actions { flex-shrink: 1; min-width: 0; max-width: 100%; }
.stale { color: var(--bad-text); }

/* "Pagado con": botones con los medios más usados; la lista completa aparece con "Más…" */
.field-wide { grid-column: 1 / -1; }
.pay-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-quick:empty { display: none; }
.pay-chip {
  display: inline-flex; align-items: baseline; gap: 6px; min-height: 38px; padding: 8px 14px; border-radius: 12px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: .875rem;
  font-weight: 500; cursor: pointer; transition: background .1s, border-color .1s;
}
.pay-chip small { font-size: .6875rem; color: var(--muted); font-weight: 400; }
.pay-chip:hover { background: var(--surface-hover); }
.pay-chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pay-chip.active small { color: inherit; opacity: .7; }
.pay-more { color: var(--text-2); border-style: dashed; }
#payField:has(.pay-quick:not(:empty)) .cselect { display: none; }
.pay-panel { margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 10px; }
.pay-panel[hidden] { display: none; }
.pay-search input { min-width: 0; width: 100%; }
#payGroups { display: flex; flex-direction: column; gap: 10px; }
.pay-group { display: flex; flex-direction: column; gap: 6px; }
.pay-group > small { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; }
.tx-item .tx-check { margin-right: 2px; }
.tx-item.selected { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.archived-tag { font-size: .6875rem; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 99px; padding: 0 7px; margin-left: 6px; font-weight: 400; }

/* "¿Se repite?": botones que ocupan todo el ancho; el monto (mismo / cambia) aparece debajo */
.repeat-seg { display: flex; }
.repeat-seg button { flex: 1; white-space: nowrap; }
#txAmountKind { margin-top: 8px; }
#txRepeatNote { display: block; margin-top: 6px; font-size: .75rem; }

.pay-note { display: block; margin-top: 6px; font-size: .75rem; }

.goal-auto { margin: 10px 0 0; font-size: .8125rem; }
#goalAutoBox { display: flex; flex-direction: column; gap: 12px; }
#goalAutoBox[hidden] { display: none; }

/* Cuentas archivadas: plegadas al final de la lista */
.archived-box { margin-top: 12px; border-top: 1px dashed var(--border-strong); padding-top: 10px; }
.archived-box summary { cursor: pointer; font-size: .8125rem; color: var(--muted); list-style: none; padding: 4px 0; }
.archived-box summary::-webkit-details-marker { display: none; }
.archived-box summary::before { content: '▸ '; }
.archived-box[open] summary::before { content: '▾ '; }
.archived-box .tx-list { opacity: .75; }

.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--text); text-decoration: underline; cursor: pointer; }
.pay-panel:first-child, #payQuick:has(.pay-more:only-child) + .pay-note + .pay-panel { margin-top: 0; }

/* ==========================================================
   Informe semanal y consultas con IA (reports.js)
   ========================================================== */
.report-page { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.report-main, .report-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.report-side { position: sticky; top: 16px; }
.report-side .report-form { flex-direction: column; align-items: stretch; }
.report-side .report-form textarea { min-height: 76px; }
.report-side .report-form .btn { justify-content: center; }
.report-side .report-foot { text-align: left; padding: 0 4px; }
/* Una sola columna: informe, preguntas, respuestas y la nota al final */
@media (max-width: 1000px) {
  .report-page { display: flex; flex-direction: column; }
  .report-main, .report-side { display: contents; }
  .report-main > .report-card:first-child { order: 1; }
  .report-ask { order: 2; }
  .report-answers { order: 3; }
  .report-foot { order: 4; }
  .report-side .report-foot { text-align: center; }
}
.report-kicker { display: flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.report-kicker svg, .report-dash-icon svg, .report-empty .empty-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.report-nav { margin-left: auto; display: flex; gap: 2px; }
.report-nav .icon-btn { width: 32px; height: 32px; }
.report-nav .icon-btn:disabled { opacity: .3; cursor: default; }
.report-title { font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 8px; }
.report-summary { font-size: .9375rem; line-height: 1.55; color: var(--text-2); margin: 0 0 14px; }
.report-card b { color: var(--text); font-weight: 600; }
.report-points { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.report-points li { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; line-height: 1.5; color: var(--text-2); }
.rp-icon { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--rp) 14%, transparent); color: var(--rp); margin-top: -1px; }
.rp-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-up { --rp: var(--expense); } .rp-down, .rp-good { --rp: var(--income); } .rp-alert { --rp: var(--warn); }
.rp-goal { --rp: var(--accent); } .rp-next { --rp: var(--balance); }
.report-tip { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.report-tip > svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--warn); stroke-width: 1.8; stroke-linecap: round; margin-top: 1px; }
.report-tip strong { font-size: .8125rem; }
.report-tip p { margin: 2px 0 0; font-size: .875rem; line-height: 1.5; color: var(--text-2); }
.report-skel { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.report-skel span { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--surface-2), var(--surface-hover), var(--surface-2)); background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; }
.report-skel span:nth-child(2) { width: 85%; } .report-skel span:nth-child(3) { width: 60%; }
@keyframes skel { to { background-position: -200% 0; } }
.report-ask .card-head { margin-bottom: 10px; }
.report-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.report-suggest .pay-chip { min-height: 34px; padding: 6px 12px; font-size: .8125rem; }
.report-suggest .pay-chip:disabled, .report-form :disabled { opacity: .5; cursor: default; }
.report-form { display: flex; gap: 8px; align-items: flex-end; }
.report-form textarea { flex: 1; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); resize: vertical; font-size: .9375rem; line-height: 1.4; }
.report-form textarea:focus { outline: none; border-color: var(--text-2); }
.report-form .btn { height: 44px; }
.report-error { color: var(--bad-text); font-size: .8125rem; margin: 8px 0 0; }
.report-thinking { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: .875rem; color: var(--text-2); }
.dots { display: inline-flex; gap: 4px; flex: none; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.report-answers { display: flex; flex-direction: column; gap: 16px; }
.report-q { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; padding-left: 10px; border-left: 3px solid var(--accent); font-size: .875rem; color: var(--text-2); font-style: italic; }
.report-q .link-btn { font-style: normal; font-size: .75rem; color: var(--muted); flex: none; }
.report-answer .report-title { font-size: 1.125rem; }
.report-answer > small { display: block; margin-top: 10px; }
.report-foot { font-size: .75rem; text-align: center; margin: 0; }
.report-dash { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: inherit; text-decoration: none; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.report-dash:hover { background: var(--surface-hover); }
.report-dash-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.report-dash-icon svg { width: 20px; height: 20px; }
.report-dash .tx-main strong { display: block; font-size: .9375rem; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.nav a.has-dot, #navMore.has-dot { position: relative; }
.nav a.has-dot::after, #navMore.has-dot::after { content: ''; position: absolute; top: 8px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (max-width: 640px) {
  .report-title { font-size: 1.1875rem; }
  .report-form { flex-direction: column; align-items: stretch; }
  .report-form .btn { justify-content: center; }
}

/* Botón flotante de IA y su panel (reports.js) */
.ai-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 44; display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 18px 0 14px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: .875rem; cursor: pointer;
  box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
  transition: padding .2s ease, gap .2s ease, transform .2s ease, bottom .2s ease;
}
.ai-fab[hidden] { display: none; }
.ai-fab svg { flex: none; width: 20px; height: 20px; fill: color-mix(in srgb, var(--accent) 25%, transparent); stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.ai-fab span { white-space: nowrap; overflow: hidden; max-width: 180px; transition: max-width .2s ease, opacity .2s ease; }
.ai-fab:hover { transform: translateY(-1px); }
.ai-fab.compact { padding: 0 13px; gap: 0; }
.ai-fab.compact span { max-width: 0; opacity: 0; }
.ai-title { display: flex; align-items: center; gap: 8px; }
.ai-title svg { width: 20px; height: 20px; fill: color-mix(in srgb, var(--accent) 25%, transparent); stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.ai-body { display: flex; flex-direction: column; gap: 14px; }
.ai-where { margin: -6px 0 0; font-size: .8125rem; color: var(--muted); }
.ai-answer { padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.ai-answer .report-title { font-size: 1.0625rem; }
.ai-answer .report-tip { background: var(--surface); }
.ai-body .report-suggest { margin-bottom: 0; }
.ai-body .report-form { flex-direction: column; align-items: stretch; }
.ai-body .report-form .btn { justify-content: center; }
.ai-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8125rem; padding-top: 4px; border-top: 1px solid var(--border); padding-top: 12px; }
/* En la computadora, el panel se abre a la derecha a toda la altura */
@media (min-width: 821px) {
  .ai-dialog { margin: 0 0 0 auto; width: min(460px, 100vw); height: 100dvh; max-height: 100dvh; border-radius: 22px 0 0 22px; overflow-y: auto; }
  .ai-dialog[open] { animation: slide-in .22s ease-out; }
  @keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }
}
@media (max-width: 820px) {
  .ai-fab { right: 16px; bottom: calc(var(--nav-h) + var(--safe-b) + 12px); height: 46px; }
  .ai-fab.above-add { bottom: calc(var(--nav-h) + var(--safe-b) + 72px); }
  .ai-dialog { max-height: 88dvh; }
}

/* ==========================================================
   Movimiento de marca (brand.js): Respira, festejo y microanimaciones
   ========================================================== */
/* Respira: anclados en la base, los trazos se estiran y se recogen a contratiempo */
.sym-breathe path { stroke-dasharray: 100 200; animation: breathe 2.8s ease-in-out infinite; }
.sym-breathe .b { animation-delay: -.77s; }
@keyframes breathe { 0%, 100% { stroke-dasharray: 100 200; } 50% { stroke-dasharray: 55 200; } }
.report-thinking .sym { flex: none; }

/* La barra de un objetivo crece desde cero con un resorte suave */
.goal-progress > div { animation: bar-grow .9s cubic-bezier(.34, 1.3, .64, 1) both; }
@keyframes bar-grow { from { width: 0; } }

/* Paso completado: el círculo con degradé aparece y el tilde se dibuja (solo la primera vez) */
.onb-item.just-done .onb-check { animation: check-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.onb-item.just-done .onb-check svg path { stroke-dasharray: 24; animation: tick-draw .35s .25s ease-out both; }
@keyframes check-pop { from { transform: scale(0); } }
@keyframes tick-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* Objetivo cumplido: el logo da su «Paso adelante» */
.celebrate {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s ease; cursor: pointer;
}
.celebrate.show { opacity: 1; }
.celebrate-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-lg);
  padding: 30px 40px; display: grid; justify-items: center; gap: 8px; text-align: center;
  transform: scale(.92); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.celebrate.show .celebrate-card { transform: scale(1); }
.celebrate-card .sym-lg { margin-bottom: 6px; }
.celebrate-card strong { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.celebrate-card span { color: var(--muted); font-size: .8125rem; }

/* Bienvenida del recorrido: el logo arriba del título */
.tour-sym { margin-bottom: 10px; }
.tour-sym .sym { width: 50px; height: 40px; }

/* Informe semanal: momento de marca con un degradé suave en la tarjeta */
.report-week, .report-dash {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)) 0%, var(--surface) 60%);
}

/* Entrada al abrir la app: fondo de la marca, el logo da el paso y aparece el nombre.
   Todo es CSS que anima solo con transform y opacity: el navegador lo mueve aparte del hilo
   donde la app carga los datos, y no se traba. Cada trazo es una píldora que se revela desde su base */
.splash {
  position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 26px;
  background: var(--app-bg); background-color: var(--bg);
  animation: splash-out .35s ease 2.3s forwards; transition: opacity .35s ease, visibility .35s;
}
.no-splash .splash { display: none; }
.splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
/* Mismas medidas que el símbolo (viewBox 76.87 × 62.29) a 104 px de ancho: trazo 15, largo 54, a 50° */
.splash-sym { --u: calc(104px / 76.87); position: relative; width: 104px; height: calc(62.29 * var(--u)); }
.splash-sym .st {
  position: absolute; width: calc(69 * var(--u)); height: calc(15 * var(--u));
  border-radius: 99px; overflow: hidden; transform: rotate(-50deg);
}
.splash-sym .st b { display: block; height: 100%; border-radius: inherit; animation: st-draw .6s cubic-bezier(.33, 1, .68, 1) both, st-in .12s linear both; }
.splash-sym .st-a { left: calc(-9.645 * var(--u)); top: calc(26.61 * var(--u)); }
.splash-sym .st-a b { background: linear-gradient(90deg, var(--sp-1a) 10.9%, var(--sp-1b) 89.1%); }
.splash-sym .st-b { left: calc(17.515 * var(--u)); top: calc(20.685 * var(--u)); animation: st-step .6s cubic-bezier(.34, 1.56, .64, 1) .95s both; }
.splash-sym .st-b b { background: linear-gradient(90deg, var(--sp-2a) 10.9%, var(--sp-2b) 89.1%); animation-delay: .25s; }
@keyframes st-draw { from { transform: translateX(calc(-100% + 15 * var(--u))); } }
@keyframes st-in { from { opacity: 0; } }
@keyframes st-step { from { transform: rotate(-50deg) translateX(calc(-22 * var(--u))); } to { transform: rotate(-50deg); } }
.splash-word { display: grid; justify-items: center; gap: 2px; animation: splash-word .5s ease 1.1s both; }
.splash-word b { font-size: 34px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.splash-word span { font-size: 12px; font-weight: 400; letter-spacing: .4em; margin-right: -.4em; color: var(--accent); }
@keyframes splash-word { from { opacity: 0; transform: translateY(8px); } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Animaciones reducidas (Ajustes › Accesibilidad, o el dispositivo en modo automático): theme.js pone .still en <html>.
   Todo queda en su estado final, sin moverse: avisos, barras, diálogos, el recorrido y la entrada de la marca */
.still .splash { display: none; }
.still *, .still *::before, .still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* ---------- Montos ocultos (ojito) ---------- */
.eye-btn {
  display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; margin: -4px -6px -4px auto;
  border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--text-2); padding: 0;
}
.eye-btn:hover { background: var(--surface-hover); color: var(--text); }
.eye-btn svg, .privacy-btn svg { width: 1.0625rem; height: 1.0625rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.privacy-btn svg { width: 19px; height: 19px; }
.eye-off, .private .eye-on { display: none; }
.private .eye-off { display: block; }
.private .privacy-btn { color: var(--accent); }
/* La cifra oculta: una barrita lavanda que acompaña el tamaño del texto */
.mask {
  display: inline-block; width: 3.4em; height: max(.55em, 6px); margin-left: .2em;
  border-radius: 99px; background: var(--mask); vertical-align: .12em;
}
.mask-sm { width: 1.9em; margin-left: 0; }
.amt-row { display: flex; align-items: center; gap: 6px; }
.amt-row .eye-btn { margin: 0; }
.goal-amounts .eye-btn { align-self: center; }