/* Inicio (js/views/home.js, insights.js, ask-ai.js). */

/* Fixed / quotas / variable: each amount sits under its own label. */
.split .amount { text-align: left; }
input.tiny { width: 72px; min-height: 34px; padding: 6px 8px; }

/* Lo que gastaron: one total, a bar of fixed / quotas / variable (each part opens
   what is inside), and the categories with what has no category first. */
:root { --seg-fixed: var(--accent); --seg-installments: #6f7fd6; --seg-variable: #9aa5a2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --seg-installments: #9aa6ff; --seg-variable: #66716f; } }
:root[data-theme="dark"] { --seg-installments: #9aa6ff; --seg-variable: #66716f; }
.big-total { font-size: clamp(1.7rem, 6vw, 2.2rem); font-weight: 780; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.split-bar { display: flex; gap: 3px; height: 16px; }
.split-bar .seg { flex: 0 1 0; min-width: 0; padding: 0; border: 0; border-radius: 6px; cursor: pointer; }
.split-bar .seg[aria-pressed="true"] { outline: 3px solid color-mix(in srgb, var(--text) 35%, transparent); outline-offset: 1px; }
.seg-fixed { background: var(--seg-fixed); } .seg-installments { background: var(--seg-installments); } .seg-variable { background: var(--seg-variable); }
.parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.part { display: grid; gap: 2px; text-align: left; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; min-width: 0; }
.part[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.part .amount { text-align: left; }
.part-label { display: flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 650; }
.part-label .muted { font-weight: 500; margin-left: auto; }
.part-hint { color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.part-detail { border-radius: 12px; background: var(--panel-2); padding: 4px 12px; }
.income-line { border-top: 1px solid var(--line); padding-top: 10px; }
.where { border-top: 1px solid var(--line); padding-top: 12px; }
.cat-row { display: grid; grid-template-columns: minmax(80px, 140px) minmax(0, 1fr) auto 38px; align-items: center; gap: 10px; font-size: .92rem; }
.cat-row .progress { height: 8px; }
.cat-item { display: grid; gap: 4px; }
.cat-limit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: .85rem; }
@media (max-width: 520px) { .parts { grid-template-columns: 1fr; } .cat-row { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; } .cat-row > :last-child { display: none; } }

/* UX Inicio: header actions that fit a phone, touch targets of at least 40px, and
   the notice that says which month you are looking at. Scoped to .home (the Inicio view). */
.home .btn.small { min-height: 40px; }
.home .month-nav .btn { min-width: 40px; padding-inline: 8px; }
.home .past-month { margin-bottom: 12px; }
.home .check-item { min-height: 48px; }
@media (max-width: 520px) {
  .home .view-head { align-items: stretch; }
  .home .home-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
  .home .home-actions > :first-child { grid-column: 1 / -1; }
}

/* Inicio, top: the available amount with its sum in plain sight (minus in red,
   plus in green, mixed with each palette's hero text so they read on light and
   dark heroes), the accounts as chips, and goals one thin line each. */
.hero .minus { color: color-mix(in srgb, #e5484d 62%, var(--hero-text)); }
.hero .plus { color: color-mix(in srgb, #2fbf71 62%, var(--hero-text)); }
.hero .big-row { align-items: baseline; gap: 4px 12px; }
.hero .sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; margin-top: 6px; font-size: .95rem; font-variant-numeric: tabular-nums; }
.hero .sum > :nth-child(odd) { color: var(--hero-muted); }
.hero .sum > :nth-child(even) { text-align: right; }
.hero .sum .total { border-top: 1px solid color-mix(in srgb, var(--hero-text) 25%, transparent); padding-top: 6px; color: var(--hero-text); font-weight: 650; }
.hero .usd { margin-top: 6px; color: var(--hero-muted); }
.account-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.account-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; font-size: .85rem;
  background: color-mix(in srgb, var(--hero-text) 12%, transparent); color: var(--hero-text); border: 0; min-width: 0; }
.account-chips .chip svg { width: 16px; height: 16px; flex: none; }
.account-chips .chip b { font-variant-numeric: tabular-nums; }
.account-chips .chip.action { cursor: pointer; font-weight: 650; text-decoration: underline; background: transparent; }
.goals-mini .card-head h2 .muted { font-weight: 500; }
.goals-mini .nudge { color: var(--warn); margin-top: 6px; }
.goal-lines { display: grid; grid-template-columns: minmax(70px, 150px) minmax(0, 1fr) 44px; gap: 8px 12px; align-items: center; margin-top: 10px; font-size: .92rem; }
.goal-lines > span { overflow-wrap: anywhere; }
.goal-lines > b { text-align: right; font-variant-numeric: tabular-nums; }
.goal-lines .progress { height: 8px; }

/* UX Inicio: each "Para afinar el cálculo" warning with its own fix beside it,
   card statements with their due badge and "Marcar pagado", and "Desmarcar" as a
   quiet link inside its sentence (still a 40 px touch target). */
.home-warnings ul { list-style: none; padding-left: 0; display: grid; gap: 8px; }
.home-warnings li { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.home-warnings li > span { flex: 1 1 180px; min-width: 0; }
.home-due { display: grid; gap: 2px; margin-top: 6px; }
.home-due-top { align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.home-due-top .amount { font-variant-numeric: tabular-nums; }
.home-due-top .btn { margin-left: auto; }
.link-btn { background: none; border: 0; padding: 0 2px; min-height: 40px; font: inherit; font-weight: 650; color: var(--accent); text-decoration: underline; cursor: pointer; }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.link-btn[aria-busy="true"] { opacity: .55; cursor: progress; }

/* Avisos: "Para tener en cuenta" on Inicio (js/views/insights.js). */
.insights-list { list-style: none; margin: 12px 0 8px; padding: 0; display: grid; gap: 8px; }
.insight { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border-left: 4px solid var(--muted); }
.insight.warn { background: var(--warn-soft); border-left-color: var(--warn); }
.insight.good { background: var(--accent-soft); border-left-color: var(--good); }
.insight-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.insight-link { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 6px; font-weight: 650; }

/* Inicio: what the cards owe by kind, under its line; the card debt apart. */
.hero .sum .sum-detail { display: block; font-size: .78rem; opacity: .85; }
.debt-card .kv-list { display: grid; gap: 4px; }
.debt-card .kv { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.debt-card .kv.meta { color: var(--muted); font-size: .85rem; }
.debt-card .bad-text { color: var(--bad); }
.debt-card .good-text { color: var(--good, var(--accent)); }

/* Preguntale a tu IA */
.ask-questions { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.ask-questions legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.ask-question { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.ask-question input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.ask-links { gap: 8px; flex-wrap: wrap; align-items: center; }
.ask-preview { width: 100%; font: .8rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 8px; }
.hero .sum .link-btn.sum-detail { color: inherit; text-decoration: underline; padding: 0; text-align: left; }
.debt-card .debt-list { display: grid; gap: 10px; }
.debt-card .debt-item .meta { color: var(--muted); font-size: .85rem; }

/* UX Inicio: "Actualizar saldo" among the account chips is a 40 px touch target,
   with a focus ring that reads on every hero. */
.account-chips .chip.action { min-height: 40px; padding-inline: 12px; }
.account-chips .chip.action:focus-visible { outline: 2px solid var(--hero-text); outline-offset: 2px; }

/* Lo que toca hoy: one step in large type, its button the main one on a phone; the
   rest folded under "Después". */
.today-card { border-color: var(--accent); }
.today-step { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; }
.today-actions { flex-wrap: wrap; gap: 8px; }
.today-actions > .btn.primary { flex: 1 1 auto; justify-content: center; }
.today-actions label.btn, .today-more label.btn { cursor: pointer; }
.today-actions label.btn:focus-within, .today-more label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.today-more > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; }
.today-more .item { gap: 8px; flex-wrap: wrap; }
@media (min-width: 640px) { .today-actions > .btn.primary { flex: 0 1 auto; } }


/* Phones: the links inside the hero's sentences keep the line height of the text around
   them (a 40px box there opened gaps between lines), and today's step is a notch smaller. */
@media (max-width: 520px) {
  .hero .sum .sum-detail .link-btn, .hero .sum .link-btn.sum-detail { min-height: 0; }
  .today-step { font-size: 1.05rem; }
}

/* Cómo viene el mes (js/views/month-curve.js): under the split of Lo que gastaron. */
.month-curve { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* Inicio, short: the hero's full sum under "Cómo se calcula", cards by person and the
   month's detail folded. */
.hero-more { margin-top: 10px; }
.hero-more > summary, .month-more > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; }
.hero-more > summary { color: var(--hero-link, var(--hero-text)); font-size: .9rem; }
.hero-more[open] > summary { margin-bottom: 4px; }
.person-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.person-cards { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; min-height: 88px; min-width: 0; overflow-wrap: anywhere; }
.person-cards:hover { border-color: var(--accent); }
.person-cards:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.person-cards .amount { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.debt-note { color: var(--warn); }
.split-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px; }
.split-box { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: var(--panel-2); }
.split-box .amount { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.card-settle { margin-top: 6px; }

/* UX Inicio: the hero's "− $ …" / "+ $ …" with less red and green and more of each
   palette's hero text (at least 4.6:1 on every palette, light and dark), its small detail
   lines without the faded opacity (they fell near 3.4:1 on the pastel heroes), and the
   "Gastos fijos" line split in parts: in a row with dots, one under the other on a phone. */
.hero .minus { color: color-mix(in srgb, #e5484d 50%, var(--hero-text)); }
.hero .plus { color: color-mix(in srgb, #2fbf71 40%, var(--hero-text)); }
.hero .sum .sum-detail { opacity: 1; color: color-mix(in srgb, var(--hero-muted) 80%, var(--hero-text)); }
.fixed-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; }
.fixed-summary > li + li::before { content: "·"; margin-inline: .4em; }
@media (max-width: 520px) {
  .fixed-summary { display: grid; gap: 2px; }
  .fixed-summary > li:first-child { font-weight: 650; }
  .fixed-summary > li + li::before { content: none; }
}
/* UX Inicio: links inside a sentence keep the line height of the text around them (no
   gaps between lines) and still get a ~40px touch area from padding that the negative
   margin takes back out of the layout; an account balance older than a week shows its
   date on the chip; the card debt total wraps instead of squeezing on a phone. */
.link-btn.in-text, .hero .sum .sum-detail .link-btn.in-text { min-height: 0; padding-block: 10px; margin-block: -10px; }
.account-chips .chip.stale { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 70%, var(--hero-text)); }
.account-chips .chip-date { font-size: .78rem; color: color-mix(in srgb, var(--warn) 30%, var(--hero-text)); font-weight: 650; }
.debt-block .kv { flex-wrap: wrap; }
.debt-block .kv .amount { margin-left: auto; font-variant-numeric: tabular-nums; }

/* UX Inicio: the hero's quiet text ("Disponible este mes", the sum's labels and «En
   dólares:») a notch closer to the hero text: --hero-muted alone fell to 4.3:1 on Celeste
   claro; mixed 80/20 it is at least 5.1:1 on every palette, light and dark. The note under
   "Hoy en cuentas" when a balance is old, in the chips' warn tone; and the count of
   "Lo que toca hoy" as a quiet badge instead of a "1 de N" that looked like pages. */
.home .hero .muted, .home .hero .usd, .home .hero .sum > :nth-child(odd):not(.total) { color: color-mix(in srgb, var(--hero-muted) 80%, var(--hero-text)); }
.home .hero .sum .stale-note { color: color-mix(in srgb, var(--warn) 30%, var(--hero-text)); font-weight: 650; }
.today-card .today-count { flex: none; }

/* Avisos ocultos: «Ocultar» next to the fix of each warning (they wrap together under the
   text on a phone), and «Ocultos (N)» at the foot of «Lo que toca hoy», quieter than the
   steps above it. */
.home-warning-actions { gap: 6px; flex-wrap: wrap; margin-left: auto; }
.today-hidden > summary { color: var(--muted); }
.today-hidden > p { margin: 4px 0 8px; }
.today-hidden .item > .main { flex: 1 1 100%; }