/* Layout and the pieces every section uses: cards, lists, forms, dialogs, loading, brand badges. */

/* Layout */
.shell { max-width: 980px; margin: 0 auto; padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 0 14px; }
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 1.1rem; text-decoration: none; color: var(--text); }
.topbar .brand img { width: 34px; height: 34px; border-radius: 10px; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--muted); font-size: .9rem; }
#main { min-width: 0; }
.view { display: grid; gap: 16px; }
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.view-head p { color: var(--muted); }

.nav { position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--panel);
  border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.nav a { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 600; }
.nav a svg { width: 22px; height: 22px; }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
/* Phone bar: Inicio, Movs., the + in the middle, Objetivos and Más (the rest lives there). */
.nav .nav-extra { display: none; }
.nav-add, .nav-more { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 6px 2px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; }
.nav-more svg { width: 22px; height: 22px; }
.nav-more.current { color: var(--accent); background: var(--accent-soft); }
.nav-add > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav-add svg { width: 26px; height: 26px; box-sizing: content-box; padding: 9px; border-radius: 50%; background: var(--accent); color: var(--accent-text); stroke-width: 2.4; }
.nav-add:focus-visible, .nav-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-options { display: grid; gap: 8px; }
.menu-option { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.menu-option > span { display: grid; gap: 2px; }
.menu-option svg { width: 22px; height: 22px; color: var(--accent); }
.menu-option:hover { border-color: var(--accent); }
@media (min-width: 860px) {
  .shell { display: grid; grid-template-columns: 200px 1fr; column-gap: 28px; padding-bottom: 40px; }
  .topbar { grid-column: 1 / -1; }
  .nav { position: sticky; top: 16px; align-self: start; inset: auto; display: grid; grid-template-columns: 1fr; gap: 4px; background: none; border: 0; padding: 0; }
  .nav a { grid-template-columns: 24px 1fr; justify-items: start; align-items: center; gap: 10px; padding: 10px 12px; font-size: .95rem; }
  /* On a computer every section is in the side list, and + is a button on top of it. */
  .nav .nav-extra { display: grid; }
  .nav-more { display: none; }
  .nav-add { order: -1; grid-template-columns: 24px 1fr; justify-items: start; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; background: var(--accent); color: var(--accent-text); font-size: .95rem; }
  .nav-add > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nav-add svg { width: 22px; height: 22px; padding: 0; background: none; color: inherit; }
}

/* Surfaces */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); min-width: 0; }
.card > h2 + *, .card > .card-head + * { margin-top: 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-head p { color: var(--muted); font-size: .9rem; }
.grid-2 { display: grid; gap: 16px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.stack { display: grid; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hero { background: var(--brand); color: var(--hero-text); border: 0; }
.hero .muted { color: var(--hero-muted); }
.hero .big { font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 780; letter-spacing: -0.03em; margin: 4px 0; font-variant-numeric: tabular-nums; }
.hero details { margin-top: 12px; }
.hero summary { cursor: pointer; color: var(--hero-link); font-size: .9rem; }
.hero .breakdown { margin-top: 10px; display: grid; gap: 6px; font-size: .92rem; }
.hero .breakdown div { display: flex; justify-content: space-between; gap: 12px; }

/* Lists */
.list { display: grid; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.item:first-child { border-top: 0; }
.item .main { flex: 1; min-width: 0; }
.item .title { font-weight: 600; overflow-wrap: anywhere; }
.item .meta { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
a.item { color: inherit; text-decoration: none; }
.item.clickable { cursor: pointer; }
.item.clickable:hover .title { text-decoration: underline; }
.amount { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; text-align: right; }
.amount.in { color: var(--good); }
.amount.out { color: var(--text); }
.day { margin-top: 10px; font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 750; }
.avatar svg { width: 20px; height: 20px; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.badge.good { background: var(--accent-soft); color: var(--accent); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }

.notice { border-radius: 14px; padding: 12px 14px; background: var(--warn-soft); color: var(--warn); font-size: .92rem; }
.notice.info { background: var(--accent-soft); color: var(--accent); }
.notice.bad { background: var(--bad-soft); color: var(--bad); }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

.bars { display: grid; gap: 10px; }
.bar { display: grid; gap: 4px; }
.bar .label { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.bar .track { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.bar .fill { display: block; height: 100%; border-radius: 99px; background: var(--accent); width: 0; }

/* Forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel); font-weight: 650; cursor: pointer; text-decoration: none; color: var(--text); }
.btn svg { width: 18px; height: 18px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); padding-inline: 10px; }
.btn.danger { color: var(--bad); }
.btn.small { min-height: 34px; padding: 6px 12px; font-size: .88rem; border-radius: 11px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; cursor: progress; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

.form { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span { font-size: .85rem; font-weight: 650; color: var(--muted); }
.field small { color: var(--muted); font-size: .8rem; }
input, select, textarea { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
textarea { min-height: 140px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); flex: none; }
.fields-2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choice { text-align: left; display: grid; gap: 4px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.choice strong { font-size: 1rem; }
.choice span { color: var(--muted); font-size: .85rem; }
.choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.toolbar { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.month-nav { display: inline-flex; align-items: center; gap: 4px; }
.month-nav strong { min-width: 130px; text-align: center; }

/* Dialogs and toasts */
dialog { width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); border: 0; border-radius: 22px; padding: 0; background: var(--panel); color: var(--text); box-shadow: 0 20px 60px rgb(0 0 0 / 35%); }
dialog::backdrop { background: rgb(8 12 14 / 55%); }
dialog .dialog-body { padding: 20px; display: grid; gap: 14px; overflow: auto; }
dialog .dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
dialog .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
#toasts { position: fixed; z-index: 50; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100% - 24px)); pointer-events: none; }
.toast { background: var(--text); color: var(--bg); padding: 12px 16px; border-radius: 14px; font-weight: 600; box-shadow: 0 8px 30px rgb(0 0 0 / 25%); }
.toast.bad { background: var(--bad); color: #fff; }

.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login .card { width: min(440px, 100%); display: grid; gap: 18px; }
.login .logo { display: grid; gap: 6px; }
.login .logo h1 { margin: 0; line-height: 0; }
.login .logo img { width: auto; height: 56px; }
.tabs { display: flex; gap: 6px; background: var(--panel-2); padding: 4px; border-radius: 14px; }
.tabs button { flex: 1; border: 0; background: none; padding: 9px 8px; border-radius: 11px; font-weight: 650; color: var(--muted); cursor: pointer; font-size: .9rem; }
.tabs button[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.3rem; letter-spacing: .08em; font-weight: 700; padding: 12px; text-align: center; background: var(--panel-2); border-radius: 12px; overflow-wrap: anywhere; }
.empty { text-align: center; padding: 24px 12px; color: var(--muted); display: grid; gap: 10px; justify-items: center; }
.month-card { display: grid; gap: 6px; }
.month-card .row div { font-variant-numeric: tabular-nums; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; }
.kv b { font-variant-numeric: tabular-nums; }
.check-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.check-item:first-child { border-top: 0; }
.check-item label { flex: 1; display: flex; align-items: center; gap: 12px; cursor: pointer; min-width: 0; }
.check-item.done .title { text-decoration: line-through; color: var(--muted); }

/* Loading: a skeleton for a new section, a dimmed view while it refreshes and a
   spinner on busy buttons. They show up after a short delay so quick answers never flicker. */
.skeleton { display: grid; gap: 16px; animation: appear .2s .15s both; }
.sk { height: 120px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(90deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
.sk.tall { height: 170px; }
@keyframes shimmer { to { background-position: -150% 0; } }
@keyframes appear { from { opacity: 0; } }
.view > *, .list { transition: opacity .15s; }
.view[aria-busy="true"] > :not(.skeleton), .list[aria-busy="true"] { opacity: .55; transition: opacity .2s .2s; }
.btn[aria-busy="true"] { position: relative; color: transparent !important; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); border-right-color: transparent; animation: spin .7s linear infinite; }
.btn.primary[aria-busy="true"]::after { border-color: var(--accent-text); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(1turn); } }
/* Entering a section: its first blocks fade in and rise a few pixels, one shortly after
   the other, once (app.js removes .enter after the first render). The app itself fades in
   after the loading logo. Refreshes and the skeleton never animate this way. */
.shell { animation: appear .25s ease-out both; }
.view.enter > :not(.skeleton) { animation: enter .2s ease-out both; }
.view.enter > :nth-child(2) { animation-delay: .04s; }
.view.enter > :nth-child(3) { animation-delay: .08s; }
.view.enter > :nth-child(4) { animation-delay: .12s; }
.view.enter > :nth-child(n+5) { animation-delay: .16s; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .shell, .view.enter > * { animation: none; }
  .skeleton { animation: none; }
  .sk, .btn[aria-busy="true"]::after { animation-duration: 3s; }
}

/* Long lists (a month of movements, a 150-line statement review): rows off
   screen are not laid out or painted until you scroll near them. */
.list > .item, .list > .review-row { content-visibility: auto; contain-intrinsic-size: auto 64px; }

/* Known services: badge in the brand's (approximate) color, see js/brands.js. */
.avatar.logo { background: var(--b, var(--accent-soft)); color: var(--f, var(--accent)); font-size: .82rem; font-weight: 800; letter-spacing: -.02em; }
.avatar.logo.long { font-size: .62rem; }
.check-item .avatar { width: 32px; height: 32px; }
.check-item .avatar svg { width: 17px; height: 17px; }
.logo-netflix { --b: #e50914; --f: #fff; } .logo-crunchyroll { --b: #f47521; --f: #fff; } .logo-spotify { --b: #1db954; --f: #0b1f12; }
.logo-youtube { --b: #ff0000; --f: #fff; } .logo-disney { --b: #113ccf; --f: #fff; } .logo-max { --b: #002be7; --f: #fff; }
.logo-paramount { --b: #0064ff; --f: #fff; } .logo-prime { --b: #00a8e1; --f: #fff; } .logo-amazon { --b: #232f3e; --f: #ff9900; }
.logo-apple { --b: #1d1d1f; --f: #fff; } .logo-google { --b: #4285f4; --f: #fff; } .logo-microsoft { --b: #107c10; --f: #fff; }
.logo-playstation { --b: #003791; --f: #fff; } .logo-steam { --b: #1b2838; --f: #c7d5e0; } .logo-chatgpt { --b: #10a37f; --f: #fff; }
.logo-claude { --b: #d97757; --f: #fff; } .logo-uber { --b: #000; --f: #fff; } .logo-rappi { --b: #ff441f; --f: #fff; }
.logo-pedidosya { --b: #fa0050; --f: #fff; } .logo-didi { --b: #fc4c02; --f: #fff; } .logo-starbucks { --b: #00704a; --f: #fff; } .logo-sube { --b: #0072bb; --f: #fff; } .logo-mercadolibre { --b: #ffe600; --f: #2d3277; } .logo-mercadopago { --b: #00b1ea; --f: #fff; }
.logo-edenor { --b: #0a5aa8; --f: #fff; } .logo-edesur { --b: #e4007c; --f: #fff; } .logo-metrogas { --b: #0072bc; --f: #fff; }
.logo-naturgy { --b: #f39200; --f: #fff; } .logo-camuzzi { --b: #00539f; --f: #fff; } .logo-aysa { --b: #0098d8; --f: #fff; }
.logo-personal { --b: #00b6ed; --f: #fff; } .logo-movistar { --b: #019df4; --f: #fff; } .logo-claro { --b: #da291c; --f: #fff; }
.logo-telecentro { --b: #e30613; --f: #fff; } .logo-flow { --b: #111; --f: #fff; } .logo-directv { --b: #00a6d6; --f: #fff; }
.logo-osde { --b: #0a3a7b; --f: #fff; } .logo-swiss { --b: #c8102e; --f: #fff; } .logo-galeno { --b: #00807f; --f: #fff; }

/* Real logos (public/logos): the logo carries its own color, the circle sets it off. */
.avatar.has-logo img { width: 58%; height: 58%; object-fit: contain; display: block; }
.has-logo.logo-netflix, .has-logo.logo-spotify { --b: #141414; }
.has-logo.logo-youtube, .has-logo.logo-google { --b: #fff; box-shadow: inset 0 0 0 1px var(--line); }

/* Phones: denser. The type steps down to 15px (fields stay at 16px so iOS does not zoom
   in on them), cards and lists take less padding and the big numbers shrink, so a screen
   shows more without the touch targets getting smaller than 44px. */
@media (max-width: 520px) {
  :root { font-size: 15px; --radius: 16px; }
  input, select, textarea { font-size: 16px; }
  .shell { padding-inline: 12px; }
  .topbar { padding: calc(8px + env(safe-area-inset-top)) 0 8px; }
  .topbar .brand img { width: 30px; height: 30px; border-radius: 9px; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.05rem; }
  .view { gap: 12px; }
  .card { padding: 14px; }
  .card > h2 + *, .card > .card-head + * { margin-top: 10px; }
  .btn { padding: 8px 14px; border-radius: 12px; }
  .btn.small { min-height: 36px; padding: 6px 10px; }
  .item { gap: 10px; padding: 10px 0; }
  .avatar { width: 34px; height: 34px; font-size: .9rem; }
  .avatar svg { width: 18px; height: 18px; }
  .item .meta { font-size: .82rem; }
  .hero .big { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .big-total { font-size: clamp(1.45rem, 6vw, 2rem); }
  .notice { padding: 10px 12px; }
  .choice { padding: 12px; }
  dialog .dialog-body { padding: 16px; gap: 12px; }
}

/* Charts (js/charts.js): each series takes its color from --c. Lines stretch to the card
   with their stroke unscaled; dots, labels and the average line are HTML on top. The month
   in progress is lighter, since it is not over. */
.c-now, .c-in { --c: var(--accent); }
.c-usual { --c: var(--muted); }
.c-out { --c: color-mix(in srgb, var(--text) 50%, var(--panel)); }
.c-fixed { --c: var(--seg-fixed); } .c-installments { --c: var(--seg-installments); } .c-variable { --c: var(--seg-variable); }
.c-cat1 { --c: var(--cat-1); } .c-cat2 { --c: var(--cat-2); } .c-cat3 { --c: var(--cat-3); } .c-cat4 { --c: var(--cat-4); }
.c-cat5 { --c: var(--cat-5); } .c-cat6 { --c: var(--cat-6); } .c-cat-other { --c: var(--cat-other); }
.chart { position: relative; min-width: 0; }
.chart-plot { position: relative; height: 130px; }
.chart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-base { stroke: var(--line); stroke-width: 1; }
.chart-area { fill: var(--c); opacity: .14; }
.chart-line { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.dashed { stroke-width: 2; stroke-dasharray: 5 5; }
.chart-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--c); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--panel); }
.chart-x { position: relative; height: 18px; margin-top: 4px; color: var(--muted); font-size: .75rem; }
.chart-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.chart-x span:first-child { transform: none; }
.chart-x span:last-child { transform: translateX(-100%); }
.col-plot { --lab: 20px; position: relative; display: flex; gap: 6px; height: 160px; }
.col-group { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) var(--lab); }
.col-area { display: flex; align-items: flex-end; justify-content: center; gap: 2px; min-height: 0; border-bottom: 1px solid var(--line); }
.col { display: block; flex: 1 1 0; max-width: 26px; min-height: 0; border-radius: 5px 5px 2px 2px; background: var(--c); }
.col-stack { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 34px; }
.col-stack .col { max-width: none; flex-basis: 0; border-radius: 3px; }
.col-stack .col:first-child { border-radius: 5px 5px 3px 3px; }
.col-group.current .col { opacity: .55; }
.col-label { overflow: hidden; color: var(--muted); font-size: .72rem; line-height: var(--lab); text-align: center; white-space: nowrap; }
.col-group.current .col-label { color: var(--text); font-weight: 700; }
.col-average { position: absolute; left: 0; right: 0; border-top: 2px dashed color-mix(in srgb, var(--text) 45%, transparent); pointer-events: none; }
.col-average span { position: absolute; right: 0; bottom: 3px; padding: 0 4px; border-radius: 4px; background: var(--panel); color: var(--muted); font-size: .72rem; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: .8rem; }
.chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .key { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.chart-legend .key-dash { width: 16px; border-top: 2px dashed var(--c); }
.card > .chart, .stack > .chart { margin-top: 12px; }
.chart + .chart-legend { margin-top: 8px; }
/* Column charts with many columns (dense: 90 days fit at 375 px, with labels skipped)
   and with columns you can choose (each one a button; the chosen one stays marked). */
.column-chart.dense { overflow-x: clip; }
.dense .col-plot { gap: 1px; }
.dense .col-stack { gap: 1px; }
.dense .col-stack .col, .dense .col-stack .col:first-child { border-radius: 2px; }
:is(.dense, .spread-labels) .col-label { display: flex; justify-content: center; overflow: visible; width: 100%; min-width: 0; }
:is(.dense, .spread-labels) .col-group.first .col-label { justify-content: flex-start; }
:is(.dense, .spread-labels) .col-group.last .col-label { justify-content: flex-end; }
button.col-group { padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
button.col-group:hover .col-area { background: color-mix(in srgb, var(--accent) 7%, transparent); }
button.col-group:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
.col-group.selected .col-area { background: var(--accent-soft); border-bottom-color: var(--accent); }
.col-group.selected .col-label { color: var(--text); font-weight: 700; }

/* Términos y Privacidad */
.legal { max-width: 760px; line-height: 1.55; }
.legal h1 { font-size: 1.5rem; margin: 0 0 4px; }
.legal h2 { font-size: 1.1rem; margin: 22px 0 6px; }
.legal p, .legal li { margin: 6px 0; }
.legal ul, .legal ol { padding-left: 20px; }
.legal-table { overflow-x: auto; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.legal-table th, .legal-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-links { text-align: center; margin-top: 12px; }
.legal-page { place-items: start center; }
.legal-page > div { width: min(760px, 100%); display: grid; gap: 12px; }
.legal-page .card.legal { width: 100%; display: block; }

/* Instalá Nido */
.install-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.install-step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; line-height: 1.5; }
.install-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); font-weight: 700; }
.install-key { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 6px; background: var(--panel-2); white-space: nowrap; }
.install-key svg { width: 16px; height: 16px; }

/* Pendientes: the bell and its count */
.pending-link { position: relative; }
.pending-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-text); font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center; }
.pending-item h2 { font-size: 1.05rem; margin: 0 0 4px; }

/* The section and the headings that get focus on navigating (so a screen reader starts
   there) never draw a frame: on an iPhone it showed as a blue box around the whole page. */
main:focus, [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* Installed on an iPhone the status bar is transparent (black-translucent): this strip of
   the page's color sits under the clock, so what scrolls up does not show through it. */
body::before { content: ''; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top); background: var(--bg); z-index: 45; pointer-events: none; }

/* iOS gives date fields their own width and centers the date: in a two-column form the date
   ran over the amount next to it. */
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.fields-2 > *, .form .field { min-width: 0; }