/* HedaWallet — "libreta de carbón".
   Una libreta contable sobre carbón mate: números de letrero (DIN), renglones finos,
   color sólo cuando significa algo (bolsas, estado, acción) y vidrio satinado sólo
   en lo que flota con el usuario (la isla, menús y diálogos). */

/* Fuentes locales (SIL OFL, ver web/public/fonts). */
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("/fonts/pixelify-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* ───────────── Tokens ───────────── */
:root,
html.heda-theme-dark {
  color-scheme: dark;
  --canvas: #0f0f0e;
  --surface: #171716;
  --raised: #1f1f1d;
  --raised-2: #292926;
  --sunken: #0b0b0a;
  --rule: #2b2a27;
  --rule-strong: #3a3934;
  --text: #ece7dc;
  --text-2: #a7a294;
  --text-3: #8b8676;
  --good: #3fcf8e;
  --warn: #ffc53d;
  --bad: #ff5b4d;
  --bag-wants: #ff4f9a;
  --bag-needs: #7aa2ff;
  --bag-savings: #3fcf8e;
  --glass-fill: rgba(28, 28, 26, 0.64);
  --glass-top: rgba(255, 255, 255, 0.13);
  --glass-rim: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.8), 0 3px 10px rgba(0, 0, 0, 0.4);
  --grain-opacity: 0.05;
}

html.heda-theme-light {
  color-scheme: light;
  --canvas: #f2eee5;
  --surface: #faf8f3;
  --raised: #ffffff;
  --raised-2: #efebe2;
  --sunken: #e9e4d9;
  --rule: #dcd6c9;
  --rule-strong: #c9c2b2;
  --text: #171612;
  --text-2: #57534a;
  --text-3: #6d685c;
  --good: #11744b;
  --warn: #855400;
  --bad: #c62f22;
  --bag-wants: #c8135f;
  --bag-needs: #2f55c9;
  --bag-savings: #11744b;
  --glass-fill: rgba(250, 248, 243, 0.62);
  --glass-top: rgba(255, 255, 255, 0.9);
  --glass-rim: rgba(23, 22, 18, 0.08);
  --glass-shadow: 0 20px 44px -18px rgba(60, 50, 30, 0.35), 0 3px 10px rgba(60, 50, 30, 0.10);
  --grain-opacity: 0.04;
}

/* La tinta: domina acciones primarias y "aquí estás". Se elige en Ajustes. */
html, html.heda-accent-cempasuchil { --accent: #ff8c1a; --accent-ink: #1c0d00; }
html.heda-accent-lima { --accent: #c6ec3c; --accent-ink: #161c00; }
html.heda-accent-cielo { --accent: #5ec8ff; --accent-ink: #001826; }
html.heda-accent-hueso { --accent: #ece7dc; --accent-ink: #171612; }
html.heda-accent-mora { --accent: #b18cff; --accent-ink: #160733; }
html.heda-accent-iridiscente { --accent: #b14dff; --accent-ink: #ffffff; }
html.heda-theme-light.heda-accent-cempasuchil { --accent: #a84500; --accent-ink: #ffffff; }
html.heda-theme-light.heda-accent-lima { --accent: #466200; --accent-ink: #ffffff; }
html.heda-theme-light.heda-accent-cielo { --accent: #005f8f; --accent-ink: #ffffff; }
html.heda-theme-light.heda-accent-hueso { --accent: #171612; --accent-ink: #faf8f3; }
html.heda-theme-light.heda-accent-mora { --accent: #5b30c9; --accent-ink: #ffffff; }
html.heda-theme-light.heda-accent-iridiscente { --accent: #7b2fd0; --accent-ink: #ffffff; }
/* Iridiscente: los botones principales llevan la textura de aceite (--oil, la pinta oil.js) con orilla blanca. */
html.heda-accent-iridiscente :is(.button:not(.button--ghost), .settings-action-primary, .island__cta, .calc__key--eq) {
  background: var(--oil, var(--accent)) center / 480px 160px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.82);
}

:root {
  --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-text: color-mix(in srgb, var(--accent) 80%, var(--text));
  --bad-soft: color-mix(in srgb, var(--bad) 14%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent);
  --r: 8px;
  --pixel-corners: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
  --r-control: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.32, 0.5, 1);
  --font-ui: "Nunito", "Avenir Next", system-ui, sans-serif;
  --font-num: "Nunito", "Avenir Next", system-ui, sans-serif;
  --font-fig: "Nunito", "Avenir Next", system-ui, sans-serif;
  --font-pixel: "Pixelify Sans", "Nunito", monospace;
  --mono: "Menlo", ui-monospace, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --satin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────────── Base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--canvas); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
body.is-modal-scroll-locked { position: fixed; inset-inline: 0; overflow: hidden; }
::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.12rem; }
h4 { font-size: 0.98rem; }
p { margin: 0; }
a { color: var(--accent-text); }
strong { font-weight: 600; }
strong, dd, time, .amount, [class*='metric'], .mb-cell { font-variant-numeric: tabular-nums; }
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.45em;
  padding: 0 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: inherit;
  font: 600 0.68rem/1.45 var(--mono);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Fondo: íconos de dinero sin color; cerca del mouse se vuelven prisma. */
.bg-icons, .bg-prism {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask: var(--season-mask, none) 0 0 / 360px 360px repeat, url("/bg-pattern.svg?v=2") 0 0 / 360px 360px repeat;
  mask: var(--season-mask, none) 0 0 / 360px 360px repeat, url("/bg-pattern.svg?v=2") 0 0 / 360px 360px repeat;
}
.bg-icons { background: var(--text); opacity: 0.045; }
.bg-prism {
  background: conic-gradient(from var(--prism-turn, 0deg) at var(--px, 50%) var(--py, 50%), #ff4f9a, #ffc53d, #c6ec3c, #3fcf8e, #5ec8ff, #b18cff, #ff4f9a);
  -webkit-mask:
    radial-gradient(circle 190px at var(--px, -999px) var(--py, -999px), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%),
    var(--season-mask, none) 0 0 / 360px 360px repeat,
    url("/bg-pattern.svg?v=2") 0 0 / 360px 360px repeat;
  -webkit-mask-composite: source-in, source-over;
  mask:
    radial-gradient(circle 190px at var(--px, -999px) var(--py, -999px), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%),
    var(--season-mask, none) 0 0 / 360px 360px repeat,
    url("/bg-pattern.svg?v=2") 0 0 / 360px 360px repeat;
  mask-composite: intersect, add;
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
html.heda-prism-on .bg-prism { opacity: 0.5; }
html.heda-theme-light .bg-icons { opacity: 0.06; }
html.heda-theme-light.heda-prism-on .bg-prism { opacity: 0.65; }
.grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); opacity: var(--grain-opacity); mix-blend-mode: overlay; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg[aria-hidden="true"]:not(.icon-sprite):not(.pixel-sprite) { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ───────────── Primitivos ───────────── */
:where(button) { font: inherit; color: inherit; cursor: pointer; }
:where(button:disabled) { cursor: progress; opacity: 0.6; }
.button,
.settings-action-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  white-space: nowrap;
  transition: filter 160ms var(--ease), transform 160ms var(--ease);
}
.button:hover, .settings-action-primary:hover { filter: brightness(1.08); }
.button:active, .settings-action-primary:active { transform: scale(0.98); }
.button--small { min-height: 34px; padding: 0 12px; font-size: 0.86rem; }
.button--ghost { background: var(--raised-2); color: var(--text); }
.button--ghost:hover { filter: brightness(1.15); }
.text-button {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--accent-text);
  font-size: 0.84rem;
  font-weight: 600;
  transition: background 140ms var(--ease);
}
.text-button:hover { background: var(--accent-soft); }
.text-button--danger { color: var(--bad); }
.text-button--danger:hover { background: var(--bad-soft); }

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  background: var(--sunken);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
:where(input, select, textarea):hover { border-color: var(--rule-strong); }
:where(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:where(input)::placeholder { color: var(--text-3); }
:where(select) {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M18 9s-4.42 6-6 6-6-6-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
}
:where(input[type="file"]) { font: inherit; font-size: 0.86rem; color: var(--text-2); }
:where(input[type="file"])::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 0; border-radius: var(--r-control); background: var(--raised-2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); width: 16px; height: 16px; }
:where(input[type="date"], input[type="month"])::-webkit-calendar-picker-indicator { filter: invert(0.65); cursor: pointer; }
html.heda-theme-light :where(input[type="date"], input[type="month"])::-webkit-calendar-picker-indicator { filter: none; }
.is-invalid { border-color: var(--bad) !important; box-shadow: 0 0 0 3px var(--bad-soft) !important; }
.is-guided-highlight { animation: guided 900ms var(--ease); }
@keyframes guided { 40% { box-shadow: 0 0 0 6px var(--accent-soft); } }

label { display: grid; gap: 5px; color: var(--text-2); font-size: 0.8rem; font-weight: 500; }
.eyebrow { color: var(--text-3); font-size: 0.78rem; font-weight: 500; }
.microcopy { color: var(--text-2); font-size: 0.86rem; line-height: 1.5; }
.source-note, .pill, .percent-total {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--raised-2);
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.empty, .loading {
  display: grid;
  gap: 6px;
  padding: 20px;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r);
  color: var(--text-2);
  font-size: 0.88rem;
  text-align: center;
}
.empty--tight { padding: 12px; }
.loading { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.5; } }
.empty--import-review { justify-items: center; }
.empty--import-review strong { color: var(--text); }
.positive { color: var(--good); }
.negative { color: var(--bad); }

.hint { position: relative; display: inline-grid; place-items: center; vertical-align: -3px; width: 18px; height: 18px; margin-left: 2px; color: var(--text-3); cursor: help; }
.hint:hover, .hint:focus-visible { color: var(--text); }
.hint-icon { width: 16px; height: 16px; }
.hint-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 30;
  width: max-content;
  max-width: 260px;
  padding: 9px 11px;
  border-radius: var(--r);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: visibility 0s 140ms, transform 140ms var(--ease);
}
.hint:hover .hint-bubble, .hint:focus-visible .hint-bubble { visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

/* ───────────── Vidrio satinado (sólo lo que flota) ─────────────
   El desenfoque vive en ::before para que un menú dentro de la isla vea la página real. */
.island, .pace-step, .calc, .settings-menu, .health-breakdown, .hint-bubble, .advice-dialog, .onboarding-dialog { isolation: isolate; }
.island::before, .pace-step::before, .calc::before, .settings-menu::before, .health-breakdown::before, .hint-bubble::before, .advice-dialog::before, .onboarding-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(90% 140% at var(--mx, 30%) -20%, color-mix(in srgb, var(--glass-top) 45%, transparent), transparent 60%),
    var(--satin),
    var(--glass-fill);
  background-size: auto, 160px 160px, auto;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--glass-top), inset 0 0 0 1px var(--glass-rim), var(--glass-shadow);
}

/* ───────────── Isla dinámica ───────────── */
.island-dock { position: fixed; top: 12px; inset-inline: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; padding-inline: 12px; pointer-events: none; }

/* Escalón del ritmo: nace bajo la isla. Al pasar el mouse, la bolsa se abre y avienta a las otras. */
.pace-step { position: relative; z-index: -1; display: flex; width: min(440px, calc(100vw - 48px)); margin-top: -2px; padding: 3px 6px 5px; border-radius: 0 0 16px 16px; pointer-events: auto; transition: transform 380ms var(--spring); }
.island[data-mode="capture"] + .pace-step, .pace-step:empty { visibility: hidden; transform: translateY(-14px); pointer-events: none; transition: visibility 0s 260ms, transform 260ms var(--ease); }
.pace-step__item {
  --bag: var(--bag-wants);
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow 420ms var(--spring), background 160ms var(--ease), color 160ms var(--ease);
}
.pace-step__item--needs { --bag: var(--bag-needs); }
.pace-step__item--savings { --bag: var(--bag-savings); }
.pace-step__item > svg { flex: none; width: 17px; height: 17px; color: var(--bag); transition: transform 420ms var(--spring); }
.pace-step__name, .pace-step__detail { display: inline-flex; align-items: center; gap: 7px; overflow: hidden; transition: max-width 420ms var(--spring), opacity 220ms var(--ease); }
.pace-step__name { max-width: 90px; }
.pace-step__item--empty .pace-step__name { max-width: none; } /* "Sin plan todavía" completo, no recortado */
.pace-step__detail { max-width: 0; opacity: 0; }
.pace-step__detail strong { color: var(--text); font: 800 0.95rem/1 var(--font-num); }
.pace-step__item[data-tone="warn"] .pace-step__detail strong { color: var(--warn); }
.pace-step__item[data-tone="bad"] :is(.pace-step__detail strong, .pace-step__name) { color: var(--bad); }
.pace-step__detail small { color: var(--text-3); font-size: 0.72rem; font-weight: 600; }
.pace-step__item:is(:hover, :focus-visible) { flex-grow: 12; background: color-mix(in srgb, var(--bag) 12%, transparent); color: var(--text); }
.pace-step__item:is(:hover, :focus-visible) .pace-step__detail { max-width: 260px; opacity: 1; }
.pace-step:has(.pace-step__item:is(:hover, :focus-visible)) .pace-step__item:not(:hover, :focus-visible) { flex-grow: 0; padding-inline: 8px; }
.pace-step:has(.pace-step__item:is(:hover, :focus-visible)) .pace-step__item:not(:hover, :focus-visible) .pace-step__name { max-width: 0; opacity: 0; }
.pace-step:has(.pace-step__item:is(:hover, :focus-visible)) .pace-step__item:not(:hover, :focus-visible) > svg { transform: scale(0.5, 1.15); }
.island {
  position: relative;
  display: grid;
  grid-template-rows: auto 0fr 0fr;
  max-width: calc(100vw - 24px);
  border-radius: 22px;
  pointer-events: auto;
  transition: grid-template-rows 380ms var(--spring), min-width 380ms var(--spring), max-width 380ms var(--spring);
}
.island.has-activity { grid-template-rows: auto 1fr 0fr; }
.island[data-mode="capture"] { grid-template-rows: auto 0fr 1fr; min-width: min(880px, calc(100vw - 24px)); max-width: min(880px, calc(100vw - 24px)); }
.island__row { min-height: 0; overflow: hidden; }
.island__bar { display: flex; align-items: center; gap: 2px; padding: 5px; }
.island__nav { position: relative; display: flex; }
.island__indicator {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ind-w, 0);
  border-radius: 17px;
  background: color-mix(in srgb, var(--text) 11%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent);
  transform: translateX(var(--ind-x, 0));
  transition: transform 420ms var(--spring), width 420ms var(--spring);
}
.tab-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--text-2);
  font-size: 0.88rem;
  font-weight: 600;
  transition: color 200ms var(--ease);
}
.tab-button:hover, .tab-button.is-active { color: var(--text); }
.tab-button.is-active .tab-icon { color: var(--accent); }
.tab-icon, .island__chev svg, .island__icon svg, .island__cta svg { flex: none; width: 18px; height: 18px; }
.island__month-label { white-space: nowrap; }
.island__month { display: flex; align-items: center; margin-inline: 4px; padding-inline: 4px; border-inline: 1px solid var(--rule-strong); }
.island__chev, .island__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.island__icon { width: 38px; height: 38px; }
.island__chev:hover, .island__icon:hover, .island__icon[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.island__month-label {
  position: relative;
  min-width: 78px;
  height: 32px;
  padding: 3px 4px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.island__month-label.is-away { color: var(--accent-text); }
.island__month-label.is-away::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: var(--accent); }
.island__live {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 0.76rem;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 380ms var(--spring), opacity 220ms var(--ease), margin 380ms var(--spring);
}
.island__live strong { color: var(--text); font-family: var(--font-num); font-size: 1.04rem; font-weight: 800; line-height: 1; }
.island.shows-live .island__live { max-width: 150px; margin-inline: 8px 6px; opacity: 1; }
.island__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  margin-left: 2px;
  padding: 0 7px 0 11px;
  border: 0;
  border-radius: 17px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.88rem;
  transition: filter 160ms var(--ease);
}
.island__cta:hover { filter: brightness(1.08); }
.island__cta svg { stroke-width: 2; transition: transform 320ms var(--spring); }
.island__cta[aria-expanded="true"] svg { transform: rotate(45deg); }
.island__cta kbd { background: color-mix(in srgb, var(--accent-ink) 14%, transparent); }
.island__badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 0.66rem/16px var(--font-fig); }

.island__activity { display: flex; align-items: baseline; gap: 10px; padding: 0 16px 11px; font-size: 0.86rem; }
.island__activity strong { font-family: var(--font-num); font-size: 1.08rem; font-weight: 800; line-height: 1; }
.island__activity span { color: var(--text-2); }

.island__sheet-inner { display: grid; gap: 10px; padding: 0 14px 14px; }
.island__sheet-head { display: flex; align-items: center; gap: 10px; padding-block: 10px 2px; border-top: 1px solid var(--rule-strong); }
.island__sheet-head strong { font-size: 0.92rem; }
.island__sheet-head span { flex: 1; color: var(--text-2); font-size: 0.8rem; }
.island__sheet .island__amount {
  min-height: 70px;
  padding: 8px 14px 0;
  border: 0;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  font-family: var(--font-num);
  font-size: 2.4rem;
  letter-spacing: 0.01em;
}
.island__sheet .island__concept { border: 0; background: color-mix(in srgb, var(--text) 7%, transparent); }
.island__bags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* Bolsas como cartuchos de 8 bits: su monito pixel y, al elegirla, se levanta con sombra dura. */
.island__bag {
  --bag: var(--bag-wants);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "sprite name" "sprite room";
  column-gap: 10px;
  align-items: center;
  padding: 8px 12px 8px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
  cursor: pointer;
  transition: background 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease);
}
.island__bag--needs { --bag: var(--bag-needs); }
.island__bag--savings { --bag: var(--bag-savings); }
.island__bag input, .island__when input { position: absolute; opacity: 0; pointer-events: none; }
.island__bag-sprite { grid-area: sprite; display: grid; place-items: center; width: 34px; height: 34px; background: color-mix(in srgb, var(--bag) 14%, transparent); clip-path: var(--pixel-corners); }
.island__bag-sprite svg { opacity: 0.7; transition: opacity 160ms var(--ease); }
.island__bag span { grid-area: name; font-weight: 600; font-size: 0.88rem; }
.island__bag small { grid-area: room; color: var(--text-2); font: 800 0.8rem/1.25 var(--font-num); letter-spacing: 0.02em; }
.island__bag:hover { background: color-mix(in srgb, var(--bag) 10%, transparent); }
.island__bag:has(input:checked) { background: color-mix(in srgb, var(--bag) 22%, transparent); box-shadow: 0 3px 0 color-mix(in srgb, var(--bag) 65%, #000); transform: translateY(-2px); }
.island__bag:has(input:checked) .island__bag-sprite svg { opacity: 1; animation: pixel-hop 320ms steps(3); }
.island__bag:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes pixel-hop { 50% { transform: translateY(-3px); } }

/* Veredicto: una línea y un monito pixel que se pone nervioso, se desespera o llora. */
.island__verdict {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 10px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  clip-path: var(--pixel-corners);
  transition: background 200ms var(--ease);
}
.island__verdict[data-status="green"] { background: color-mix(in srgb, var(--good) 11%, transparent); }
.island__verdict[data-status="yellow"] { background: var(--warn-soft); }
.island__verdict[data-status="red"] { background: var(--bad-soft); }
.island__mood { display: grid; place-items: center; width: 36px; height: 32px; }
.island__mood svg { animation: pixel-hop 320ms steps(3); }
.island__verdict[data-mood="moodNervous"] .island__mood svg { animation: mood-shake 900ms steps(2) infinite; }
.island__verdict[data-mood="moodDesperate"] .island__mood svg { animation: mood-shake 420ms steps(2) infinite; }
.island__verdict[data-mood="moodCrying"] .island__mood svg { animation: mood-sob 700ms steps(2) infinite; }
@keyframes mood-shake { 50% { transform: translateX(2px); } }
@keyframes mood-sob { 50% { transform: translateY(2px); } }
.island__verdict p { margin: 0; color: var(--text); font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.island__verdict[data-status="red"] p { color: var(--bad); }
.island__verdict dl { display: flex; gap: 16px; margin: 0; }
.island__verdict dl div { display: grid; text-align: right; }
.island__verdict dt { color: var(--text-3); font-size: 0.7rem; white-space: nowrap; }
.island__verdict dd { margin: 0; font-family: var(--font-num); font-size: 1.04rem; line-height: 1.1; }
.island__sheet-foot { display: flex; align-items: center; gap: 10px; }
.island__when { display: inline-flex; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.island__when label { display: block; position: relative; }
.island__when span { display: block; padding: 5px 13px; border-radius: 9px; color: var(--text-2); font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.island__when label:has(input:checked) span { background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); }
.island__when label:has(input:focus-visible) span { outline: 2px solid var(--accent); }
.island__keys { flex: 1; color: var(--text-3); font-size: 0.74rem; text-align: right; }
.island__save { min-height: 42px; min-width: 140px; }
.island__error { color: var(--bad); font-size: 0.82rem; }
.island__error:empty { display: none; }

/* Ajustes */
.settings-stack { position: relative; }
.settings-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: -5px;
  display: flex;
  flex-direction: column;
  width: 316px;
  max-height: calc(100vh - 90px);
  overflow: hidden;
  border-radius: 16px;
  animation: drop-in 220ms var(--ease);
}
@keyframes drop-in { from { transform: translateY(-6px) scale(0.98); } }
.settings-menu > .settings-menu__scroll { display: grid; gap: 14px; min-height: 0; padding: 16px; overflow: auto; overscroll-behavior: contain; }
/* El vidrio vive en el contenedor fijo y sólo el contenido se desplaza; así el fondo nunca se queda atrás. */
.settings-menu__title { font-size: 1rem; font-weight: 600; }
.theme-inline-toggle { display: flex; align-items: center; justify-content: space-between; color: var(--text); font-size: 0.9rem; cursor: pointer; }
.theme-switch-input { position: absolute; opacity: 0; }
.theme-switch-track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: background 180ms var(--ease); }
.theme-switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 240ms var(--spring); }
.theme-switch-input:checked + .theme-switch-track { background: var(--accent); }
.theme-switch-input:checked + .theme-switch-track .theme-switch-thumb { transform: translateX(18px); background: var(--accent-ink); }
.theme-switch-input:focus-visible + .theme-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.accent-color-picker { display: grid; gap: 8px; }
/* Calcu: pantallita pixel y teclas de 8 bits. Se arrastra por arriba y se puede fijar encima de otras apps. */
.calc { position: fixed; top: 84px; right: 24px; z-index: 55; display: grid; gap: 10px; width: 268px; padding: 12px; border-radius: 18px; animation: drop-in 220ms var(--ease); }
.calc[hidden] { display: none; }
.calc__head { display: flex; align-items: center; gap: 6px; cursor: grab; user-select: none; touch-action: none; }
.calc.is-dragging .calc__head { cursor: grabbing; }
.calc__head strong { flex: 1; font: 500 1rem/1 var(--font-pixel); letter-spacing: 0.04em; }
.calc__grip { width: 14px; height: 10px; background: radial-gradient(circle, var(--text-3) 1px, transparent 1.5px) 0 0 / 5px 5px; }
.calc__icon { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); cursor: pointer; }
.calc__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.calc__icon:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.calc__icon[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.calc__icon[hidden] { display: none; }
.calc__screen { display: grid; justify-items: end; align-content: end; gap: 4px; min-height: 76px; padding: 10px 12px; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 4%, transparent) 0 1px, transparent 1px 3px), var(--sunken); clip-path: var(--pixel-corners); }
.calc__expr { max-width: 100%; min-height: 1.1em; overflow: hidden; color: var(--text-3); font: 700 0.86rem/1.1 var(--font-num); white-space: nowrap; }
.calc__value { max-width: 100%; overflow: hidden; color: var(--text); font: 800 2.2rem/1 var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.calc__key { height: 44px; border: 0; border-radius: 6px; background: var(--raised); color: var(--text); font: 700 1.05rem/1 var(--font-num); cursor: pointer; box-shadow: 0 3px 0 color-mix(in srgb, var(--raised) 50%, #000); transition: transform 70ms var(--ease), box-shadow 70ms var(--ease); }
.calc__key:hover { filter: brightness(1.1); }
.calc__key:active, .calc__key.is-pressed { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--raised) 50%, #000); }
.calc__key--fn { color: var(--text-2); }
.calc__key--op { --key: var(--accent); background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 45%, #000); }
.calc__key--eq { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.calc__key--zero { grid-column: span 2; }
.calc__use { width: 100%; }
body.calc-pip { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--text); font-family: var(--font-ui); }
.calc.is-pinned { position: static; width: auto; min-height: 100vh; border-radius: 0; animation: none; }
.calc.is-pinned::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
.calc.is-pinned .calc__grip { display: none; }
.calc.is-pinned .calc__head { cursor: default; }
@media (max-width: 700px) {
  .calc { inset: auto 12px calc(84px + env(safe-area-inset-bottom)) 12px; width: auto; }
  .calc__head { cursor: default; }
}
/* Fijo o variable: de dónde sale el dinero que reparte la regla. */
.basis-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 10px; background: var(--sunken); }
.basis-switch label { position: relative; display: grid; place-items: center; min-height: 34px; border-radius: 8px; color: var(--text-2); font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease); }
.basis-switch input { position: absolute; opacity: 0; pointer-events: none; }
.basis-switch label:has(input:checked) { background: var(--raised-2); color: var(--text); box-shadow: 0 2px 0 color-mix(in srgb, var(--raised-2) 50%, #000); }
.basis-switch label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.wallet-basis { color: var(--text-2); font-size: 0.86rem; line-height: 1.45; }
.wallet-basis strong { color: var(--text); font: 800 1.5rem/1.1 var(--font-num); display: block; }
.onboarding-choice { display: grid; gap: 8px; }
.onboarding-choice label { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--raised); cursor: pointer; }
.onboarding-choice label:has(input:checked) { background: var(--accent-soft); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.onboarding-choice input { position: absolute; opacity: 0; }
.onboarding-choice small { color: var(--text-2); font-size: 0.8rem; }
/* Sello de pagado: tinta rotada con esquinas pixel. */
.paid-stamp { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 2px solid var(--good); color: var(--good); font: 500 0.78rem/1 var(--font-pixel); letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-4deg); clip-path: var(--pixel-corners); }
.subscription-actions .paid-stamp, .plan-payment-row .paid-stamp { flex: none; width: max-content; }
.pace-step__note { padding: 0 10px; color: var(--text-2); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.allowance-empty { padding: 16px 4px; color: var(--text-2); }
/* Pagos: resumen del mes, lista por fecha y una sola acción por renglón. */
.pay { display: grid; gap: 10px; }
.pay__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pay__total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin: 0; color: var(--text-2); font-size: 0.88rem; }
.pay__total strong { color: var(--text); font: 800 1.9rem/1 var(--font-num); }
.pay__head .button svg { width: 16px; height: 16px; }
.pay__bar { height: 8px; border-radius: 2px; background: var(--sunken); overflow: hidden; }
.pay__bar i { display: block; height: 100%; background: var(--good); transition: width 600ms var(--ease); }
.pay__list { display: grid; gap: 6px; margin-top: 4px; }
.pay-group h5 { margin: 10px 0 2px; color: var(--text-2); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; }
.pay-group--late h5 { color: var(--warn); }
.pay-group--soon h5 { color: var(--accent-text); }
.pay-group--paid h5 { color: var(--good); }
.pay-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--rule); }
.pay-row__icon { display: grid; place-items: center; width: 38px; height: 38px; background: var(--raised); clip-path: var(--pixel-corners); overflow: hidden; }
.pay-row__icon img, .pay__icon-pick img { width: 100%; height: 100%; object-fit: cover; }
.pay-row__mono { color: var(--text-2); font: 800 0.8rem/1 var(--font-num); }
.pay-row__main { display: grid; gap: 1px; min-width: 0; padding: 4px 6px; margin: -4px -6px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.pay-row__main:hover, .pay-row__main:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent); }
.pay-row__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.pay-row__main span { overflow: hidden; color: var(--text-2); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.pay-row__amount { font: 800 1.05rem/1 var(--font-num); }
.pay-row__action { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 128px; }
.pay-row--paid { opacity: 0.72; }
.pay-row--paid .pay-row__amount { text-decoration: line-through; text-decoration-thickness: 2px; }
.pay-row--late .pay-row__main span { color: var(--warn); }
.pay__form { display: grid; gap: 12px; padding: 14px; border-radius: var(--r); background: var(--raised); }
.pay__form-head { display: flex; align-items: center; justify-content: space-between; }
.pay__form-main { display: grid; grid-template-columns: 52px minmax(0, 2fr) minmax(0, 1fr); align-items: end; gap: 10px; }
.pay__form label { display: grid; gap: 4px; color: var(--text-2); font-size: 0.8rem; font-weight: 600; }
.pay__form label small { color: var(--text-3); font-weight: 500; }
.pay__icon-pick { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; background: var(--sunken); cursor: pointer; overflow: hidden; clip-path: var(--pixel-corners); }
.pay__icon-pick:hover, .pay__icon-pick[aria-expanded="true"] { background: var(--accent-soft); }
.pay__icons { width: 300px; gap: 10px; }
.pay__icons[hidden] { display: none; }
.pay__icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.pay__icon-option { display: grid; place-items: center; height: 42px; border: 0; background: var(--sunken); cursor: pointer; clip-path: var(--pixel-corners); }
.pay__icon-option:hover { background: color-mix(in srgb, var(--accent) 16%, var(--sunken)); }
.pay__icon-option[aria-checked="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.pay__drop { position: relative; display: block !important; padding: 12px; border: 2px dashed var(--rule-strong); border-radius: var(--r); color: var(--text-2); font-weight: 500 !important; text-align: center; cursor: pointer; }
.pay__drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.pay__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pay__drop strong { color: var(--accent-text); }
.pay__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pay__chips > span { min-width: 34px; color: var(--text-3); font-size: 0.8rem; }
.pay__chips label { display: block; position: relative; cursor: pointer; }
.pay__chips input { position: absolute; opacity: 0; pointer-events: none; }
.pay__chips label span { display: block; padding: 6px 12px; border-radius: 999px; background: var(--sunken); color: var(--text-2); font-size: 0.84rem; font-weight: 700; }
.pay__chips label:has(input:checked) span { background: var(--accent-soft); color: var(--accent-text); }
.pay__chips label:has(input:focus-visible) span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pay__form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pay__form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.pay__form-actions .text-button--danger { margin-right: auto; }
.pay__radar { margin-top: 6px; border-radius: var(--r); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pay__radar[hidden] { display: none; }
.pay__radar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: transparent; color: var(--text); font-size: 0.86rem; text-align: left; cursor: pointer; }
.pay__radar-head strong { color: var(--accent-text); white-space: nowrap; }
.pay__radar .subscription-list { padding: 0 12px 10px; }
@media (max-width: 700px) {
  .pay-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .pay-row__action { grid-column: 2 / -1; justify-content: flex-start; min-width: 0; }
  .pay__form-main { grid-template-columns: 52px minmax(0, 1fr); }
  .pay__form-main label:last-child { grid-column: 1 / -1; }
}
/* Switch bajo "Puedes gastar hoy". */
.spend-trigger { display: inline-block; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dashed color-mix(in srgb, var(--text) 25%, transparent); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.spend-trigger:hover, .spend-trigger[aria-expanded="true"] { text-decoration-color: var(--accent); }
.spend-breakdown { width: 320px; }
.spend-breakdown__rest { display: grid; margin: 0; padding: 0; list-style: none; }
.spend-breakdown__rest:empty { display: none; }
.spend-breakdown__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 2px solid var(--rule-strong); font-weight: 700; }
.spend-breakdown__total strong { color: var(--accent-text); font: 800 1.2rem/1 var(--font-num); }
.spend-switch { display: flex; align-items: center; gap: 10px; margin-top: 10px; cursor: pointer; }
.spend-switch > span:last-child { display: grid; gap: 1px; }
.spend-switch strong { font-size: 0.86rem; }
.spend-switch small { color: var(--text-2); font-size: 0.76rem; }
.spend-switch .theme-switch-track { flex: none; }
/* Pagaste con: cada cuenta con lo que tiene (o lo que le quedaría). */
.island__from { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.island__from label { position: relative; display: grid; padding: 4px 12px; border-radius: 8px; cursor: pointer; transition: background 160ms var(--ease); }
.island__from input { position: absolute; opacity: 0; pointer-events: none; }
.island__from span { font-size: 0.82rem; font-weight: 700; }
.island__from small { color: var(--text-2); font: 700 0.74rem/1.2 var(--font-num); white-space: nowrap; }
.island__from label:has(input:checked) { background: var(--raised-2); box-shadow: 0 2px 0 color-mix(in srgb, var(--raised-2) 50%, #000); }
.island__from label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Recorrido: un reflector sobre la pieza real y una tarjeta que la explica. */
.tour { position: fixed; inset: 0; z-index: 80; }
.tour[hidden] { display: none; }
.tour__spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(8, 8, 7, 0.62), 0 0 0 2px var(--accent); pointer-events: none; transition: left 380ms var(--spring), top 380ms var(--spring), width 380ms var(--spring), height 380ms var(--spring); }
html.heda-theme-light .tour__spot { box-shadow: 0 0 0 9999px rgba(60, 54, 40, 0.42), 0 0 0 2px var(--accent); }
.tour__card { position: fixed; z-index: 1; display: grid; gap: 8px; width: 320px; padding: 16px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule-strong), 0 18px 40px rgba(0, 0, 0, 0.35); transition: left 380ms var(--spring), top 380ms var(--spring); }
.tour__meta { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 0.8rem; font-weight: 700; }
.tour__mascot { display: grid; place-items: center; width: 28px; height: 28px; background: transparent; color: var(--accent-ink); font: 600 1.1rem/1 var(--font-pixel); clip-path: var(--pixel-corners); animation: pixel-hop 900ms steps(3) infinite; }
.tour__card h3 { font-size: 1.08rem; }
.tour__card p { color: var(--text-2); font-size: 0.9rem; line-height: 1.45; }
.tour__actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.tour__actions [data-tour="skip"] { margin-right: auto; color: var(--text-3); }
.tour__actions [hidden] { display: none; }
.financial-health-kpi[data-empty="true"] .pixel-hearts, .board-stat--health[data-empty="true"] .pixel-hearts, .board-stat--health[data-empty="true"] .health-why { display: none; }
.confetti { position: fixed; inset: 0; z-index: 90; width: 100vw; height: 100vh; pointer-events: none; image-rendering: pixelated; }
.birthday-field { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1.6fr; gap: 6px; }
.settings-profile #settingsSaveProfile { grid-row: 3; grid-column: 1 / -1; }
.birthday-field span { grid-column: 1 / -1; color: var(--text-2); font-size: 0.8rem; font-weight: 600; }
.sound-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -4px; }
.sound-samples span { margin-right: 2px; color: var(--text-3); font-size: 0.76rem; }
.sound-samples button { min-height: 28px; padding: 0 9px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.sound-samples button:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.sound-samples button::before { content: "♪ "; color: var(--accent-text); }
.accent-color-label, .settings-local-data__label { color: var(--text-2); font-size: 0.8rem; font-weight: 600; }
.accent-swatches { display: flex; gap: 8px; }
.accent-swatch { --swatch: #ff8c1a; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--swatch); transition: transform 180ms var(--spring); }
.accent-swatch:hover { transform: scale(1.1); }
.accent-swatch.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--swatch); }
.accent-swatch[data-accent="lima"] { --swatch: #c6ec3c; }
.accent-swatch[data-accent="cielo"] { --swatch: #5ec8ff; }
.accent-swatch[data-accent="hueso"] { --swatch: #ece7dc; }
.accent-swatch[data-accent="mora"] { --swatch: #b18cff; }
.accent-swatch[data-accent="iridiscente"] { background: conic-gradient(from 30deg, #3fae5a, #b14dff, #2f6bd8, #9c2f6b, #6b8f1f, #3fae5a); --swatch: #b14dff; }
html.heda-theme-light .accent-swatch[data-accent="hueso"] { --swatch: #171612; }
.settings-profile { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
.settings-menu input[type="text"] { border-color: transparent; background: color-mix(in srgb, var(--text) 8%, transparent); }
.settings-menu-divider { height: 1px; background: var(--rule-strong); }
.settings-local-data { display: grid; gap: 8px; }
.settings-local-data__copy, .settings-privacy, .settings-status { color: var(--text-2); font-size: 0.8rem; }
.settings-status:empty { display: none; }
.settings-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.settings-actions button, .settings-actions a {
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.settings-actions button:hover, .settings-actions a:hover { background: color-mix(in srgb, var(--text) 14%, transparent); }
.settings-file-input { display: none; }

/* ───────────── Lienzo ───────────── */
.shell { position: relative; z-index: 1; width: 100%; padding: 74px clamp(14px, 1.6vw, 28px) 88px; }
.tab-panel { display: none; }
.tab-panel.is-active { display: grid; gap: 26px; animation: panel-in 260ms var(--ease); }
@keyframes panel-in { from { opacity: 0; } }

/* ───────────── Movimiento: nada aparece de golpe ─────────────
   - Lo que se despliega (formularios, listas) crece de alto en vez de empujar de un brinco.
   - Las vistas que cambian (pestañas, pasos) entran con un deslizamiento corto.
   - Lo que es vidrio sólo se mueve, nunca se desvanece: con opacidad el desenfoque "brinca" al final. */
:root { interpolate-size: allow-keywords; }
.expand { overflow: clip; transition: height 320ms var(--ease), opacity 240ms var(--ease), padding-block 320ms var(--ease), margin-block 320ms var(--ease), display 320ms allow-discrete; }
.expand[hidden] { display: none; height: 0; opacity: 0; padding-block: 0; margin-block: 0; transition-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
@starting-style { .expand:not([hidden]) { height: 0; opacity: 0; padding-block: 0; margin-block: 0; } }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }
.workspace-panel.is-active, .workspace-inner-panel.is-active, .onboarding-fields > *, #onboardingTitle, .wallet-basis:not([hidden]), .income-fields:not([hidden]) { animation: view-in 260ms var(--ease); }
.pay__form-main, .pay__chips, .pay__form-row { transition: opacity 200ms var(--ease); }

/* Índice de la libreta: pestañas de texto subrayadas. */
.workspace-section { display: grid; gap: 16px; }
.workspace-toolbar { display: flex; border-bottom: 1px solid var(--rule); }
.workspace-toolbar-left { display: flex; }
.workspace-subtabs, .workspace-inner-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.workspace-tab, .workspace-inner-tab {
  position: relative;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 0.92rem;
  font-weight: 600;
  transition: color 160ms var(--ease);
}
.workspace-tab::after, .workspace-inner-tab::after {
  content: "";
  position: absolute;
  inset: auto 12px -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 260ms var(--ease);
}
.workspace-tab:hover, .workspace-inner-tab:hover, .workspace-tab.is-active, .workspace-inner-tab.is-active { color: var(--text); }
.workspace-tab.is-active::after, .workspace-inner-tab.is-active::after { transform: scaleX(1); }
.workspace-inner-tabs { border-bottom: 1px solid var(--rule); }
.workspace-inner-tab { min-height: 34px; font-size: 0.86rem; }
.inner-count:not(:empty) { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--raised); color: var(--text-2); font: 700 0.7rem/1.4 var(--font-num); }
.workspace-panel, .workspace-inner-panel { display: none; }
.workspace-panel.is-active, .workspace-inner-panel.is-active { display: grid; gap: 16px; }
.workspace-panels, .today-workspace-panels, .workspace-inner-panels { display: grid; }

/* Hojas: superficie mate, esquina corta, sin sombra. */
.panel, .today-command-card, .sim-card, .plan-brief, .allowance-section, .plan-month-section, .cfo-card, .cfo-vault-panel {
  position: relative;
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--r);
  background: var(--surface);
}
.section-heading, .workspace-card-head, .cfo-card-head, .rule-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.section-heading > div, .workspace-card-head > div { display: grid; gap: 3px; min-width: 0; }
.section-heading--compact h4, .section-heading--compact h3 { font-size: 1rem; }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* Renglones de libreta: separados por línea fina, tono en hover. */
.plan-payment-list, .transaction-list, .rule-list, .statement-list, .category-report, .bill-list, .inflow-list, .subscription-list, .decision-list, .cfo-list, .recommendations { display: grid; }
/* Filas de lista: línea fina abajo y tono al pasar el mouse. */
.plan-payment-row, .transaction-row, .rule-card, .statement-row, .category-report-row, .bill-row, .inflow-row {
  display: grid;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 8px;
  border-bottom: 1px solid var(--rule);
  transition: background 140ms var(--ease);
}
:is(.plan-payment-row, .transaction-row, .rule-card, .statement-row, .category-report-row):hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
:is(.plan-payment-row, .transaction-row, .rule-card, .category-report-row, .statement-row) > div { display: grid; gap: 1px; min-width: 0; }
:is(.plan-payment-row, .transaction-row, .rule-card, .category-report-row, .statement-row) span { color: var(--text-2); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.plan-payment-row, .transaction-row) time { color: var(--text-2); font-size: 0.8rem; }
:is(.plan-payment-row, .category-report-row) > strong:last-of-type,
.transaction-row .amount { font-family: var(--font-fig); font-size: 1rem; font-weight: 700; text-align: right; }

/* ───────────── Hoy: el tablero ───────────── */
/* La fila del tablero mide lo que mide el tablero; lo que sobre de la columna izquierda va a la fila de abajo. */
.tab-panel[data-tab-panel="hoy"].is-active { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; row-gap: 20px; align-items: start; }
.today-cockpit { display: contents; }
.tab-panel[data-tab-panel="hoy"] .today-board { grid-column: 1; grid-row: 1 / span 2; }
.tab-panel[data-tab-panel="hoy"] .month-board { grid-column: 2; grid-row: 1; }
.today-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "spend" "strip";
  row-gap: 18px;
}
.today-board__head { grid-area: head; display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.today-board__head p { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-2); }
.today-board__head #appGreeting { color: var(--text); font-weight: 600; }
.today-board__head #todayDateLabel::before { content: "—"; margin-right: 8px; color: var(--text-3); }
.today-board__head > span { color: var(--text-3); font-size: 0.78rem; }
.today-board__spend { grid-area: spend; display: grid; align-content: center; gap: 2px; }
.today-board__label { color: var(--text-2); font-size: 1rem; font-weight: 600; }
.today-board__value {
  font-family: var(--font-num);
  font-size: clamp(3rem, 4.2vw, 4.4rem);
  letter-spacing: -0.03em;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.today-board__copy { color: var(--text-2); font-size: 0.92rem; }


.today-board__strip { grid-area: strip; display: grid; border-top: 1px solid var(--rule); }
.board-stat { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 14px; padding: 12px 4px; }
.board-stat + .board-stat { border-top: 1px solid var(--rule); }
.board-stat > span { grid-column: 1 / -1; color: var(--text-2); font-size: 0.8rem; }
.board-stat > strong { font-family: var(--font-num); font-size: 1.6rem; font-weight: 800; line-height: 1; }
.board-stat > small { color: var(--text-2); font-size: 0.82rem; }
.board-stat--health { grid-template-columns: 1fr; }
.board-stat--health > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 14px; }
.board-stat--health > div:first-child > span { grid-column: 1 / -1; color: var(--text-2); font-size: 0.8rem; }
.board-stat--health strong { font-family: var(--font-num); font-size: 1.6rem; font-weight: 800; line-height: 1; }
.board-stat--health small { color: var(--text-2); font-size: 0.82rem; }
#financialHealthKpi[data-status="yellow"] strong { color: var(--warn); }
#financialHealthKpi[data-status="red"] strong { color: var(--bad); }
.health-why { grid-column: 1 / -1; justify-self: start; margin-left: -8px; }
.health-breakdown { position: fixed; z-index: 50; display: grid; gap: 10px; width: 380px; overflow: auto; overscroll-behavior: contain; padding: 16px; border-radius: 14px; animation: drop-in 220ms var(--ease); }
.health-breakdown h3 { font-size: 1rem; }
.health-breakdown ul { display: grid; margin: 0; padding: 0; list-style: none; }
.health-breakdown li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--rule-strong); }
.health-breakdown li em { color: var(--bad); font: 800 0.92rem/1 var(--font-num); font-style: normal; }
.health-breakdown li p { grid-column: 1 / -1; color: var(--text-2); font-size: 0.82rem; }
.health-breakdown__base { color: var(--text-2); font-size: 0.82rem; }
.health-breakdown__total { font-weight: 600; }

/* ───────────── Hoy: el mes como lienzo ───────────── */
html { --lane-income: #5ec8ff; }
html.heda-theme-light { --lane-income: #005f8f; }
.month-board { display: grid; gap: 12px; min-width: 0; padding: 14px 16px 16px; border-radius: var(--r); background: var(--surface); }
.month-board__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.month-board__head h2 { font-size: 1rem; }
.month-season { flex: none; align-self: center; margin-right: -6px; }
.month-season[hidden] { display: none; }
.month-season + div { margin-right: auto; }
/* Vistas de Hoy dentro del tablero: Calendario, Cartera, Pagos, Ingresos y Cashflow. */
.month-board__tabs { flex: none; align-self: flex-start; margin-left: auto; }
.month-board__head > div:not(.month-board__tabs) { flex: 1 1 320px; min-width: 0; }
.month-board__head { align-items: flex-start; }
.month-board__head .month-board__legend { margin-top: 8px; }
.month-board:not([data-active-workspace="calendar"]) .month-board__legend { display: none; }
.month-board > .workspace-panel.is-active, .month-board .today-command-section { display: grid; gap: 12px; }
.month-board .today-command-section > .today-workspace-panels > .workspace-panel:not(.is-active) { display: none; }
.month-season .pixel-sprite { display: block; animation: pixel-hop 900ms steps(3) 1; }
.season-corner { position: fixed; top: 0; left: 0; z-index: 0; width: 200px; height: 200px; color: var(--text); opacity: 0.2; pointer-events: none; }
.season-corner[hidden] { display: none; }
.season-corner .season-spider { animation: spider-bob 3.6s ease-in-out infinite; }
@keyframes spider-bob { 50% { transform: translateY(14px); } }
.month-board__head p { color: var(--text-2); font-size: 0.82rem; }
.month-board__head p:first-letter { text-transform: uppercase; }
.month-board__legend { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; color: var(--text-3) !important; font-size: 0.76rem !important; }
.lane-dot { width: 8px; height: 8px; margin-left: 6px; border-radius: 2px; background: var(--lane); }
.lane-dot--income, .mb-lane--income, .mb-cell--income { --lane: var(--lane-income); }
.lane-dot--bills, .mb-lane--bills, .mb-cell--bills { --lane: var(--text-2); }
.lane-dot--needs, .mb-lane--needs, .mb-cell--needs { --lane: var(--bag-needs); }
.lane-dot--wants, .mb-lane--wants, .mb-cell--wants { --lane: var(--bag-wants); }
.lane-dot--savings, .mb-lane--savings, .mb-cell--savings { --lane: var(--bag-savings); }
.month-board__grid {
  display: grid;
  grid-template-columns: 118px repeat(var(--days, 30), minmax(28px, 1fr));
  overflow-x: auto;
  border-top: 1px solid var(--rule);
}
.mb-corner, .mb-day { position: sticky; top: 0; }
.mb-day { display: grid; justify-items: center; padding: 6px 0 5px; border-left: 1px solid var(--rule); color: var(--text-3); }
.mb-day span { font: 500 0.62rem/1.2 var(--font-pixel); }
.mb-day strong { color: var(--text-2); font: 500 0.95rem/1 var(--font-pixel); }
.mb-day.is-weekend { background: color-mix(in srgb, var(--text) 2.5%, transparent); }
.mb-day.is-today { background: var(--accent); color: var(--accent-ink); border-radius: 6px 6px 0 0; }
.mb-day.is-today strong { color: var(--accent-ink); }
.mb-lane { display: grid; align-content: center; gap: 0; padding: 6px 10px 6px 0; border-top: 1px solid var(--rule); }
.mb-lane span { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 0.82rem; font-weight: 600; }
.mb-lane span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--lane, var(--accent)); }
.mb-lane strong { font: 800 1rem/1 var(--font-num); }
.mb-lane small { color: var(--text-3); font-size: 0.68rem; }
.mb-lane--balance { --lane: var(--accent); }
.mb-balance { position: relative; height: 72px; border-top: 1px solid var(--rule); }
.mb-balance svg { width: 100%; height: 100%; overflow: visible; }
.mb-balance polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mb-balance.is-negative polyline { stroke: var(--bad); }
.month-board__zero { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.mb-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 50px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  background: transparent;
  color: var(--text);
  font: 800 0.72rem/1 var(--font-num);
  letter-spacing: -0.02em;
  transition: background 120ms var(--ease);
}
.mb-cell.is-weekend { background: color-mix(in srgb, var(--text) 2.5%, transparent); }
.mb-cell.is-today { background: var(--accent-soft); }
.mb-cell.is-monday, .mb-day.is-monday { border-left-color: var(--rule-strong); }
.mb-cell:hover { background: color-mix(in srgb, var(--lane) 16%, transparent); }
.mb-cell:not(.has-value):hover::after { content: "+"; color: var(--lane); font: 600 1rem/1 var(--font-ui); }
.mb-cell.has-value span {
  display: grid;
  place-items: center;
  width: calc(100% - 4px);
  height: calc(100% - 8px);
  border-radius: 4px;
  background: color-mix(in srgb, var(--lane) 22%, transparent);
  box-shadow: inset 0 -2px 0 var(--lane);
}
.mb-cell--bills.has-value span { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--lane) 18%, transparent) 0 3px, transparent 3px 6px); }
.mb-cell.is-past:not(.has-value) { color: var(--text-3); }
.mb-cell i { position: absolute; top: 3px; right: 3px; min-width: 13px; height: 13px; border-radius: 4px; background: var(--lane); color: var(--canvas); font: 600 0.58rem/13px var(--font-fig); font-style: normal; }

/* Globito de celda: vidrio, como todo lo que flota. */
.month-board { position: relative; }
.cell-popover { position: fixed; z-index: 50; overflow: auto; overscroll-behavior: contain; display: grid; gap: 10px; width: 260px; padding: 12px; border-radius: 12px; isolation: isolate; animation: drop-in 200ms var(--ease); }
.cell-popover::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--satin), var(--glass-fill); background-size: 160px 160px, auto; -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); box-shadow: inset 0 1px 0 var(--glass-top), inset 0 0 0 1px var(--glass-rim), var(--glass-shadow); }
.cell-popover header { display: flex; justify-content: space-between; gap: 8px; }
.cell-popover header span { color: var(--text-2); font-size: 0.8rem; }
.cell-popover ul { display: grid; margin: 0; padding: 0; list-style: none; }
.cell-popover li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--rule-strong); font-size: 0.86rem; }
.cell-popover li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Desglose de "Plan + canasta" en Plan. */
.allowance-section { position: relative; }
.breakdown-trigger {
  justify-self: start;
  padding: 0 0 1px;
  border: 0;
  border-bottom: 1px dashed var(--text-3);
  background: transparent;
  color: var(--text);
  font: 800 1.2rem/1.1 var(--font-num);
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.breakdown-trigger:hover, .breakdown-trigger[aria-expanded="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.plan-breakdown { width: 320px; }
.cell-tip { width: auto; min-width: 190px; max-width: 280px; gap: 6px; padding: 10px 12px; pointer-events: none; animation: none; }
.cell-tip li { grid-template-columns: 1fr auto; padding: 4px 0; }
.cell-tip footer { display: flex; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--rule-strong); color: var(--text-2); font-size: 0.82rem; }
.cell-tip footer strong { color: var(--text); font-family: var(--font-num); }
.cell-tip[data-lane="income"] header strong { color: var(--lane-income); }
.plan-breakdown__title { display: flex; justify-content: space-between; align-items: baseline; }
.plan-breakdown__title span { font: 800 1.1rem/1 var(--font-num); }
.plan-breakdown section { display: grid; gap: 2px; }
.plan-breakdown section > header { display: flex; justify-content: space-between; padding-top: 6px; color: var(--text-2); font-size: 0.76rem; font-weight: 700; }
.plan-breakdown li { grid-template-columns: 1fr auto auto; }
.plan-breakdown li time { color: var(--text-3); font-size: 0.74rem; }
.plan-breakdown__more, .plan-breakdown__empty { color: var(--text-3); font-size: 0.78rem; }
.plan-breakdown__board { justify-self: start; }
.plan-breakdown li > .plan-breakdown__cat { grid-column: 1 / -1; }
.plan-breakdown__cat, .cell-popover__edit { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; margin: -3px -4px; padding: 3px 4px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.plan-breakdown__cat:hover, .plan-breakdown__cat:focus-visible, .cell-popover__edit:hover, .cell-popover__edit:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); }
.plan-breakdown__cat span, .cell-popover__edit span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-breakdown__cat time { color: var(--text-3); font-size: 0.74rem; }
.cell-popover li > .cell-popover__edit { grid-column: 1 / 3; }
.cell-popover__edit svg { width: 13px; height: 13px; color: var(--text-3); opacity: 0; transition: opacity 140ms var(--ease); }
.cell-popover__edit:hover svg, .cell-popover__edit:focus-visible svg { opacity: 1; }
@media (hover: none) { .cell-popover__edit svg { opacity: 1; } }
.island__sheet[data-editing="true"] .island__recent { display: none; }

/* Semáforo: sumar o no los pagos mensuales. */
.allowance-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.plan-toggle { position: relative; display: inline-flex; }
.plan-toggle[hidden] { display: none; }
.plan-toggle .hint-bubble { left: auto; right: 0; max-width: 280px; transform: translateY(4px); }
.plan-toggle:hover .hint-bubble, .plan-toggle:focus-within .hint-bubble { visibility: visible; transform: none; transition-delay: 0s; }
.chip-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: var(--raised); color: var(--text); font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease); }
.chip-toggle:hover { background: var(--raised-2); }
.chip-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.chip-toggle__box { position: relative; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 3px; }
.chip-toggle[aria-pressed="true"] .chip-toggle__box { border-color: var(--accent); background: var(--accent); }
.chip-toggle[aria-pressed="true"] .chip-toggle__box::after { content: ""; position: absolute; left: 3px; top: 0; width: 3px; height: 7px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mb-lane.is-flash { animation: lane-flash 1.4s steps(4) 1; }
@keyframes lane-flash { 25%, 75% { background: var(--accent-soft); } }

/* Movimientos a lo ancho: filtros a la izquierda, libro a la derecha. */
[data-workspace-panel="explorer"] > .panel { grid-template-columns: 300px minmax(0, 1fr); align-items: start; column-gap: 24px; }
[data-workspace-panel="explorer"] .section-heading { grid-column: 1 / -1; }
[data-workspace-panel="explorer"] .filters { grid-column: 1; grid-template-columns: 1fr; }
[data-workspace-panel="explorer"] .category-cloud { grid-column: 1; }
[data-workspace-panel="explorer"] .transaction-list { grid-column: 2; grid-row: 2 / span 3; }

/* ───────────── Hoy: cartera ───────────── */
.today-command-section { display: grid; gap: 16px; }
.wallet-cockpit-head { display: grid; gap: 12px; }
.wallet-head-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.wallet-source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: var(--r); }
.wallet-source-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; color: var(--text); cursor: text; transition: background 140ms var(--ease); }
.wallet-source-card + .wallet-source-card { border-left: 1px solid var(--rule); }
.wallet-source-card:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.wallet-source-card:focus-within { background: var(--accent-soft); }
.wallet-source-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--raised-2); color: var(--text-2); }
.wallet-source-icon svg, .wallet-edit-icon { width: 17px; height: 17px; }
.wallet-source-body { display: grid; min-width: 0; }
.wallet-source-body > span:first-child { color: var(--text-2); font-size: 0.78rem; }
.wallet-money-input { display: flex; align-items: center; gap: 2px; font-family: var(--font-num); font-size: 1.28rem; line-height: 1; }
.wallet-money-input input { min-height: 0; height: auto; padding: 0; border: 0; background: transparent; font: inherit; box-shadow: none !important; }
.wallet-edit-icon { flex: none; color: var(--text-3); opacity: 0; }
.wallet-source-card:hover .wallet-edit-icon { opacity: 1; }

.command-metric { font-family: var(--font-num); font-size: 1.6rem; font-weight: 800; line-height: 1; }
.inflow-form, .bill-form, .subscription-form, .rule-form, .statement-import-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.rule-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr) auto auto; }
.statement-import-form { grid-template-columns: minmax(0, 1fr) auto; }
.checkline, .mini-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--text-2); font-size: 0.84rem; }
.quick-add-details { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.quick-add-details summary { padding: 9px 2px; color: var(--text-2); font-size: 0.84rem; font-weight: 600; cursor: pointer; list-style: none; }
.quick-add-details summary::-webkit-details-marker { display: none; }
.quick-add-details summary::after { content: "+"; float: right; }
.quick-add-details[open] summary::after { content: "–"; }
.subscription-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 12px; }
.bill-row, .inflow-row { grid-template-columns: minmax(0, 1.3fr) 110px 140px minmax(0, 1fr) auto auto; }
.bill-row span, .inflow-row span { color: var(--text-2); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-row input, .inflow-row input { min-height: 34px; }
.subscription-card { display: grid; gap: 10px; padding: 14px 4px; border-bottom: 1px solid var(--rule); }
.subscription-card__top { display: flex; justify-content: space-between; gap: 12px; }
.subscription-card__top p { color: var(--text-2); font-size: 0.8rem; }
.subscription-card__top strong { font-family: var(--font-fig); font-weight: 400; }
.subscription-edit-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr)); gap: 8px; }
.subscription-edit-grid input, .subscription-edit-grid select { min-height: 34px; }
.subscription-actions { display: flex; align-items: center; gap: 6px; }
.subscription-actions > span { flex: 1; color: var(--text-2); font-size: 0.82rem; }
.price-alert { padding: 8px 10px; border-radius: var(--r); background: var(--warn-soft); color: var(--warn); font-size: 0.82rem; }

/* Chips de categoría (Movimientos) */
.category-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.category-chip { min-height: 30px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 999px; background: transparent; color: var(--text); font-size: 0.8rem; font-weight: 600; transition: background 140ms var(--ease), border-color 140ms var(--ease); }
.category-chip:hover { background: var(--raised-2); border-color: var(--raised-2); }
.category-chip.is-active { border-color: var(--accent); color: var(--accent-text); }

/* ───────────── Hoy: cashflow ───────────── */
.cashflow-timeline { display: grid; gap: 14px; }
.cashflow-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cashflow-summary-card { display: grid; padding: 12px 14px; }
.cashflow-summary-card + .cashflow-summary-card { border-left: 1px solid var(--rule); }
.cashflow-summary-card span { color: var(--text-2); font-size: 0.78rem; }
.cashflow-summary-card strong { font-family: var(--font-num); font-size: 1.6rem; font-weight: 800; line-height: 1; }
.cashflow-summary-card small { color: var(--text-3); font-size: 0.74rem; }
.cashflow-summary-card--red strong { color: var(--bad); }
.cashflow-summary-card--yellow strong { color: var(--warn); }
.cashflow-flow-note { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 0.86rem; }
.cashflow-flow-note__dot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--good); }
.cashflow-flow-note--yellow .cashflow-flow-note__dot { background: var(--warn); }
.cashflow-flow-note--red .cashflow-flow-note__dot { background: var(--bad); }
.cashflow-list { display: grid; }
.cashflow-list__head, .cashflow-event { display: grid; grid-template-columns: 16px minmax(0, 1fr) 140px 140px; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--rule); }
.cashflow-list__head { color: var(--text-3); font-size: 0.74rem; font-weight: 600; }
.cashflow-list__head span:nth-child(n+3), .cashflow-event__amount, .cashflow-event__balance { text-align: right; }
.cashflow-event > div:nth-child(2) { display: grid; }
.cashflow-event span { color: var(--text-2); font-size: 0.78rem; }
.cashflow-event__marker { width: 8px; height: 8px; border-radius: 2px; background: var(--good); }
.cashflow-event--yellow .cashflow-event__marker { background: var(--warn); }
.cashflow-event--red .cashflow-event__marker { background: var(--bad); }
.cashflow-event__amount, .cashflow-event__balance { font-family: var(--font-fig); }
.cashflow-event__balance { color: var(--text-2); }

/* ───────────── Plan ───────────── */
.simulator-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; }
.plan-brief { align-content: end; }
.plan-brief h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.02em; }
.plan-brief p:not(.eyebrow) { color: var(--text-2); font-size: 0.88rem; }
.sim-card > label { display: flex; align-items: center; gap: 2px; color: var(--text); font-size: 0.9rem; font-weight: 600; }
.month-input-wrap input { font-weight: 600; }
.month-actions { display: flex; gap: 4px; }
.income-fields { display: grid; gap: 10px; }
.income-field { display: grid; gap: 5px; }
.sim-money-input { display: flex; align-items: center; gap: 4px; padding-left: 12px; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--sunken); }
.sim-money-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sim-money-input span { color: var(--text-3); }
.sim-money-input input { padding: 6px 4px 0; border: 0; background: transparent; font-family: var(--font-num); font-size: 1.28rem; box-shadow: none !important; }
.income-checkline { display: flex; gap: 8px; align-items: center; }
.checkmark { width: 7px; height: 7px; border-radius: 2px; background: var(--good); flex: none; }
.rule-heading h3 { font-family: var(--font-num); font-size: 1.76rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; }
.percent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.percent-grid label { min-width: 0; font-size: 0.72rem; overflow-wrap: anywhere; }
.percent-grid input { text-align: center; padding-top: 4px; font-family: var(--font-num); font-size: 1.12rem; }

.allowance-section { gap: 6px; }
.allowance-grid { display: grid; }
.allowance-card {
  --bag: var(--bag-wants);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.3fr);
  grid-template-areas: "top sentence numbers" "track track track" "note note note";
  gap: 8px 22px;
  align-items: center;
  padding: 16px 4px;
  border-top: 1px solid var(--rule);
}
.allowance-card[data-bucket="needs"] { --bag: var(--bag-needs); }
.allowance-card[data-bucket="savings"] { --bag: var(--bag-savings); }
.allowance-card__top { grid-area: top; display: flex; align-items: center; gap: 10px; }
.allowance-card__top strong { flex: 1; }
.allowance-card__top em { color: var(--bag); font: 800 1.12rem/1 var(--font-num); font-style: normal; }
.allowance-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: color-mix(in srgb, var(--bag) 16%, transparent); color: var(--bag); }
.allowance-icon svg { width: 16px; height: 16px; }
.allowance-card__sentence { grid-area: sentence; color: var(--text-2); font-size: 0.84rem; }
.allowance-card__numbers { grid-area: numbers; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.allowance-card__numbers div { display: grid; padding-left: 12px; border-left: 1px solid var(--rule); }
.allowance-card__numbers span { color: var(--text-3); font-size: 0.72rem; }
.allowance-card__numbers strong { font-family: var(--font-num); font-size: 1.2rem; font-weight: 800; line-height: 1; }
.allowance-track { grid-area: track; height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.allowance-track i { display: block; height: 100%; background: var(--bag); transition: width 420ms var(--ease); }
.allowance-card--red .allowance-track i { background: var(--bad); }
.allowance-card .microcopy { grid-area: note; font-size: 0.8rem; }

.plan-month-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.plan-month-metric { display: grid; padding: 12px 14px; }
.plan-month-metric + .plan-month-metric { border-left: 1px solid var(--rule); }
.plan-month-metric__copy { display: grid; }
.plan-month-metric span { color: var(--text-2); font-size: 0.8rem; }
.plan-month-metric strong { font-family: var(--font-num); font-size: 1.6rem; font-weight: 800; line-height: 1; }
.plan-month-metric--free strong { color: var(--accent-text); }
.plan-month-section[data-status="red"] .plan-month-metric--free strong { color: var(--bad); }
.plan-payment-row { grid-template-columns: 120px 34px minmax(0, 1fr) auto auto; }
.plan-payment-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--raised-2); color: var(--text); font: 600 0.7rem/1 var(--font-fig); }
.plan-payment-row--needs .plan-payment-mark { color: var(--bag-needs); }
.plan-payment-row--wants .plan-payment-mark { color: var(--bag-wants); }
.brand-safe-note, .cfo-tip { color: var(--text-3); font-size: 0.8rem; }

.cfo-section { display: grid; gap: 16px; }
.cfo-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); align-items: end; border-bottom: 1px solid var(--rule); }
.cfo-hero-copy { display: grid; gap: 6px; padding: 0 16px 14px 0; }
.cfo-hero-copy h3 { font-size: 1.5rem; }
.cfo-summary-card { display: grid; padding: 0 14px 14px; border-left: 1px solid var(--rule); }
.cfo-summary-card div { display: grid; }
.cfo-summary-card span { color: var(--text-2); font-size: 0.8rem; }
.cfo-summary-card strong { font-family: var(--font-num); font-size: 1.84rem; font-weight: 800; line-height: 1; }
.cfo-summary-card small { color: var(--text-3); font-size: 0.76rem; }
.cfo-section[data-status="red"] .cfo-summary-card--free strong { color: var(--bad); }
.cfo-allocation { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; }
.cfo-allocation-track { display: flex; height: 10px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.cfo-allocation-segment { height: 100%; }
.cfo-allocation-segment--goals { background: var(--accent); }
.cfo-allocation-segment--funds { background: var(--bag-savings); }
.cfo-allocation-segment--free { background: repeating-linear-gradient(-45deg, var(--rule-strong) 0 3px, transparent 3px 6px); }
.cfo-allocation-percent { color: var(--text-2); font: 800 1rem/1 var(--font-num); }
.cfo-allocation-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cfo-allocation-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 0.8rem; }
.cfo-allocation-chip i { width: 8px; height: 8px; border-radius: 2px; background: var(--rule-strong); }
.cfo-allocation-chip--goals i { background: var(--accent); }
.cfo-allocation-chip--funds i { background: var(--bag-savings); }
.cfo-allocation-chip strong { color: var(--text); font-family: var(--font-fig); font-weight: 400; }
.cfo-workbench { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cfo-card-head h4 { color: var(--text-2); font-weight: 500; font-size: 0.9rem; }
.cfo-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cfo-form label:first-child, .cfo-form .button { grid-column: 1 / -1; }
.cfo-card-note { color: var(--text-3); font-size: 0.8rem; }
.cfo-vault-panel { grid-template-columns: minmax(0, 1fr) auto; }
.cfo-vault-copy { display: grid; gap: 4px; }
.cfo-vault-copy .eyebrow span { margin-left: 6px; color: var(--text-2); }
.cfo-vault-copy p:not(.eyebrow) { color: var(--text-2); font-size: 0.86rem; }
.cfo-vault-actions { display: flex; gap: 8px; align-self: center; }
.cfo-list--vault { grid-column: 1 / -1; }
.cfo-row { display: grid; gap: 10px; padding: 14px 4px; border-top: 1px solid var(--rule); }
.cfo-row--complete { opacity: 0.7; }
.cfo-row__main { display: flex; justify-content: space-between; gap: 12px; }
.cfo-row__main > div { display: grid; }
.cfo-row__main span { color: var(--text-2); font-size: 0.8rem; }
.cfo-progress { height: 8px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.cfo-progress i { display: block; height: 100%; background: var(--accent); transition: width 800ms var(--ease); }
.cfo-row[data-kind="fund"] .cfo-progress i { background: var(--bag-savings); }
.cfo-row__numbers { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--text-2); font-size: 0.82rem; }
.cfo-row__numbers strong { color: var(--text); font-family: var(--font-fig); font-weight: 400; }
.cfo-row__contribute { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-2); font-size: 0.82rem; }
.cfo-row__contrib-summary strong { color: var(--text); }
.cfo-contribute { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; }
.cfo-contribute__error { grid-column: 1 / -1; color: var(--bad); font-size: 0.8rem; }
.cfo-contribute__error:empty { display: none; }
.definition-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.definition-card { --bag: var(--text-2); display: grid; gap: 8px; align-content: start; padding: 14px 16px 4px 0; }
.definition-card + .definition-card { padding-left: 16px; border-left: 1px solid var(--rule); }
.definition-card--need { --bag: var(--bag-needs); }
.definition-card--savings { --bag: var(--bag-savings); }
.definition-card--want { --bag: var(--bag-wants); }
.definition-card h4 { color: var(--bag); }
.definition-card p, .definition-card li { color: var(--text-2); font-size: 0.84rem; }
.definition-card ul { display: grid; gap: 6px; margin: 0; padding-left: 16px; }

/* ───────────── Movimientos: libro diario ───────────── */
.filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ledger-day { position: sticky; top: 64px; z-index: 2; padding: 14px 8px 6px; border-bottom: 1px solid var(--rule-strong); background: var(--surface); color: var(--text); font-size: 0.82rem; font-weight: 600; }
.transaction-row { grid-template-columns: minmax(0, 1fr) auto; }
.transaction-row time { display: none; }
.transaction-row.is-excluded { opacity: 0.5; }
.transaction-row__right { display: flex; align-items: center; gap: 10px; }
.transaction-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 140ms var(--ease); }
.transaction-actions .text-button { min-height: 26px; padding: 0 7px; font-size: 0.74rem; }
.transaction-row:hover .transaction-actions, .transaction-row:focus-within .transaction-actions { opacity: 1; }
.transaction-row .amount { min-width: 96px; }
.rule-card { grid-template-columns: minmax(0, 1fr) auto; }
.decision-card { display: grid; gap: 10px; padding: 14px 4px; border-top: 1px solid var(--rule); }
.decision-card__top { display: flex; justify-content: space-between; gap: 10px; color: var(--text-2); font-size: 0.8rem; }
.decision-card__top strong { color: var(--text); font-family: var(--font-fig); font-weight: 400; }
.decision-card p { color: var(--text-2); font-size: 0.82rem; }
.decision-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.decision-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.decision-actions .button--small { background: var(--raised-2); color: var(--text); }
.decision-actions .decision-needs { --bag: var(--bag-needs); }
.decision-actions .decision-wants { --bag: var(--bag-wants); }
/* Marca de bolsa: un cuadrito pixel en vez de rayita lateral. */
:is(.decision-actions .decision-needs, .decision-actions .decision-wants, .island__recent-chip)::before { content: ""; flex: none; align-self: center; width: 7px; height: 7px; background: var(--bag); box-shadow: 2px 2px 0 color-mix(in srgb, var(--bag) 45%, #000); }

/* ───────────── Reportes ───────────── */
.statement-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.statement-row strong { font-family: var(--font-fig); font-weight: 400; }
.category-report-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; }
.category-report-track { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.category-report-track i { display: block; height: 100%; background: var(--accent); }

/* ───────────── Diálogos ───────────── */
dialog { padding: 0; border: 0; color: var(--text); background: transparent; }
dialog::backdrop { background: rgba(8, 8, 7, 0.6); }
html.heda-theme-light dialog::backdrop { background: rgba(60, 54, 40, 0.3); }
.advice-dialog, .onboarding-dialog { position: fixed; width: min(620px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 48px)); border-radius: 18px; overflow: visible; }
.advice-dialog[open], .onboarding-dialog[open] { animation: dialog-in 320ms var(--spring); }
@keyframes dialog-in { from { transform: translateY(14px) scale(0.97); } }
dialog[open]::backdrop { animation: backdrop-in 260ms var(--ease); }
@keyframes backdrop-in { from { opacity: 0; } }
.advice-dialog { padding: 22px; overflow: auto; }
.advice-dialog__header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.advice-dialog__header > div { display: grid; gap: 3px; }
.recommendation { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--rule-strong); }
.recommendation .dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 2px; background: var(--good); }
.recommendation[data-severity="yellow"] .dot { background: var(--warn); }
.recommendation[data-severity="red"] .dot { background: var(--bad); }
.recommendation > div { display: grid; gap: 4px; }
.recommendation p { color: var(--text-2); font-size: 0.86rem; }
.recommendation strong { font-size: 0.86rem; }
.onboarding-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; padding: 26px; }
.onboarding-card__art { display: grid; place-items: start center; }
.onboarding-card__art span { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 0; background: transparent; color: var(--accent-ink); font: 600 3.2rem/1 var(--font-pixel); clip-path: var(--pixel-corners); }
.onboarding-card__content { display: grid; gap: 14px; }
.onboarding-copy, .onboarding-hint { color: var(--text-2); font-size: 0.9rem; }
.onboarding-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.onboarding-fields input { border-color: transparent; background: color-mix(in srgb, var(--text) 8%, transparent); }
.onboarding-context { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.onboarding-context span { color: var(--text-2); font-size: 0.86rem; }
.onboarding-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.onboarding-dots { display: flex; gap: 6px; }
.onboarding-dots i { width: 7px; height: 7px; border-radius: 2px; background: color-mix(in srgb, var(--text) 22%, transparent); transition: width 260ms var(--ease); }
.onboarding-dots i.is-active { width: 20px; background: var(--accent); }

/* ───────────── Acabados pixel ───────────── */
.pixel-sprite { stroke: none; display: inline-block; flex: none; image-rendering: pixelated; vertical-align: middle; }
/* Botones con sombra dura de 8 bits: se "hunden" al presionarlos. */
.button, .settings-action-primary, .island__cta { border-radius: 6px; box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.button--ghost { box-shadow: 0 3px 0 color-mix(in srgb, var(--raised-2) 50%, #000); }
.button:active, .settings-action-primary:active, .island__cta:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }
.island__cta { border-radius: 8px; }
.island__indicator { border-radius: 8px; }
.tab-button { border-radius: 8px; }
kbd, .island__badge, .source-note, .pill, .percent-total { border-radius: 0; clip-path: var(--pixel-corners); }
.pixel-hearts { display: inline-flex; gap: 2px; grid-column: 1 / -1; margin-top: 4px; }
.capture-streak { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 10px; background: var(--raised); color: var(--text-2); font-size: 0.84rem; clip-path: var(--pixel-corners); }
.capture-streak strong { color: var(--text); }
.capture-streak[data-hot="true"] .pixel-sprite { animation: flicker 1.2s steps(2) infinite; }
@keyframes flicker { 50% { transform: translateY(-1px) scaleY(1.08); } }
.island__sprite { display: inline-grid; align-self: center; animation: ka-ching 700ms steps(6) 1; }
@keyframes ka-ching { 0% { transform: translateY(6px); opacity: 0; } 40% { transform: translateY(-5px); opacity: 1; } 70% { transform: translateY(1px); } 100% { transform: none; } }
.mb-day { position: relative; }
.mb-flag { position: absolute; top: -12px; left: 50%; margin-left: -3px; animation: wave 1.4s steps(2) infinite; }
@keyframes wave { 50% { transform: translateY(-1px); } }
.mb-day.is-today { border-radius: 0; clip-path: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% 100%, 0 100%); }
.month-board__grid { padding-top: 12px; }
.mb-cell.has-value span { border-radius: 0; clip-path: var(--pixel-corners); }
.month-board__empty { display: flex; align-items: center; gap: 14px; padding: 14px 6px 4px; color: var(--text-2); font-size: 0.88rem; }
.month-board__empty strong { color: var(--text); }
.island__month-label, .mb-day strong { -webkit-font-smoothing: none; }
.pixel-title { font: 600 1.6rem/1 var(--font-pixel); letter-spacing: 0.03em; }
.shortcuts-list { display: grid; gap: 0; margin: 4px 0 12px; }
.shortcuts-list div { display: grid; grid-template-columns: 110px 1fr; align-items: center; padding: 9px 0; border-top: 1px solid var(--rule-strong); }
.shortcuts-list dt { display: flex; gap: 4px; align-items: center; color: var(--text-3); }
.shortcuts-list dd { margin: 0; }
.shortcuts-list kbd { min-width: 1.9em; padding: 2px 6px; font-size: 0.78rem; }
.empty, .loading { border-style: dashed; border-radius: 0; clip-path: var(--pixel-corners); }

/* ───────────── QA: QOL ───────────── */
.island__recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.island__recent > span { color: var(--text-3); font-size: 0.74rem; font-weight: 700; }
.island__recent-chip { --bag: var(--bag-wants); display: inline-flex; gap: 6px; align-items: baseline; min-height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); font-size: 0.8rem; font-weight: 600; }
.island__recent-chip--needs { --bag: var(--bag-needs); }
.island__recent-chip--savings { --bag: var(--bag-savings); }
.island__recent-chip:hover { background: color-mix(in srgb, var(--bag) 18%, transparent); }
.island__recent-chip strong { color: var(--text-2); font-weight: 800; }
.island__undo { margin-left: auto; }
.island__activity { align-items: center; }
/* Carriles fijos al desplazar el tablero de lado. */
.mb-corner, .mb-lane { position: sticky; left: 0; z-index: 3; background: var(--surface); }
.mb-corner { top: auto; }

/* ───────────── Responsivo ───────────── */
@media (max-width: 1100px) {
  .tab-panel[data-tab-panel="hoy"].is-active { grid-template-columns: 1fr; }
  .tab-panel[data-tab-panel="hoy"] :is(.today-board, .month-board) { grid-column: 1; grid-row: auto; }
  [data-workspace-panel="explorer"] > .panel { grid-template-columns: 1fr; }
  [data-workspace-panel="explorer"] .transaction-list { grid-column: 1; grid-row: auto; }
  .tab-button:not(.is-active) span { display: none; }
  .tab-button:not(.is-active) { padding: 0 11px; }
  .simulator-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfo-hero-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cfo-hero-copy { grid-column: 1 / -1; }
  .definition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallet-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .allowance-card { grid-template-columns: 1fr; grid-template-areas: "top" "sentence" "numbers" "track" "note"; }
}
@media (max-width: 900px) {
  .cfo-workbench, .two-column { grid-template-columns: 1fr; }
  .plan-month-grid, .cashflow-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .island__keys, .island__cta kbd { display: none; }
  .island__verdict { grid-template-columns: auto minmax(0, 1fr); }
  .island__verdict dl { grid-column: 1 / -1; justify-content: space-between; }
  .bill-row, .inflow-row, .subscription-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  /* Teléfono: la isla baja al alcance del pulgar y lo que abre crece hacia arriba. */
  .island-dock { top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .island { grid-template-rows: 0fr 0fr auto; }
  .island.has-activity { grid-template-rows: 1fr 0fr auto; }
  .island[data-mode="capture"] { grid-template-rows: 0fr 1fr auto; }
  .island__bar { order: 3; }
  .island__row--activity { order: 1; }
  .island__sheet { order: 2; }
  .island__sheet-head { border-top: 0; }
  .island__sheet-inner { padding-top: 12px; border-bottom: 1px solid var(--rule-strong); }
  .settings-menu { top: auto; bottom: calc(100% + 10px); max-height: calc(100vh - 120px); }
  .shell { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .tab-button span { display: none; }
  .tab-button { padding: 0 9px; }
  .island__month-year { display: none; }
  .island-dock { flex-direction: column-reverse; }
  .pace-step { margin: 0 0 -2px; padding: 5px 6px 3px; border-radius: 16px 16px 0 0; }
  .island__month-label { min-width: 40px; }
  .island__chev { width: 26px; }
  .island__cta { padding: 0 10px; }
  .island__month { margin-inline: 2px; padding-inline: 2px; }
  .ledger-day { top: 0; }
  .filters { grid-template-columns: 1fr 1fr; }
  .month-board__grid { grid-template-columns: 84px repeat(var(--days, 30), minmax(30px, 1fr)); }
  .mb-lane small { display: none; }
  .island__month-label { min-width: 0; }
  .island__cta span { display: none; }
  .island.shows-live .island__live { max-width: 0; margin: 0; opacity: 0; }
  .today-board__strip, .simulator-top, .filters, .cfo-hero-grid, .definition-grid, .inflow-form, .bill-form, .subscription-form, .rule-form, .statement-row { grid-template-columns: 1fr; }
    .wallet-head-actions { grid-template-columns: 1fr; }
  .cashflow-list__head, .cashflow-event { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .cashflow-event__balance, .cashflow-list__head span:last-child { display: none; }
  .onboarding-card { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

@media (max-width: 420px) {
  #adviceBubble { display: none; }
}

/* Sello de "Próximamente" (versión web, importación de estados de cuenta). */
.soon-stamp { padding: 4px 10px; border: 2px solid currentColor; border-radius: 6px; color: var(--accent); font: 600 0.78rem/1 var(--font-pixel); letter-spacing: 0.08em; text-transform: uppercase; rotate: 6deg; }
.statement-import-panel.is-soon .statement-import-form { opacity: 0.55; }

/* Teléfono angosto: la barra de la isla no cabe en una fila. El mes baja a su propia fila
   (flechas a los lados) y arriba quedan las secciones, Gasto, calculadora y ajustes. */
@media (max-width: 480px) {
  .island, .island[data-mode="capture"] { width: calc(100vw - 16px); min-width: 0; max-width: none; grid-template-columns: minmax(0, 1fr); }
  .island > * { min-width: 0; }
  .island__bar { flex-wrap: wrap; row-gap: 4px; justify-content: space-between; }
  .island__nav { flex: 1 1 auto; min-width: 0; }
  .island__month { order: 10; flex: 1 1 100%; justify-content: space-between; margin: 0; padding: 0 2px; border-top: 1px solid var(--rule); }
  .island__month-label { flex: 1; }
  .island__month-year { display: inline; } /* el mes tiene su fila: cabe el año */
  .island__sheet-inner { grid-template-columns: minmax(0, 1fr); }
  /* Bolsas: el dibujito arriba y el nombre abajo, para que "Necesidad" quepa. */
  .island__bag { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sprite" "name" "room"; justify-items: center; row-gap: 2px; padding: 8px 4px; text-align: center; }
  .island__bag span { font-size: 0.84rem; }
  /* Pie: cuándo y de dónde en una fila; "Anotar" ocupa todo el ancho abajo, al alcance del pulgar. */
  .island__sheet-foot { flex-wrap: wrap; }
  .island__save { flex: 1 1 100%; min-width: 0; }
}
/* Las pestañas del mes (Calendario, Cartera, Pagos…) se deslizan de lado en lugar de ensanchar la página. */
@media (max-width: 700px) {
  .month-board__tabs { flex: 1 1 100%; max-width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .month-board__tabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 700px) {
  .section-heading { flex-wrap: wrap; }
  .statement-import-form { grid-template-columns: minmax(0, 1fr); }
  .statement-import-form input[type="file"] { max-width: 100%; }
}
@media (max-width: 480px) {
  /* La isla mide dos filas en el teléfono: lo que flota encima arranca más arriba. */
  .calc { bottom: calc(150px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 170px); overflow: auto; }
  .health-breakdown { max-width: calc(100vw - 24px); left: 12px !important; right: 12px; width: auto; }
}
@media (max-width: 480px) {
  /* Cartera: sin el ícono, cada cantidad tiene todo el ancho de su casilla. */
  .wallet-source-card { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
  .wallet-source-icon { display: none; }
}

.settings-language { display: grid; gap: 6px; color: var(--text-2); font-size: 0.84rem; font-weight: 600; }