/* Cuentas Claras — estilo "banca privada": marfil, verde bosque y un toque de latón. */

:root {
  --bg: #F5F2EA;          /* marfil */
  --surface: #FFFDF8;     /* tarjetas */
  --surface-2: #F0ECE2;   /* campos, filas al pasar el mouse */
  --ink: #1B1F1C;         /* texto principal */
  --muted: #6E716A;       /* texto secundario */
  --line: #E4DED0;        /* bordes finos */
  --forest: #1F3A2F;      /* verde bosque (marca) */
  --forest-2: #2B4E40;
  --on-forest: #F3EEE2;   /* texto sobre verde */
  --brass: #A9844B;       /* latón: detalles */
  --brass-soft: #D9C29A;
  --danger: #9E2B25;
  --good: #2F6B4F;
  --warn: #B7791F;
  --shadow: 0 1px 2px rgba(27,31,28,.04), 0 8px 24px rgba(27,31,28,.06);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
/* Modo oscuro: lo decide la app (Ajustes → Apariencia) poniendo data-theme="dark" en <html>. */
:root[data-theme="dark"] {
  --bg: #0E110F;
  --surface: #161A17;
  --surface-2: #1D221E;
  --ink: #ECE7DC;
  --muted: #9A9E96;
  --line: #272D29;
  --forest: #1B2E25;
  --forest-2: #24402F;
  --on-forest: #EFE9DC;
  --brass: #C9A56A;
  --brass-soft: #8D7448;
  --danger: #E07A72;
  --good: #7FBF9A;
  --warn: #E0B05C;
  --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* que "hidden" gane siempre, aunque otra regla diga display */

/* La página NUNCA se mueve de lado (en el teléfono se podía arrastrar sin que hubiera nada).
   "clip" corta sin crear otra zona de desplazamiento, así lo que se queda pegado arriba sigue funcionando. */
html, body { overflow-x: hidden; overscroll-behavior-x: none; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
/* Sin zoom por doble toque (pellizcar para agrandar sigue funcionando) */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video { max-width: 100%; }
/* Las filas que se deslizan de lado (bancos, meses) no arrastran la página al llegar al final */
.chips, .mcards, .scan-list, .preview { overscroll-behavior-x: contain; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
}
main { max-width: 560px; margin: 0 auto; padding: 0 16px; }
button { -webkit-tap-highlight-color: transparent; }
.i { width: 20px; height: 20px; flex: none; display: block; }

/* ---------- Encabezado ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 560px; margin: 0 auto; padding: 18px 16px 6px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, var(--forest) 0 60%, var(--brass) 60% 100%);
}
.top h1 {
  margin: 0; font: 600 21px/1 var(--serif); letter-spacing: -.2px; color: var(--ink);
  white-space: nowrap;
}
/* Logotipo DimeDash: "Dime" en tinta, "Dash" en latón */
.wordmark { letter-spacing: -.4px; }
.wordmark span { color: var(--brass); font-style: italic; margin-left: 1px; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.btn-mail {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 500 14px var(--sans); cursor: pointer; white-space: nowrap;
}
.btn-mail .i { width: 18px; height: 18px; color: var(--forest); }
.btn-mail:hover { border-color: var(--brass-soft); }
.btn-mail.busy { opacity: .6; cursor: progress; }
[data-theme="dark"] .btn-mail .i { color: var(--brass); }

.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  border: 0; background: none; color: var(--ink); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn.round { border-radius: 50%; border: 1px solid var(--line); background: var(--surface); }

/* ---------- Inicio de sesión ---------- */
/* Mientras se revisa si hay sesión, o si no la hay, la app no se muestra */
body.auth-checking > :not(.signin):not(script):not(dialog):not(.toast):not(.splash),
body.signed-out > :not(.signin):not(script):not(dialog):not(.toast):not(.splash) { display: none !important; }
body.auth-checking::after {
  content: ""; position: fixed; left: 50%; top: 45%; width: 28px; height: 28px; margin-left: -14px;
  border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brass); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.signin {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 60%), var(--bg);
}
.signin-card {
  position: relative; overflow: hidden; width: min(440px, 100%);
  background: var(--forest); color: var(--on-forest); border-radius: 26px; padding: 30px 24px 22px;
  box-shadow: 0 20px 50px rgba(31,58,47,.25); display: grid; gap: 14px;
}
.signin-card::after { content: ""; position: absolute; inset: 8px; border-radius: 20px; border: 1px solid rgba(201,165,106,.28); pointer-events: none; }
.signin-card .w-title, .signin-card .w-sub { margin: 0; }
.signin-brand { display: flex; align-items: center; gap: 10px; font: 600 22px var(--serif); }
.signin-brand .wordmark span { color: var(--brass-soft); }
[data-theme="dark"] .signin-brand .wordmark span { color: var(--brass); }
.google-btn {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 52px; border-radius: 99px; border: 0; background: #fff; color: #1f1f1f;
  font: 600 16px var(--sans); cursor: pointer; margin-top: 6px;
}
.google-btn svg { width: 20px; height: 20px; }
.google-btn:hover { background: #f2f2f2; }
.google-btn:disabled { opacity: .6; cursor: progress; }
.signin-card .w-btn { position: relative; z-index: 1; }
.signin-note { position: relative; z-index: 1; margin: 4px 0 0; font-size: 12.5px; opacity: .75; text-align: center; }
.signin-note a { color: inherit; text-decoration: underline; margin-left: 4px; }

/* Bienvenida a la cuenta */
dialog.hello { width: min(380px, calc(100vw - 32px)); text-align: center; padding: 28px 24px 22px; }
@media (max-width: 600px) {
  dialog.hello { margin: auto; border-radius: 24px; }
  dialog.hello[open] { animation: pop .25s ease-out; }
}
.hello-avatar {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  background: var(--forest); color: var(--brass-soft); font: 600 28px var(--serif);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass) 30%, transparent);
}
[data-theme="dark"] .hello-avatar { color: var(--brass); }
dialog.hello h2 { font-size: 26px; }
dialog.hello p { color: var(--muted); margin: 8px 0 20px; }
.hello-go { width: 100%; height: 50px; }

/* ---------- "Por revisar" ---------- */
.review-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 10px 10px 14px; margin-bottom: 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--warn) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  font: 500 14px var(--sans); color: var(--ink);
}
.rb-text { display: inline-flex; align-items: center; gap: 8px; }
.rb-text .i { color: var(--warn); width: 18px; height: 18px; }
.rb-btn { height: 34px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--warn); color: #1A1610; font: 600 13px var(--sans); cursor: pointer; }
@media (min-width: 900px) { .review-banner { grid-area: review; } }
.tag-review {
  display: inline-block; vertical-align: 1px; margin-left: 6px; padding: 1px 8px; border-radius: 99px;
  font: 600 10.5px var(--sans); letter-spacing: .3px; text-transform: uppercase;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent);
}
.review-box {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; font-size: 14px;
  background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.review-box > b { display: flex; align-items: center; gap: 8px; color: var(--warn); }
.review-box > b .i { width: 18px; height: 18px; }
.review-box ul { margin: 8px 0 12px; padding-left: 18px; color: var(--ink); }
.review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.review-actions .btn { height: 42px; font-size: 14px; }
.gmail-open { width: 100%; margin-top: 14px; text-decoration: none; }
.gmail-open .i { color: #EA4335; }

.app-version { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--muted); }

/* "Mi cuenta" en Ajustes */
.account-row { display: flex; align-items: center; gap: 12px; }
.account-ico { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); border-color: transparent; }
.account-who { display: grid; min-width: 0; }
.account-who span { color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.sync-state { margin: 10px 0 12px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.sync-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.sync-state[data-state="saving"]::before { background: var(--brass); }
.sync-state[data-state="error"]::before, .sync-state[data-state="offline"]::before { background: var(--danger); }

/* ---------- Bienvenida (cuando todavía no hay gastos) ---------- */
body.is-empty .month-nav, body.is-empty .chips, body.is-empty .summary,
body.is-empty .cats-card, body.is-empty .list-card,
body.is-empty .add-bar, body.is-empty .add-top, body.is-empty .months-top { display: none; }
body.is-empty { padding-bottom: 24px; }
.welcome {
  position: relative; overflow: hidden; margin: 8px 0 14px;
  background: var(--forest); color: var(--on-forest); border-radius: 24px; padding: 26px 22px 22px;
  box-shadow: 0 12px 30px rgba(31,58,47,.18);
}
.welcome::after { content: ""; position: absolute; inset: 8px; border-radius: 18px; border: 1px solid rgba(201,165,106,.28); pointer-events: none; }
.w-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(243,238,226,.25); background: rgba(255,255,255,.06); color: var(--on-forest);
}
.w-close:hover { background: rgba(255,255,255,.14); }
.w-close .i { width: 18px; height: 18px; }
.welcome .eyebrow { padding-right: 48px; }
.w-title { font: 500 30px/1.15 var(--serif); letter-spacing: -.5px; margin: 10px 0 8px; }
.w-sub { margin: 0 0 20px; opacity: .85; font-size: 15px; }
.w-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.w-steps li { display: flex; gap: 14px; align-items: flex-start; }
.w-steps b { display: block; font-weight: 600; margin-bottom: 2px; }
.w-steps span:not(.w-ico) { font-size: 13.5px; opacity: .8; }
.w-ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(243,238,226,.1); color: var(--brass-soft); border: 1px solid rgba(201,165,106,.35);
}
[data-theme="dark"] .w-ico { color: var(--brass); }
.w-ico .i { width: 19px; height: 19px; }
.w-actions { display: grid; gap: 8px; position: relative; z-index: 1; }
.w-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 99px;
  border: 1px solid rgba(243,238,226,.25); background: transparent; color: var(--on-forest);
  font: 600 15px var(--sans); cursor: pointer;
}
.w-btn:hover { background: rgba(255,255,255,.06); }
.w-btn.primary { background: var(--brass); border-color: var(--brass); color: #1A1610; }
.w-btn.primary:hover { background: #D6B47C; }
.w-btn .i { width: 18px; height: 18px; }
@media (min-width: 600px) { .w-actions { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 900px) {
  body.is-empty main { display: block; max-width: 820px; }
  .welcome { padding: 40px 40px 34px; }
  .w-title { font-size: 40px; }
  .w-steps { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .w-steps li { flex-direction: column; gap: 10px; }
}

/* ---------- Recorrido guiado ---------- */
.tour { position: fixed; inset: 0; z-index: 50; touch-action: none; } /* tapa toda la pantalla: nada de atrás se puede tocar */
html.tour-lock, html.tour-lock body { overflow: hidden; overscroll-behavior: none; }
.tour-spot {
  position: fixed; border-radius: 18px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(14,17,15,.62), 0 0 0 2px var(--brass);
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease;
}
.tour-card {
  position: fixed; width: min(340px, calc(100vw - 24px)); padding: 16px 16px 12px;
  background: var(--surface); color: var(--ink); border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.35);
  transition: top .3s ease, left .3s ease;
}
.tour-count { font: 600 11px var(--sans); letter-spacing: 1.4px; color: var(--brass); }
.tour-title { margin: 4px 0 6px; font: 600 19px var(--serif); }
.tour-text { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-actions .btn { height: 40px; padding: 0 16px; }
.tour-skip { border: 0; background: none; color: var(--muted); font: 500 14px var(--sans); cursor: pointer; padding: 8px 4px; }
.tour-skip:hover { color: var(--ink); }
body.touring .add-bar { z-index: 4; }

/* ---------- Aviso de modo demostración ---------- */
.demo-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 528px; margin: 6px auto 4px; padding: 8px 8px 8px 16px; border-radius: 99px;
  background: color-mix(in srgb, var(--brass) 16%, var(--surface)); border: 1px solid var(--brass-soft);
  font: 500 13px var(--sans); color: var(--ink);
}
.demo-banner button {
  height: 30px; padding: 0 14px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--forest); color: var(--on-forest); font: 600 13px var(--sans);
}
[data-theme="dark"] .demo-banner button { background: var(--brass); color: #1A1610; }
.demo-actions { display: inline-flex; gap: 6px; flex: none; }
.demo-banner button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--brass-soft); }
[data-theme="dark"] .demo-banner button.ghost { background: transparent; color: var(--ink); }
@media (max-width: 560px) { .demo-banner { margin-left: 16px; margin-right: 16px; } }
@media (min-width: 900px) { .demo-banner { max-width: 1056px; margin-bottom: 14px; } }

/* ---------- Mes ---------- */
.month-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 0 14px;
}
#month-label { font: 500 18px var(--serif); letter-spacing: .1px; }

/* ---------- Filtro por banco ---------- */
.chips {
  display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 2px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 36px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font: 500 14px var(--sans); cursor: pointer; white-space: nowrap;
}
.chip:hover { background: var(--surface); }
.chip.on { background: var(--forest); border-color: var(--forest); color: var(--on-forest); }

/* ---------- Resumen (tarjeta verde) ---------- */
.summary {
  position: relative; overflow: hidden;
  background: var(--forest); color: var(--on-forest);
  border-radius: 22px; padding: 22px 22px 20px; margin-bottom: 14px;
  box-shadow: 0 12px 30px rgba(31,58,47,.18);
}
.summary::after { /* filete de latón, como el borde de una tarjeta de banco */
  content: ""; position: absolute; inset: 8px; border-radius: 16px;
  border: 1px solid rgba(201,165,106,.28); pointer-events: none;
}
.eyebrow {
  font: 600 11px var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--brass-soft);
}
[data-theme="dark"] .eyebrow { color: var(--brass); }
.summary .big {
  font: 500 44px/1.1 var(--serif); letter-spacing: -1px; margin: 8px 0 6px;
  font-variant-numeric: tabular-nums;
}
.cur { font-size: .5em; letter-spacing: 0; margin-right: 6px; vertical-align: .55em; opacity: .8; }
.cents { font-size: .55em; opacity: .7; }
.trend {
  display: inline-block; padding: 3px 10px; border-radius: 99px; font: 500 12.5px var(--sans);
  background: rgba(255,255,255,.08);
}
.trend.up { color: #F2B8A8; }
.trend.down { color: #A9D9BC; }
.summary .bar { background: rgba(243,238,226,.14); margin: 16px 0 8px; height: 6px; }
.summary .bar-fill { background: var(--brass); }
.summary .bar-fill.warn { background: #E0B05C; }
.summary .bar-fill.over { background: #E07A72; }
.budget-text { font-size: 13px; opacity: .85; }

/* ---------- Tarjetas ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 18px 16px 10px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.card h2 {
  font: 600 11px var(--sans); letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); margin: 0 4px 10px;
}

.bar { height: 4px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }

/* Íconos de categoría en círculo suave */
.badge {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent);
}
.badge .i { width: 19px; height: 19px; }
.badge.sm { width: 26px; height: 26px; }
.badge.sm .i { width: 14px; height: 14px; }
.badge.lg { width: 56px; height: 56px; }
.badge.lg .i { width: 26px; height: 26px; }
[data-theme="dark"] .badge { color: color-mix(in srgb, var(--c) 55%, white); background: color-mix(in srgb, var(--c) 22%, transparent); }

/* Filas de categoría (se pueden tocar para filtrar) */
.cat-row {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 6px 12px; align-items: center;
  width: 100%; margin: 0 0 2px; padding: 10px 6px; border: 0; border-radius: 14px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: opacity .2s, background .2s;
}
.cat-row .badge { grid-row: span 2; }
.cat-row:hover { background: var(--surface-2); }
.cat-row.active { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--forest); }
.cat-row.dim { opacity: .38; }
.cat-row .name { font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-row .pct { color: var(--muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; line-height: 1; }
.cat-row .amt { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.cat-row .bar { grid-column: 2; }
[data-theme="dark"] .cat-row.active { box-shadow: inset 0 0 0 1.5px var(--brass); }

/* Aviso "Mostrando: X" */
.filter-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 8px 8px 8px 10px; margin: 0 0 6px; border-radius: 14px; background: var(--surface-2); font-size: 14px;
}
.fc-text { display: inline-flex; align-items: center; gap: 8px; }
.chip-x {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 99px; font: 500 13px var(--sans); cursor: pointer;
}
.chip-x .i { width: 14px; height: 14px; }

/* Lista de compras */
.day {
  font: 600 11px var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
  margin: 16px 4px 4px;
}
.day:first-child { margin-top: 2px; }
.filter-chip + .day { margin-top: 10px; }
.tx {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 6px; border: 0; border-radius: 14px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tx:hover { background: var(--surface-2); }
.tx .info { flex: 1; min-width: 0; }
.tx .store { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx .meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx .amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.empty { color: var(--muted); text-align: center; padding: 18px 8px 14px; font-size: 14px; }
.empty p { margin: 0 0 14px; }

/* ---------- Botón "Agregar gasto" (abajo, siempre visible) ---------- */
.add-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 55%, transparent);
  display: flex; justify-content: center; gap: 10px; pointer-events: none;
}
.add-bar > * { pointer-events: auto; }
/* Calendario "Mis meses", al lado de Agregar gasto */
.months-btn {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--forest);
  box-shadow: 0 6px 18px rgba(27,31,28,.10);
}
.months-btn .i { width: 22px; height: 22px; }
.months-btn:hover { border-color: var(--brass-soft); }
[data-theme="dark"] .months-btn { color: var(--brass); box-shadow: none; }
.add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  flex: 1; max-width: 464px; height: 54px; border-radius: 99px; border: 0;
  background: var(--forest); color: var(--on-forest); font: 600 16px var(--sans); letter-spacing: .2px;
  box-shadow: 0 10px 24px rgba(31,58,47,.28); cursor: pointer;
}
.add-btn .i { color: var(--brass-soft); }
.add-btn:hover { background: var(--forest-2); }
[data-theme="dark"] .add-btn { background: var(--brass); color: #1A1610; box-shadow: none; }
[data-theme="dark"] .add-btn .i { color: #1A1610; }
[data-theme="dark"] .add-btn:hover { background: #D6B47C; }

/* ---------- Ventanas (hoja que sube desde abajo en el teléfono) ---------- */
dialog {
  border: 0; border-radius: 24px; padding: 18px 20px 20px; width: min(460px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); max-height: calc(100vh - 32px);
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  scrollbar-width: none; /* se puede desplazar, pero sin mostrar la barra */
}
dialog::-webkit-scrollbar { display: none; }
dialog:focus { outline: none; } /* la ventana se enfoca a sí misma al abrir, sin marcar ningún botón */
dialog::backdrop { background: rgba(14,17,15,.45); backdrop-filter: blur(2px); }
dialog[open] { animation: pop .22s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (max-width: 600px) {
  dialog {
    width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)); max-height: 92vh;
  }
  dialog[open] { animation: up .26s cubic-bezier(.2,.8,.2,1); }
  @keyframes up { from { transform: translateY(100%); } }
}

.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -6px 14px 0; }
.sheet-head.end { justify-content: flex-end; margin-bottom: 0; }
dialog h2 { margin: 0; font: 600 20px var(--serif); letter-spacing: -.2px; }
dialog h3 { margin: 0 0 4px; font: 600 15px var(--sans); }

label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 500; color: var(--muted); }
label input, label select {
  display: block; width: 100%; margin-top: 6px; height: 48px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--ink); font: 400 16px var(--sans);
  appearance: none; -webkit-appearance: none;
}
label select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E716A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
label input:focus, label select:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 18%, transparent); }
[data-theme="dark"] label input:focus, [data-theme="dark"] label select:focus { border-color: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 22%, transparent); }
.amount-input { font: 500 24px var(--serif) !important; height: 56px !important; }
/* minmax(0, 1fr): una lista desplegable con opciones largas NO puede empujar la columna más allá del borde */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 600px) { .two { grid-template-columns: minmax(0, 1fr); } }
label select, label input { min-width: 0; max-width: 100%; text-overflow: ellipsis; }

/* Las ventanas solo se desplazan hacia arriba/abajo, nunca de lado */
dialog { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
dialog:not(.wide) { touch-action: pan-y pinch-zoom; }
dialog label, dialog .two > *, dialog fieldset { min-width: 0; }
.account-who span, #account-email { overflow-wrap: anywhere; }

/* Selector de 3 opciones (Automático · Claro · Oscuro) */
.seg-field { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.seg-field legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
}
.seg label { margin: 0; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; }
.seg span {
  display: grid; place-items: center; height: 40px; border-radius: 10px;
  font: 500 14px var(--sans); color: var(--muted); transition: background .15s, color .15s;
}
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg input:focus-visible + span { outline: 2px solid var(--forest); outline-offset: 1px; }
[data-theme="dark"] .seg input:checked + span { background: var(--brass); color: #1A1610; }
.seg-hint { margin: 6px 0 0; font-size: 12px; }

hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0 18px; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; }

.row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.row.actions { margin-top: 18px; }
.spacer { flex: 1; }
.stack { display: grid; gap: 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: 500 15px var(--sans); cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn .i { width: 18px; height: 18px; }
.btn.primary { background: var(--forest); border-color: var(--forest); color: var(--on-forest); font-weight: 600; }
.btn.primary:hover { background: var(--forest-2); }
.btn.danger { color: var(--danger); border-color: transparent; background: none; padding: 0 8px; }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.stack .btn.danger { border-color: var(--line); }
[data-theme="dark"] .btn.primary { background: var(--brass); border-color: var(--brass); color: #1A1610; }
[data-theme="dark"] .btn.primary:hover { background: #D6B47C; }

/* Confirmación: pequeña y centrada también en el teléfono */
dialog.confirm { width: min(360px, calc(100vw - 32px)); }
@media (max-width: 600px) {
  dialog.confirm { margin: auto; border-radius: 22px; padding-bottom: 20px; }
  dialog.confirm[open] { animation: pop .2s ease-out; }
}
.confirm-msg { margin: 4px 0 6px; font: 500 17px/1.4 var(--sans); }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
.btn.danger-solid:hover { filter: brightness(1.08); }

/* Vista previa al importar */
.preview { font-size: 13px; border: 1px solid var(--line); border-radius: 12px; max-height: 180px; overflow: auto; }
.preview table { border-collapse: collapse; width: 100%; }
.preview td { padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }

/* ---------- Detalle de compra ---------- */
.detail-head { text-align: center; padding: 0 4px 18px; }
.detail-head .badge { margin-bottom: 10px; }
.detail-store { font-weight: 500; font-size: 16px; color: var(--muted); word-break: break-word; }
.detail-amt { font: 500 38px/1.15 var(--serif); letter-spacing: -.8px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.detail-rows {
  display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0;
  border-top: 1px solid var(--line); font-size: 14px;
}
.detail-rows dt, .detail-rows dd { padding: 12px 0; border-bottom: 1px solid var(--line); }
.detail-rows dt { color: var(--muted); padding-right: 16px; }
.detail-rows dd { margin: 0; text-align: right; font-weight: 500; word-break: break-word; }

/* ---------- Resultado de revisar correo ---------- */
.big-msg { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.big-msg .ok { color: var(--good); }
.scan-list { border: 1px solid var(--line); border-radius: 14px; max-height: 260px; overflow: auto; }
.scan-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.scan-row:last-child { border-bottom: 0; }
.s-store { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.scam {
  margin-top: 14px; padding: 14px; border-radius: 14px; font-size: 13px;
  background: color-mix(in srgb, var(--danger) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}
.scam > b { display: flex; align-items: center; gap: 8px; color: var(--danger); font-size: 14px; }
.scam p { margin: 6px 0; color: var(--muted); }
.scam ul { margin: 0; padding-left: 18px; }
.scam li { margin-bottom: 6px; word-break: break-word; }

/* ---------- Aviso flotante ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 10; background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 99px;
  font: 500 14px var(--sans); max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

/* ---------- Mis meses ---------- */
@media (min-width: 601px) { dialog.wide { width: min(580px, calc(100vw - 32px)); } }
.eyebrow-sm { font: 600 11px var(--sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.mchart-wrap { background: var(--surface-2); border-radius: 16px; padding: 14px 12px 8px; margin-bottom: 12px; }
.mchart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 130px; align-items: end; }
.mbar {
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted);
}
.mbar-stack { width: 100%; max-width: 26px; display: flex; flex-direction: column; border-radius: 6px 6px 3px 3px; overflow: hidden; }
.mbar-fill {
  width: 100%; min-height: 3px; background: color-mix(in srgb, var(--forest) 55%, var(--surface-2));
  transition: background .15s;
}
/* Parte proyectada del mes en curso: rayada y clara */
.mbar-proj {
  width: 100%; flex: none;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--brass) 35%, transparent) 0 4px, transparent 4px 8px);
  border: 1px dashed var(--brass); border-bottom: 0; border-radius: 6px 6px 0 0; box-sizing: border-box;
}
.mchart-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

/* Proyección en la tarjeta verde */
.forecast {
  margin-top: 14px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.07); font-size: 13px; line-height: 1.4;
}
.fc-main { display: flex; align-items: center; gap: 8px; }
.fc-main .i { width: 16px; height: 16px; color: var(--brass-soft); }
.fc-main b { font-weight: 600; }
.fc-sub { margin: 4px 0 0 24px; opacity: .85; }
.fc-sub.warn { color: #F2B8A8; opacity: 1; }
.mbar:hover .mbar-fill { background: var(--forest); }
.mbar.on .mbar-fill { background: var(--brass); }
.mbar.on { color: var(--ink); font-weight: 600; }
.mbar-lbl { font-size: 11px; line-height: 1; text-transform: uppercase; }
[data-theme="dark"] .mbar-fill { background: color-mix(in srgb, var(--brass) 35%, var(--surface-2)); }
[data-theme="dark"] .mbar:hover .mbar-fill { background: color-mix(in srgb, var(--brass) 65%, var(--surface-2)); }
[data-theme="dark"] .mbar.on .mbar-fill { background: var(--brass); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 14px; }
.stat { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.stat-lbl { font-size: 12px; color: var(--muted); }
.stat-val { font: 500 19px var(--serif); margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 12px; color: var(--muted); }

/* Tarjetas de mes en fila, de izquierda (viejo) a derecha (reciente); se desliza de lado */
.mcards {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -20px; padding: 2px 20px 6px; scroll-padding: 0 20px; scrollbar-width: none;
}
.mcards::-webkit-scrollbar { display: none; }
.mcard {
  flex: 0 0 min(82%, 300px); scroll-snap-align: center; align-content: start;
  display: grid; gap: 6px; padding: 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: inherit; font: inherit;
}
.mcard:hover { background: var(--surface-2); }
.mcard.on { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
[data-theme="dark"] .mcard.on { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.mcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mcard-name { font: 500 17px var(--serif); }
.mcard-total { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mcard-sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.mtop { display: inline-flex; align-items: center; gap: 8px; }
.mtag {
  font: 600 10px var(--sans); letter-spacing: 1px; text-transform: uppercase; vertical-align: 2px;
  padding: 2px 7px; border-radius: 99px; background: var(--forest); color: var(--on-forest);
}
[data-theme="dark"] .mtag { background: var(--brass); color: #1A1610; }
.mtag.soft, [data-theme="dark"] .mtag.soft { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.mcard-note { font-size: 11.5px; color: var(--muted); }
.mcard-proj { font-weight: 600; color: var(--brass); font-variant-numeric: tabular-nums; }
.mtrend { font-weight: 500; }
.mtrend.up { color: var(--danger); }
.mtrend.down { color: var(--good); }
.mbudget { font-weight: 500; }
.mbudget.ok { color: var(--good); }
.mbudget.over { color: var(--danger); }

/* ---------- Computadora: dos columnas ---------- */
.add-top, .months-top { display: none; }
@media (min-width: 900px) {
  body { padding-bottom: 40px; font-size: 15.5px; }
  .top, main { max-width: 1120px; padding-left: 32px; padding-right: 32px; }
  .top { padding-top: 26px; padding-bottom: 14px; }
  .top h1 { font-size: 24px; }
  .brand-mark { width: 30px; height: 30px; }

  /* El botón grande de abajo pasa al encabezado */
  .add-bar { display: none; }
  .add-top {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px;
    border-radius: 99px; border: 0; background: var(--forest); color: var(--on-forest);
    font: 600 14.5px var(--sans); cursor: pointer; box-shadow: 0 6px 16px rgba(31,58,47,.2);
  }
  .add-top .i { width: 18px; height: 18px; color: var(--brass-soft); }
  .months-top {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px;
    border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    font: 500 14px var(--sans); cursor: pointer;
  }
  .months-top .i { width: 18px; height: 18px; color: var(--forest); }
  .months-top:hover { border-color: var(--brass-soft); }
  [data-theme="dark"] .months-top .i { color: var(--brass); }
  .add-top:hover { background: var(--forest-2); }
  .top-actions { gap: 10px; }

  /* Izquierda: mes, resumen y categorías. Derecha: filtro de bancos y compras. */
  main {
    display: grid; grid-template-columns: 380px minmax(0, 1fr); column-gap: 28px;
    grid-template-areas:
      "nav     chips"
      "review  review"
      "summary list"
      "cats    list";
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
  }
  .month-nav { grid-area: nav; margin: 0 0 16px; }
  .chips { grid-area: chips; margin: 0 0 16px; padding: 0; align-self: center; flex-wrap: wrap; overflow: visible; }
  .summary { grid-area: summary; margin-bottom: 18px; }
  .cats-card { grid-area: cats; }
  .list-card { grid-area: list; margin-bottom: 0; padding: 22px 20px 14px; min-height: 100%; }

  /* Lista más amplia: un poco más de aire por fila */
  .tx { padding: 12px 10px; }
  .tx .meta { font-size: 13px; }
  .day { margin-left: 10px; }
}
@media (min-width: 900px) {
  [data-theme="dark"] .add-top { background: var(--brass); color: #1A1610; box-shadow: none; }
  [data-theme="dark"] .add-top .i { color: #1A1610; }
  [data-theme="dark"] .add-top:hover { background: #D6B47C; }
}

/* Texto del botón de correo: largo en pantallas anchas, corto en teléfonos */
.lbl-short { display: none; }
@media (max-width: 440px) {
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
  .top h1 { font-size: 19px; }
  .btn-mail { padding: 0 12px; }
}
/* Teléfonos muy angostos: el botón de correo queda solo con ícono */
@media (max-width: 340px) {
  .btn-mail .lbl-short { display: none; }
  .btn-mail { padding: 0; width: 40px; justify-content: center; }
}


/* =====================================================================
   Animación de entrada (splash)
   ===================================================================== */
.splash {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(900px 500px at 50% 35%, #24443A, #17302A 70%);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}
html.no-splash .splash { display: none; }
.splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.splash-inner { display: grid; justify-items: center; }
.splash-mark { width: 118px; height: 118px; overflow: visible; }
.sb { transform-box: fill-box; transform-origin: 50% 100%; animation: sb-grow .6s cubic-bezier(.2,.9,.25,1.25) both; }
.sb1 { fill: #F3EEE2; opacity: .55; animation-delay: .10s; }
.sb2 { fill: #F3EEE2; opacity: .85; animation-delay: .25s; }
.sb3 { fill: #C9A56A; animation-delay: .40s; }
@keyframes sb-grow { from { transform: scaleY(0); } }
.splash-word {
  margin-top: 16px; font: 600 40px/1 var(--serif); letter-spacing: -.6px; color: #F3EEE2;
  animation: splash-up .55s .75s cubic-bezier(.2,.8,.2,1) both;
}
.splash-word span { color: #C9A56A; font-style: italic; margin-left: 1px; }
.splash-line { height: 1px; width: 0; margin-top: 16px; background: #C9A56A; opacity: .7; animation: splash-line .7s 1s ease-out both; }
@keyframes splash-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes splash-line { to { width: 140px; } }

/* Después del splash, la app sube suavemente, sección por sección */
body.app-enter .top { animation: enter-down .5s cubic-bezier(.2,.8,.2,1) both; }
body.app-enter main > * { animation: enter-up .6s cubic-bezier(.2,.8,.2,1) both; }
body.app-enter main > :nth-child(2) { animation-delay: .05s; }
body.app-enter main > :nth-child(3) { animation-delay: .10s; }
body.app-enter main > :nth-child(4) { animation-delay: .15s; }
body.app-enter main > :nth-child(5) { animation-delay: .20s; }
body.app-enter main > :nth-child(6) { animation-delay: .25s; }
body.app-enter main > :nth-child(n+7) { animation-delay: .30s; }
body.app-enter .tabbar, body.app-enter .add-bar { animation: enter-up .6s .2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes enter-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes enter-down { from { opacity: 0; transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
  .sb, .splash-word, .splash-line { animation: none; }
  .splash-line { width: 140px; }
  body.app-enter * { animation: none !important; }
}

/* =====================================================================
   Teléfono (y tabletas): barra de abajo, vista Compras/Categorías, todo más compacto
   ===================================================================== */
.tabbar, .mview { display: none; }

@media (max-width: 899px) {
  body { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  body.is-empty { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

  /* Encabezado limpio: solo la marca (Correo y Ajustes pasan a la barra de abajo) */
  .top { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .top .btn-mail, .top #btn-settings { display: none; }
  .top h1 { font-size: 22px; }

  .add-bar { display: none !important; }

  /* Barra de abajo */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    padding: 6px 6px calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-top: 1px solid var(--line);
  }
  .tab {
    display: grid; justify-items: center; gap: 3px; padding: 6px 0 2px; border: 0; background: none; cursor: pointer;
    color: var(--muted); font: 500 11px var(--sans);
  }
  .tab .i { width: 22px; height: 22px; }
  .tab.on { color: var(--forest); }
  [data-theme="dark"] .tab.on { color: var(--brass); }
  .tab-add {
    justify-self: center; width: 58px; height: 58px; margin-bottom: 8px; transform: translateY(-14px);
    border-radius: 50%; border: 4px solid var(--bg); display: grid; place-items: center; cursor: pointer;
    background: var(--forest); color: var(--brass-soft); box-shadow: 0 8px 20px rgba(31,58,47,.35);
  }
  .tab-add .i { width: 26px; height: 26px; }
  .tab-add:active { transform: translateY(-14px) scale(.95); }
  [data-theme="dark"] .tab-add { background: var(--brass); color: #1A1610; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
  body.is-empty .tabbar { display: grid; }

  /* Vista Compras / Categorías (una a la vez) */
  .mview {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 12px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
    position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 3;
  }
  .mview button {
    height: 38px; border: 0; border-radius: 10px; background: none; cursor: pointer;
    font: 600 13.5px var(--sans); color: var(--muted);
  }
  .mview button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
  [data-theme="dark"] .mview button.on { background: var(--forest-2); color: var(--on-forest); }
  body:not(.mview-cats) .cats-card { display: none; }
  body.mview-cats .list-card { display: none; }
  body.is-empty .mview { display: none; }

  /* Tarjeta verde más compacta */
  .summary { padding: 18px 18px 16px; border-radius: 20px; }
  .summary .big { font-size: 40px; margin: 6px 0 4px; }
  .forecast { margin-top: 12px; padding: 9px 11px; font-size: 12.5px; }
  .fc-sub { margin-left: 24px; }
  .summary .bar { margin-top: 12px; }

  /* Mes: más discreto */
  .month-nav { margin: 4px 0 10px; }
  .icon-btn.round { width: 36px; height: 36px; }
  #month-label { font-size: 17px; }

  /* Tarjetas: menos aire en los lados para dar espacio al contenido */
  .card { padding: 14px 12px 6px; border-radius: 18px; }
  .card h2 { margin: 2px 6px 8px; }
  .cats-card h2, .list-card h2 { display: none; } /* el selector Compras/Categorías ya lo dice */
  .list-card, .cats-card { padding-top: 8px; }
  .tx { padding: 10px 6px; gap: 11px; }
  .tx .badge { width: 36px; height: 36px; }
  .cat-row { padding: 9px 6px; }

  /* El aviso del recorrido no debe quedar debajo de la barra */
  .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
}


/* =====================================================================
   "Revisando tu correo…"
   ===================================================================== */
dialog.scanning { width: min(360px, calc(100vw - 32px)); text-align: center; padding: 28px 24px 22px; }
@media (max-width: 600px) { dialog.scanning { margin: auto; border-radius: 24px; } dialog.scanning[open] { animation: pop .25s ease-out; } }
dialog.scanning h2 { font-size: 21px; margin: 18px 0 14px; }
.scan-visual { position: relative; width: 96px; height: 96px; margin: 4px auto 0; display: grid; place-items: center; }
.scan-ring {
  position: absolute; inset: 8px; border-radius: 50%; border: 2px solid var(--brass);
  animation: scan-pulse 1.8s ease-out infinite; opacity: 0;
}
.scan-ring.r2 { animation-delay: .9s; }
@keyframes scan-pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
.scan-env {
  position: relative; width: 64px; height: 64px; border-radius: 20px; overflow: hidden;
  display: grid; place-items: center; background: var(--forest); color: var(--on-forest);
  box-shadow: 0 8px 22px rgba(31,58,47,.3);
}
[data-theme="dark"] .scan-env { background: var(--brass); color: #1A1610; }
.scan-env .i { width: 30px; height: 30px; }
.scan-beam {
  position: absolute; left: 0; right: 0; height: 18px; top: -18px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--brass-soft) 70%, transparent), transparent);
  animation: scan-beam 1.4s ease-in-out infinite;
}
@keyframes scan-beam { to { top: 64px; } }
.scan-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 10px; text-align: left; width: fit-content; max-width: 100%; }
.scan-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); transition: color .2s; }
.st-dot {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); position: relative;
  transition: background .2s, border-color .2s;
}
.scan-steps li.active { color: var(--ink); font-weight: 500; }
.scan-steps li.active .st-dot { border-color: var(--brass); border-top-color: transparent; animation: spin .8s linear infinite; }
.scan-steps li.done { color: var(--ink); }
.scan-steps li.done .st-dot { background: var(--good); border-color: var(--good); }
.scan-steps li.done .st-dot::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.scan-count { margin: 16px 0 0; min-height: 1.4em; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* El botón de Correo también muestra que está trabajando */
#tab-mail.busy .i, #btn-gmail.busy .i { animation: mail-bob .9s ease-in-out infinite; }
@keyframes mail-bob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .scan-ring, .scan-beam, #tab-mail.busy .i, #btn-gmail.busy .i { animation: none; }
}


/* =====================================================================
   Períodos (de una fecha a otra)
   ===================================================================== */
.month-btn {
  border: 0; background: none; color: var(--ink); cursor: pointer; padding: 6px 10px; border-radius: 12px;
  font: 500 18px var(--serif); letter-spacing: .1px; text-align: center; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.month-btn:hover { background: var(--surface-2); }
.month-btn .caret { font: 400 12px var(--sans); color: var(--brass); margin-left: 2px; vertical-align: 2px; }
body.in-period .month-btn { font-size: 15.5px; font-family: var(--sans); font-weight: 600; }
.month-nav { gap: 8px; }
.period-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pchip {
  height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font: 500 14.5px var(--sans); cursor: pointer;
}
.pchip:hover { border-color: var(--brass-soft); }
.pchip.on { background: var(--forest); border-color: var(--forest); color: var(--on-forest); font-weight: 600; }
[data-theme="dark"] .pchip.on { background: var(--brass); border-color: var(--brass); color: #1A1610; }
.period-sub { margin: 20px 0 10px; font: 600 14px var(--sans); color: var(--muted); }
.period-dlg .two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.period-apply { width: 100%; margin-top: 4px; }


/* =====================================================================
   Editar categorías
   ===================================================================== */
.cats-list { display: grid; gap: 2px; margin: 0 -6px 14px; }
.cat-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border: 0; border-radius: 14px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.cat-item:hover { background: var(--surface-2); }
.ci-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-kind { font: 600 11px var(--sans); letter-spacing: .3px; text-transform: uppercase; color: var(--muted);
  padding: 2px 8px; border-radius: 99px; background: var(--surface-2); }
.ci-kind.biz { color: var(--forest); background: color-mix(in srgb, var(--forest) 12%, transparent); }
[data-theme="dark"] .ci-kind.biz { color: var(--brass); background: color-mix(in srgb, var(--brass) 16%, transparent); }
.ci-go { width: 16px; height: 16px; color: var(--muted); }
.cat-add { width: 100%; }
.cat-edit-title { flex: 1; text-align: center; }
.field-label { font-size: 13px; font-weight: 500; color: var(--muted); margin: 4px 0 8px; }
.pick-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.pick-icon {
  aspect-ratio: 1; border-radius: 14px; border: 1.5px solid var(--line); cursor: pointer; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c);
}
.pick-icon .i { width: 22px; height: 22px; }
.pick-icon.on { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent); }
[data-theme="dark"] .pick-icon { color: color-mix(in srgb, var(--c) 55%, white); }
.pick-colors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.pick-color { aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--surface); background: var(--c); cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.pick-color.on { box-shadow: 0 0 0 2.5px var(--ink); }
.seg.seg-2 { grid-template-columns: repeat(2, 1fr); }
.tag-biz {
  display: inline-block; vertical-align: 1px; margin-left: 6px; padding: 1px 7px; border-radius: 99px;
  font: 600 10px var(--sans); letter-spacing: .3px; text-transform: uppercase;
  color: var(--forest); background: color-mix(in srgb, var(--forest) 12%, transparent);
}
[data-theme="dark"] .tag-biz { color: var(--brass); background: color-mix(in srgb, var(--brass) 16%, transparent); }


/* =====================================================================
   Tarjetas
   ===================================================================== */
.card-cycle {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.07); font-size: 13.5px; line-height: 1.4;
}
.card-cycle .i { width: 18px; height: 18px; flex: none; color: var(--brass-soft); margin-top: 1px; }
.card-cycle b { font-weight: 600; }
.card-cycle small { opacity: .75; }
.card-name-row { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 16px; }
.card-item .ci-name small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.ci-kind.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.chip-type { font-weight: 600; }

/* =====================================================================
   Cuadrito "Elegir tarjeta" junto a Compras, y su ventana
   ===================================================================== */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.list-head h2 { margin: 0 4px !important; }
.card-pick {
  display: inline-flex; align-items: center; gap: 7px; max-width: 70%;
  height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font: 500 13.5px var(--sans); cursor: pointer; white-space: nowrap;
}
.card-pick span:not(.caret) { overflow: hidden; text-overflow: ellipsis; }
.card-pick svg { width: 17px; height: 17px; flex: none; color: var(--brass); }
.card-pick .caret { font-size: 11px; color: var(--brass); }
.card-pick:hover { border-color: var(--brass-soft); }
.card-pick.on { background: var(--forest); border-color: var(--forest); color: var(--on-forest); font-weight: 600; }
.card-pick.on svg, .card-pick.on .caret { color: var(--on-forest); }
[data-theme="dark"] .card-pick.on { background: var(--brass); border-color: var(--brass); color: #1A1610; }
[data-theme="dark"] .card-pick.on svg, [data-theme="dark"] .card-pick.on .caret { color: #1A1610; }
.card-pick[hidden] { display: none; }
@media (max-width: 899px) {
  .list-head { justify-content: flex-end; margin: 2px 6px 8px; }
  .card-pick { max-width: 100%; }
}

.cardpick-list { display: grid; gap: 8px; }
.cp-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); cursor: pointer; font: inherit;
}
.cp-item:hover { border-color: var(--brass-soft); }
.cp-item.on { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
[data-theme="dark"] .cp-item.on { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.cp-ic { width: 22px; height: 22px; flex: none; color: var(--brass); }
.cp-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cp-text b { font: 600 14.5px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-text small { font: 400 12.5px var(--sans); color: var(--muted); }
.cp-check { width: 18px; height: 18px; flex: none; color: var(--forest); }
[data-theme="dark"] .cp-check { color: var(--brass); }
.cp-all {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 8px 6px; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; font: inherit;
}
.cp-all:hover { background: var(--surface-2); }
.cp-all .cp-ic { color: var(--muted); }
.cp-head {
  margin: 8px 2px 0; padding-top: 12px; border-top: 1px solid var(--line);
  font: 600 11px var(--sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
}

/* =====================================================================
   Papelera
   ===================================================================== */
.trash-list { display: grid; gap: 8px; max-height: 55vh; overflow-y: auto; margin: 6px 0 12px; }
.trash-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.tr-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.tr-text b { font: 600 14px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-text small { font: 400 12px var(--sans); color: var(--muted); }
.tr-amt { font: 600 13.5px var(--sans); white-space: nowrap; }
.tr-restore { height: 34px; padding: 0 12px; font-size: 13px; flex: none; }
.trash-all { width: 100%; }
@media (max-width: 420px) { .tr-amt { display: none; } }

/* =====================================================================
   "¿Nos ayudas a leer tus correos de…?"
   ===================================================================== */
.sample-dlg { max-width: 460px; text-align: center; }
.sample-icon {
  width: 56px; height: 56px; margin: 6px auto 12px; border-radius: 16px;
  display: grid; place-items: center; background: var(--surface-2); color: var(--brass);
}
.sample-icon svg { width: 28px; height: 28px; }
.sample-dlg h2 { font: 600 22px var(--serif); margin: 0 0 8px; line-height: 1.25; }
.sample-text { color: var(--ink); font-size: 15px; line-height: 1.5; margin: 0 0 14px; }
.sample-safe {
  display: flex; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 12px;
}
.sample-safe svg { width: 20px; height: 20px; flex: none; color: var(--forest); margin-top: 1px; }
[data-theme="dark"] .sample-safe svg { color: var(--brass); }
.sample-safe p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.sample-preview { text-align: left; margin-bottom: 16px; }
.sample-preview summary { cursor: pointer; font: 600 13.5px var(--sans); color: var(--brass); padding: 6px 0; }
.sample-preview pre {
  white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto; margin: 6px 0 0;
  padding: 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
  font: 12.5px/1.5 ui-monospace, Consolas, monospace; color: var(--ink);
}
.sample-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.sample-actions .btn { width: 100%; }

/* =====================================================================
   Ajustes: grupos con filas claras (ícono · nombre · qué hace · valor ›)
   ===================================================================== */
.settings-dlg { width: min(520px, calc(100vw - 32px)); padding-bottom: 24px; }
.set-group { margin-top: 22px; }
.set-group:first-of-type { margin-top: 6px; }
.set-title { margin: 0 6px 8px !important; font: 600 11.5px var(--sans) !important; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.set-title.danger { color: var(--danger); }
.set-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.set-row {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; margin: 0;
  padding: 12px 16px; background: none; border: 0; border-radius: 0; color: var(--ink);
  text-align: left; font: inherit; cursor: pointer;
}
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-row.static { cursor: default; }
button.set-row:hover, label.set-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.set-row.wrap { flex-wrap: wrap; cursor: default; }
.set-row.wrap:hover { background: none; }
.set-ic {
  width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--brass);
}
.set-ic svg { width: 19px; height: 19px; }
.set-ic.good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--surface)); border-color: transparent; }
.set-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.set-text b { font: 600 15px var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.set-text small { font: 400 12.5px/1.35 var(--sans); color: var(--muted); }
.set-text .sync-state { margin: 0; }
.set-val { font: 500 13.5px var(--sans); color: var(--muted); white-space: nowrap; }
.set-go svg, svg.set-go { width: 16px; height: 16px; color: var(--muted); flex: none; }
.set-row.danger b { color: var(--danger); }
.set-row.danger .set-ic { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: transparent; }
/* Listas y casillas dentro de una fila: compactas, a la derecha */
label.set-row select.set-input, label.set-row input.set-input {
  width: auto; max-width: 48%; flex: 0 1 auto; margin: 0; height: 40px; font-size: 14.5px; border-radius: 10px;
}
label.set-row input.set-num { width: 130px; text-align: right; }
.set-seg { flex: 1 0 100%; margin-top: 4px; }
.settings-dlg .app-version { margin-top: 22px; }
.settings-dlg .app-version a { color: var(--muted); }
@media (max-width: 600px) {
  .settings-dlg { width: 100%; }
  .set-row { gap: 12px; padding: 12px 14px; }
  /* En el teléfono, la lista o casilla va debajo de su nombre, a lo ancho (así no se corta "RD$ · Peso dominicano") */
  label.set-row { flex-wrap: wrap; }
  label.set-row select.set-input, label.set-row input.set-input, label.set-row input.set-num {
    flex: 1 0 calc(100% - 50px); max-width: none; width: auto; margin-left: 50px; text-align: left;
  }
}