/* =====================================================================
   AMPTA · estilo 2026
   Una sola capa visual para toda la app (claro y oscuro).
   Blanco y tinta, tarjetas grandes y redondeadas, el saldo como protagonista
   y el atardecer de la portada como único color de marca.
   Se carga después de styles.css; los selectores empiezan con :root[data-mode] para ganarle.
   ===================================================================== */

:root[data-mode] {
  --ink: #111113; --on-ink: #ffffff;
  --sun-1: #ff5f6d; --sun-2: #ff9a44; --sun-3: #ffc46b; --sun-4: #8b5cf6;
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-mode] :is(#app-layout, .modal, .help-tip, .bottomnav, #guide-modal) {
  --bg: #f5f4f2; --bg2: #ffffff; --panel: #ffffff; --panel2: #f2f0ed; --panel-dark: #111113;
  --txt: #111113; --muted: #6b6965; --border: #e9e6e1;
  --accent: #111113; --accent2: #2a2a2e; --ink: #111113; --on-ink: #ffffff;
  --green: #15803d; --red: #d92d3a; --amber: #b45309;
  --radius: 24px; --shadow: 0 1px 2px rgba(17,17,19,.04), 0 10px 30px -12px rgba(17,17,19,.08);
  --card-sun: linear-gradient(155deg, #ffe1cc 0%, #fbd3c6 38%, #f3e3d6 72%, #efe9e2 100%);
}
:root[data-mode="dark"] :is(#app-layout, .modal, .help-tip, .bottomnav, #guide-modal) {
  --bg: #0c0c0d; --bg2: #141416; --panel: #161618; --panel2: #202023; --panel-dark: #f2f1ef;
  --txt: #f2f1ef; --muted: #9b9893; --border: #29292c;
  --accent: #f2f1ef; --accent2: #ffffff; --ink: #f2f1ef; --on-ink: #111113;
  --green: #4ade80; --red: #ff6b74; --amber: #fbbf24;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.6);
  --card-sun: radial-gradient(120% 90% at 100% 0%, rgba(255,122,89,.45), transparent 60%), radial-gradient(90% 80% at 0% 100%, rgba(139,92,246,.35), transparent 60%), #1b1718;
}

/* ---------- Base ---------- */
:root[data-mode] body:not(.landing-active), :root[data-mode] body.app-active { background: var(--bg, #f5f4f2); }
:root[data-mode="light"] body:not(.landing-active) { background: #f5f4f2; }
:root[data-mode="dark"] body:not(.landing-active) { background: #0c0c0d; }
:root[data-mode] #app-layout, :root[data-mode] .modal, :root[data-mode] .bottomnav, :root[data-mode] .help-tip, :root[data-mode] #guide-modal { font-family: var(--font); color: var(--txt); }
:root[data-mode] #app-layout { background: var(--bg); }
:root[data-mode] #app-layout :is(button, input, select, textarea) { font-family: inherit; }
:root[data-mode] #app-layout :is(.amt, .val, .v, .hero-total-value, strong, b) { font-variant-numeric: tabular-nums; }
:root[data-mode] #app-layout ::selection { background: #ffd3bf; color: #111113; }
:root[data-mode] #app-layout :focus-visible, :root[data-mode] .modal :focus-visible, :root[data-mode] .bottomnav :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:root[data-mode] #app-layout h1, :root[data-mode] #app-layout h2, :root[data-mode] #app-layout h3 { letter-spacing: -0.02em; }
:root[data-mode] #app-layout .panel-intro, :root[data-mode] #app-layout .panel-hint, :root[data-mode] #app-layout .pay-hint { font-size: 13px; color: var(--muted); }

/* ---------- Escritorio: barra lateral clara ---------- */
/* Título de cada pantalla, siempre visible */
:root[data-mode] #app-layout .topbar { display: flex; align-items: center; justify-content: space-between; position: relative; background: none; }

@media (min-width: 900px) {
  :root[data-mode] #app-layout .mainwrap { padding-top: 0; }
  :root[data-mode] #app-layout .sidebar { background: var(--panel); border-right: 1px solid var(--border); width: 232px; font-family: var(--font); }
  :root[data-mode] #app-layout .sidebar .brand-home { border-bottom: 0; padding: 22px 22px 8px; background: none; }
  :root[data-mode] #app-layout .sidebar .sidebar-brand-logo { display: none; }
  :root[data-mode] #app-layout .sidebar .brand-home::before {
    content: ""; display: inline-block; width: 26px; height: 26px; vertical-align: middle;
    background: url("brand/logo-2026/ampta-icon-2026.png") center / contain no-repeat;
  }
  :root[data-mode="dark"] #app-layout .sidebar .brand-home::before { background-image: url("brand/logo-2026/ampta-icon-2026-white.png"); }
  :root[data-mode] #app-layout .sidebar .brand-home::after { content: "ampta"; vertical-align: middle; margin-left: 8px; font: 700 20px/1 var(--font); letter-spacing: -0.04em; color: var(--txt); }
  :root[data-mode] #app-layout .sidebar .side-add {
    margin: 14px 16px 10px; background: var(--ink); color: var(--on-ink); border-radius: 999px;
    padding: 13px 14px; font-weight: 600; font-size: 14px; box-shadow: none;
  }
  :root[data-mode] #app-layout .sidebar .side-add:hover { background: var(--accent2); }
  :root[data-mode] #app-layout .sidebar .side-nav { padding: 6px 12px; gap: 2px; }
  :root[data-mode] #app-layout .sidebar .snav { color: var(--muted); font-weight: 500; font-size: 14px; border-radius: 999px; padding: 10px 14px; }
  :root[data-mode] #app-layout .sidebar .snav:hover { background: var(--panel2); color: var(--txt); }
  :root[data-mode] #app-layout .sidebar .snav.active { background: var(--panel2); color: var(--txt); font-weight: 600; }
  :root[data-mode] #app-layout .sidebar .snav.active::before { display: none; }
  :root[data-mode] #app-layout .sidebar .side-account { border-top: 1px solid var(--border); }
  :root[data-mode] #app-layout .sidebar .side-account:hover { background: var(--panel2); }
  :root[data-mode] #app-layout .sidebar .side-account-info b { color: var(--txt); }
  :root[data-mode] #app-layout .sidebar .side-account-info span { color: var(--muted); }
  :root[data-mode] #app-layout .mainwrap { max-width: 1180px; padding: 0 36px 40px; }
  :root[data-mode] #app-layout .topbar { padding: 26px 0 18px; }
  :root[data-mode] #app-layout .mas-mobile { display: none; }
}
:root[data-mode] #app-layout .topbar { background: transparent; border: 0; box-shadow: none; }
:root[data-mode] #app-layout .page-title { font: 700 28px/1.1 var(--font); letter-spacing: -0.035em; color: var(--txt); }
:root[data-mode] #app-layout .avatar { background: var(--ink); color: var(--on-ink); box-shadow: none; }

/* ---------- Tarjetas ---------- */
:root[data-mode] #app-layout .panel { background: var(--panel); border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
:root[data-mode="dark"] #app-layout .panel { border-color: var(--border); box-shadow: none; }
:root[data-mode] #app-layout .panel-head { margin-bottom: 14px; }
:root[data-mode] #app-layout .panel-head h2 { font-size: 17px; font-weight: 650; text-transform: none; letter-spacing: -0.02em; color: var(--txt); }
:root[data-mode] #app-layout .link-btn { color: var(--muted); font-weight: 500; font-size: 14px; text-decoration: none; }
:root[data-mode] #app-layout .link-btn:hover { color: var(--txt); text-decoration: underline; text-underline-offset: 3px; }
:root[data-mode] #app-layout .grid { gap: 18px; }
:root[data-mode] #app-layout .col-main, :root[data-mode] #app-layout .col-side { display: flex; flex-direction: column; gap: 18px; }
:root[data-mode] #app-layout #view-inicio .grid { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 900px) { :root[data-mode] #app-layout #view-inicio .grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); align-items: start; } }
:root[data-mode] #app-layout .col-main > .panel, :root[data-mode] #app-layout .col-side > .panel, :root[data-mode] #app-layout .col-main > .hero { margin-bottom: 0; }

/* ---------- Botones y campos ---------- */
:root[data-mode] #app-layout :is(.btn-primary, .btn-add, .bill-pay, .primary), :root[data-mode] .modal :is(.btn-primary, .btn-add) {
  background: var(--ink); color: var(--on-ink); border: 0; border-radius: 999px; box-shadow: none; font-weight: 600;
}
:root[data-mode] #app-layout :is(.btn-primary, .btn-add):hover, :root[data-mode] .modal .btn-primary:hover { background: var(--accent2); }
:root[data-mode] #app-layout .btn-add.secondary, :root[data-mode] #app-layout .btn-add.danger-btn { background: var(--panel2); color: var(--txt); }
:root[data-mode] #app-layout .btn-add.danger-btn { color: var(--red); }
:root[data-mode] #app-layout :is(input, select, textarea), :root[data-mode] .modal :is(input, select, textarea) {
  background: var(--panel2); border: 1px solid transparent; border-radius: 14px; color: var(--txt);
}
:root[data-mode] #app-layout :is(input, select, textarea):focus, :root[data-mode] .modal :is(input, select, textarea):focus { border-color: var(--ink); outline: none; box-shadow: none; }
:root[data-mode] #app-layout .help-dot { width: 18px; height: 18px; font-size: 11px; background: var(--panel2); color: var(--muted); border: 0; }

/* Pestañas y filtros: píldoras con la elegida en tinta */
:root[data-mode] #app-layout :is(.pay-chips, .report-view-tabs, .group-tabs, .report-quick-ranges, .seg-mini), :root[data-mode] .modal .seg {
  background: var(--panel2); border: 0; border-radius: 999px; padding: 4px; box-shadow: none;
}
:root[data-mode] #app-layout :is(.pay-chips, .report-view-tabs, .group-tabs, .report-quick-ranges, .seg-mini) button, :root[data-mode] .modal .seg .seg-btn {
  border-radius: 999px; background: transparent; color: var(--muted); border: 0; font-weight: 600; box-shadow: none;
}
:root[data-mode] #app-layout :is(.pay-chips, .report-view-tabs, .group-tabs, .report-quick-ranges, .seg-mini) button.active, :root[data-mode] .modal .seg .seg-btn.active {
  background: var(--ink); color: var(--on-ink);
}

/* ---------- Inicio: el saldo primero ---------- */
:root[data-mode] #app-layout .total-card {
  position: relative; background: var(--card-sun); color: var(--txt); border: 0; border-radius: 32px;
  padding: 44px 24px 26px; box-shadow: var(--shadow); text-align: center; overflow: hidden;
}
:root[data-mode] #app-layout .total-card::after {
  content: ""; position: absolute; inset: auto -20% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent); pointer-events: none;
}
:root[data-mode="dark"] #app-layout .total-card::after { opacity: .08; }
:root[data-mode] #app-layout .total-card .total-actions { top: 16px; right: 16px; z-index: 1; }
:root[data-mode] #app-layout .total-card .hero-eye { background: rgba(255,255,255,.55); border: 0; color: var(--txt); width: 36px; height: 36px; border-radius: 50%; }
:root[data-mode="dark"] #app-layout .total-card .hero-eye { background: rgba(255,255,255,.1); }
:root[data-mode] #app-layout .total-card .hero-total { position: relative; z-index: 1; }
:root[data-mode] #app-layout .total-card .hero-total-value { font: 700 48px/1 var(--font); letter-spacing: -0.045em; color: var(--txt); margin: 0 0 10px; }
:root[data-mode] #app-layout .total-card .hero-total-label { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--txt); opacity: .72; margin: 0; }
:root[data-mode] #app-layout .total-card .hero-total-label span { white-space: nowrap; }
:root[data-mode] #app-layout .hero-cur { display: inline-flex; gap: 4px; margin-top: 22px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.5); }
:root[data-mode="dark"] #app-layout .hero-cur { background: rgba(255,255,255,.08); }
:root[data-mode] #app-layout .hero-cur button { border: 0; background: transparent; color: var(--txt); font: 600 14px/1 var(--font); padding: 11px 22px; border-radius: 999px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
:root[data-mode] #app-layout .hero-cur button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
:root[data-mode] #app-layout .total-card .hero-total-note { margin-top: 12px; font-size: 13px; color: var(--muted); }
:root[data-mode] #app-layout .total-card .hero-total-goals { border-top: 1px solid rgba(17,17,19,.1); margin-top: 22px; padding-top: 16px; color: var(--txt); opacity: .85; font-size: 13px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
:root[data-mode="dark"] #app-layout .total-card .hero-total-goals { border-color: rgba(255,255,255,.12); }
:root[data-mode] #app-layout .total-card .hero-total-goals b { color: var(--txt); font-weight: 650; margin-left: 4px; }

/* Tus cuentas: tarjetas que se deslizan */
:root[data-mode] #app-layout .patrimonio { background: var(--panel); color: var(--txt); box-shadow: var(--shadow); padding: 20px 0 20px; }
:root[data-mode] #app-layout .patrimonio .patrimonio-head { padding: 0 20px; }
:root[data-mode] #app-layout .patrimonio .patrimonio-toggle { color: var(--txt); cursor: default; padding: 0; }
:root[data-mode] #app-layout .patrimonio .patrimonio-title { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; text-transform: none; }
:root[data-mode] #app-layout .patrimonio .patrimonio-count { color: var(--muted); font-weight: 500; }
:root[data-mode] #app-layout .patrimonio .hero-visibility-edit { background: none; border: 0; color: var(--muted); font-weight: 500; font-size: 14px; padding: 4px 0; }
:root[data-mode] #app-layout .patrimonio .hero-visibility-edit:hover { background: none; color: var(--txt); }
:root[data-mode] #app-layout .patrimonio .hero-balances {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 6px; margin-top: 14px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
:root[data-mode] #app-layout .patrimonio .hero-balances::-webkit-scrollbar { display: none; }
:root[data-mode] #app-layout .patrimonio .hbal {
  flex: 0 0 168px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; min-height: 116px;
  background: var(--panel2); border: 0; border-radius: 20px; padding: 16px; backdrop-filter: none; text-align: left; font: inherit; color: var(--txt);
}
:root[data-mode] #app-layout .patrimonio .hbal .n { color: var(--muted); font-size: 13px; font-weight: 500; }
:root[data-mode] #app-layout .patrimonio .hbal .v { color: var(--txt); font-size: 20px; font-weight: 700; letter-spacing: -0.03em; margin-top: auto; }
:root[data-mode] #app-layout .patrimonio .hbal .v.neg { color: var(--red); }
:root[data-mode] #app-layout .patrimonio .hbal .v + .n { margin-top: 2px; }
:root[data-mode] #app-layout .patrimonio .hbal.credit { background: var(--ink); color: var(--on-ink); cursor: pointer; }
:root[data-mode] #app-layout .patrimonio .hbal.credit .n { color: color-mix(in srgb, var(--on-ink) 65%, transparent); }
:root[data-mode] #app-layout .patrimonio .hbal.credit .v, :root[data-mode] #app-layout .patrimonio .hbal.credit .v.neg { color: var(--on-ink); }
:root[data-mode] #app-layout .patrimonio .hbal-receivable { background: transparent; border: 1.5px dashed var(--border); cursor: pointer; }
:root[data-mode] #app-layout .patrimonio .hero-balances-empty { color: var(--muted); border: 0; padding: 0; font-size: 14px; }

/* Este mes */
:root[data-mode] #app-layout #view-inicio .month-panel { padding: 20px; }
:root[data-mode] #app-layout #view-inicio .month-panel .panel-head h2 { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; text-transform: none; color: var(--txt); }
:root[data-mode] #app-layout #view-inicio .month-panel .mt { background: var(--panel2); border: 0; padding: 14px 12px; border-radius: 18px; }
:root[data-mode] #app-layout #view-inicio .month-panel .mt .lbl { color: var(--muted); font-weight: 500; font-size: 13px; letter-spacing: 0; }
:root[data-mode] #app-layout #view-inicio .month-panel .mt .val { font-weight: 700; }
:root[data-mode] #app-layout .month-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
:root[data-mode] #app-layout .mt, :root[data-mode] #app-layout .mt.traceable { background: var(--panel2); border: 0; border-radius: 18px; padding: 14px 12px; text-align: left; cursor: pointer; transition: background-color .15s ease; }
:root[data-mode] #app-layout .mt:hover { background: color-mix(in srgb, var(--panel2) 80%, var(--txt) 6%); }
:root[data-mode] #app-layout .mt .lbl { font-size: 13px; color: var(--muted); font-weight: 500; }
:root[data-mode] #app-layout .mt .val { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; margin-top: 6px; color: var(--txt); }
:root[data-mode] #app-layout .mt .val.in { color: var(--green); }
:root[data-mode] #app-layout .mt .val.out { color: var(--txt); }

/* Filas de movimientos con ícono redondo */
:root[data-mode] #app-layout .tx { gap: 14px; padding: 12px 0; border-bottom: 0; }
:root[data-mode] #app-layout .tx-list .tx + .tx { border-top: 1px solid var(--border); }
:root[data-mode] #app-layout .tx .ic { width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--cat, var(--muted)) 16%, var(--panel)); color: var(--cat, var(--muted)); }
:root[data-mode] #app-layout .tx .ic.in { --cat: var(--green); }
:root[data-mode] #app-layout .tx .ic.tr { --cat: var(--amber); }
:root[data-mode] #app-layout .tx .ic .ui-icon { width: 20px; height: 20px; }
:root[data-mode] #app-layout .tx .info .t1 { font-size: 15px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-mode] #app-layout .tx .info .t2 { font-size: 13px; color: var(--muted); }
:root[data-mode] #app-layout .tx .tx-cat { background: none; padding: 0; color: var(--muted); font-weight: 500; }
:root[data-mode] #app-layout .tx .tx-cat::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cat, var(--muted)); margin-right: 5px; vertical-align: 1px; }
:root[data-mode] #app-layout .tx .tx-cat + span::before { content: "· "; }
:root[data-mode] #app-layout .tx .amt { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
:root[data-mode] #app-layout .tx .amt.out { color: var(--txt); }
:root[data-mode] #app-layout .tx .amt.in { color: var(--green); }
:root[data-mode] #app-layout .tx .amt.tr { color: var(--muted); }
:root[data-mode] #app-layout .recent-list .tx { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 0; }
:root[data-mode] #app-layout .recent-list .tx:first-child { padding-top: 2px; }
:root[data-mode] #app-layout .recent-list .amt-col { text-align: right; flex-shrink: 0; }
:root[data-mode] #app-layout .recent-list .amt-col small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }

/* Próximos pagos */
:root[data-mode] #app-layout .bill-mini-total { background: var(--panel2); border: 0; border-radius: 16px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
:root[data-mode] #app-layout .bill-mini-total span { color: var(--muted); font-size: 13px; }
:root[data-mode] #app-layout .bill-mini-total b { font-size: 17px; letter-spacing: -0.02em; }
:root[data-mode] #app-layout .bill-mini-row { background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 13px 0; color: var(--txt); }
:root[data-mode] #app-layout .bill-mini-row:last-child { border-bottom: 0; padding-bottom: 0; }
:root[data-mode] #app-layout .bill-mini-row strong { font-weight: 650; }
:root[data-mode] #app-layout .bill-mini-main small { color: var(--muted); }
:root[data-mode] #app-layout .bill-mini-main small.overdue { color: var(--red); }
:root[data-mode] #app-layout .bill-mini-main small.due-soon { color: var(--amber); }

/* Gastos del mes */
:root[data-mode] #app-layout .cat-total span { color: var(--muted); }
:root[data-mode] #app-layout .cat-bar { height: 10px; border-radius: 999px; gap: 3px; background: none; }
:root[data-mode] #app-layout .cat-bar span { border-radius: 999px; }
:root[data-mode] #app-layout .cat-row { border: 0; background: none; padding: 9px 0; }

/* Dólar: una línea discreta */
:root[data-mode] #app-layout .dolar-box { margin: 0; }
:root[data-mode] #app-layout .dolar-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
:root[data-mode] #app-layout .dolar-chip { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 10px 8px; box-shadow: none; flex-direction: column; align-items: center; gap: 2px; }
:root[data-mode] #app-layout .dolar-chip .dl { color: var(--muted); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
:root[data-mode] #app-layout .dolar-chip .dv { color: var(--txt); font-size: 15px; font-weight: 650; }

/* Aviso de Mercado Pago y primeros pasos */
:root[data-mode] #app-layout .mp-banner { border-radius: 20px; }
:root[data-mode] #app-layout .onboarding { background: var(--panel) !important; border: 1px solid var(--border) !important; }

/* ---------- Más ---------- */
:root[data-mode] #app-layout #view-mas { display: none; }
:root[data-mode] #app-layout #view-mas.active { display: flex; flex-direction: column; gap: 22px; max-width: 640px; }
:root[data-mode] #app-layout .mas-group-block h2 { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 8px 6px; letter-spacing: 0; }
:root[data-mode] #app-layout #view-mas .mas-panel { padding: 6px; gap: 0; margin: 0; }
:root[data-mode] #app-layout #view-mas .biglink { background: none; border: 0; border-radius: 16px; padding: 10px 12px; gap: 14px; font-size: 15px; font-weight: 500; color: var(--txt); margin: 0; }
:root[data-mode] #app-layout #view-mas .biglink:hover { background: var(--panel2); }
:root[data-mode] #app-layout #view-mas .biglink::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); opacity: .6; }
:root[data-mode] #app-layout .mas-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--panel2); display: grid; place-items: center; flex-shrink: 0; }
:root[data-mode] #app-layout .mas-ic .ui-icon { width: 19px; height: 19px; color: var(--txt); }
:root[data-mode] #app-layout #view-mas .mas-account { background: var(--panel); box-shadow: var(--shadow); border-radius: var(--radius); padding: 16px; }
:root[data-mode] #app-layout #view-mas .mas-account .avatar { width: 48px; height: 48px; }

/* ---------- Celular: barra de abajo con el + al medio ---------- */
@media (max-width: 899px) {
  :root[data-mode] nav.bottomnav { background: transparent; border: 0; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 0; pointer-events: none; }
  :root[data-mode] nav.bottomnav .nav-pill {
    pointer-events: auto; display: flex; align-items: center; justify-content: space-around; width: 100%;
    background: var(--panel); border: 1px solid var(--border); border-radius: 28px; padding: 8px 6px;
    box-shadow: 0 10px 30px -10px rgba(17,17,19,.18); font-family: var(--font);
  }
  :root[data-mode] nav.bottomnav .nav-btn { color: var(--muted); font-size: 11px; font-weight: 500; gap: 4px; padding: 6px 4px; background: none; border-radius: 16px; }
  :root[data-mode] nav.bottomnav .nav-btn.active { color: var(--txt); background: none; font-weight: 650; }
  :root[data-mode] nav.bottomnav .nav-btn .ui-icon { width: 22px; height: 22px; }
  :root[data-mode] nav.bottomnav .nav-pill .fab { width: 54px; height: 54px; background: var(--ink); color: var(--on-ink); box-shadow: 0 8px 20px -6px rgba(17,17,19,.45); }
  :root[data-mode] nav.bottomnav .nav-pill .fab .ui-icon { width: 26px; height: 26px; }
  :root[data-mode] #app-layout .mainwrap { padding: 0 16px 112px; }
  :root[data-mode] #app-layout .topbar { padding: 18px 2px 12px; }
  :root[data-mode] #app-layout .page-title { font-size: 26px; }
  :root[data-mode] #app-layout .panel { padding: 18px; border-radius: 22px; }
  :root[data-mode] #app-layout .total-card { border-radius: 28px; padding: 40px 18px 22px; }
  :root[data-mode] #app-layout .total-card .hero-total-value { font-size: 42px; }
  :root[data-mode] #app-layout .patrimonio { padding: 18px 0; }
  :root[data-mode] #app-layout .patrimonio .patrimonio-head { padding: 0 18px; }
  :root[data-mode] #app-layout .patrimonio .hero-balances { padding: 4px 18px 6px; }
  :root[data-mode] #app-layout .patrimonio .hbal { flex-basis: 150px; min-height: 108px; }
  :root[data-mode] #app-layout .mt .val { font-size: 16px; }
  :root[data-mode] #app-layout .month-totals { gap: 8px; }
}

/* ---------- Ventanas (en el celular, hoja que sube) ---------- */
:root[data-mode] .modal { background: rgba(17,17,19,.42); backdrop-filter: blur(2px); }
:root[data-mode] .modal .modal-box { background: var(--panel); color: var(--txt); border: 0; border-radius: 28px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.35); }
:root[data-mode] .modal .modal-top h3 { font: 700 20px/1.2 var(--font); letter-spacing: -0.02em; }
:root[data-mode] .modal .x { background: var(--panel2); color: var(--txt); border: 0; border-radius: 50%; width: 36px; height: 36px; }
:root[data-mode] .modal .movement-amount input { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; text-align: center; background: none; }
:root[data-mode] .modal .movement-more-toggle { background: var(--panel2); border: 0; border-radius: 16px; color: var(--txt); }
@media (max-width: 899px) {
  :root[data-mode] .modal { align-items: end; padding: 0; }
  :root[data-mode] .modal .modal-box { width: 100%; max-width: none; border-radius: 28px 28px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
:root[data-mode] #app-toast { background: var(--ink, #111113); color: var(--on-ink, #fff); font-family: var(--font); }

/* Montos ocultos */

@media (prefers-reduced-motion: reduce) {
  :root[data-mode] #app-layout *, :root[data-mode] .modal * { transition: none !important; animation: none !important; }
}

/* ---------- Ingreso y registro ---------- */
:root .auth-screen { background: rgba(17,17,19,.38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
:root .auth-screen .auth-box {
  --panel: #ffffff; --panel2: #f2f0ed; --txt: #111113; --muted: #6b6965; --border: #e9e6e1; --accent: #111113;
  background: #fff; color: #111113; border: 0; border-radius: 32px; padding: 34px 28px 28px; max-width: 400px;
  box-shadow: 0 40px 100px -30px rgba(40,20,30,.45);
}
:root .auth-screen .auth-brand { display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 28px/1 "Geist", sans-serif; letter-spacing: -0.05em; }
:root .auth-screen .auth-sub { color: #6b6965; font-size: 16px; margin: 12px 0 24px; }
:root .auth-screen .auth-close { background: #f2f0ed; color: #111113; top: 14px; right: 14px; width: 36px; height: 36px; }
:root .auth-screen label { color: #44423f; font-size: 14px; font-weight: 500; }
:root .auth-screen input { background: #f2f0ed; border: 1px solid transparent; border-radius: 14px; color: #111113; padding: 13px 14px; font-size: 16px; }
:root .auth-screen input:focus { border-color: #111113; outline: none; box-shadow: none; }
:root .auth-screen .btn-primary { background: #111113; color: #fff; border: 0; border-radius: 999px; padding: 15px; font-weight: 600; font-size: 16px; box-shadow: none; }
:root .auth-screen .btn-primary:hover { background: #2a2a2e; }
:root .auth-screen .google-btn { background: #fff; color: #111113; border: 1px solid #e3dfd9; border-radius: 999px; padding: 13px; box-shadow: none; }
:root .auth-screen .google-btn:hover { border-color: #111113; box-shadow: none; }
:root .auth-screen .link-btn { color: #111113; font-weight: 600; }
:root .auth-screen .auth-forgot { color: #6b6965; font-weight: 500; }
:root .auth-screen .auth-divider::before, :root .auth-screen .auth-divider::after { background: #e9e6e1; }
@media (max-width: 560px) {
  :root .auth-screen { padding: 0; align-items: end; }
  :root .auth-screen .auth-box { max-width: none; border-radius: 32px 32px 0 0; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}

/* ---------- Resúmenes de cada sección (A pagar, Tarjetas, Automáticos…): tarjeta tinta ---------- */
:root[data-mode] #app-layout :is(.panel-dark, .card-hero):not(.total-card) {
  background: #141416; color: #fff; border: 0; border-radius: 28px; box-shadow: var(--shadow);
}
:root[data-mode="dark"] #app-layout :is(.panel-dark, .card-hero):not(.total-card) { background: #232326; }
:root[data-mode] #app-layout :is(.pay-sum-label, .card-hero-main .lbl, .card-hero-name, .auto-sum-label) { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; color: rgba(255,255,255,.72); }
:root[data-mode] #app-layout :is(.pay-sum-value, .card-hero-main .val) { font-weight: 700; letter-spacing: -0.045em; }
:root[data-mode] #app-layout .card-hero .chip { border-radius: 999px; }
:root[data-mode] #app-layout .card-hero .chip-primary { color: #111113; background: #fff; box-shadow: none; }
:root[data-mode] #app-layout .panel-dark .help-dot, :root[data-mode] #app-layout .card-hero .help-dot { background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
:root[data-mode] #app-layout :is(.bill-group-title, .section-label) { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
:root[data-mode] #app-layout .bill-row { border-radius: 20px; border: 0; background: var(--panel); box-shadow: var(--shadow); }
:root[data-mode] #app-layout .bill-row.projected { background: transparent; border: 1.5px dashed var(--border); box-shadow: none; }

/* ---------- Movimientos: una línea por dato ---------- */
:root[data-mode] #app-layout #view-movimientos .tx-panel-head { justify-content: flex-end; }
:root[data-mode] #app-layout #view-movimientos .tx-panel-head h2 { display: none; }
:root[data-mode] #app-layout #view-movimientos .tx-panel-head .help-dot { display: none; }
:root[data-mode] #app-layout .tx .info .t2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-mode] #app-layout .tx-search { background: var(--panel2); border: 0; border-radius: 999px; }
:root[data-mode] #app-layout .tx-search input { background: transparent; }
:root[data-mode] #app-layout .tx-filter-toggle { background: var(--panel2); border: 0; border-radius: 999px; color: var(--txt); }
:root[data-mode] #app-layout .tx-actions .tx-action { color: var(--muted); background: none; border: 0; }
:root[data-mode] #app-layout .tx-actions .tx-action:hover { color: var(--txt); background: var(--panel2); }
@media (max-width: 899px) {
  :root[data-mode] #app-layout .tx-actions { flex-direction: column; gap: 0; margin-right: -6px; }
  :root[data-mode] #app-layout .tx-actions .tx-action { width: 30px; height: 30px; }
}
:root[data-mode] #cargar-modal .movement-amount input, :root[data-mode] #cargar-modal .movement-amount input:focus { border: 1px solid var(--border); box-shadow: none; border-radius: 18px; }
:root[data-mode] .modal .movement-amount input:focus { border-color: var(--ink); }

/* =====================================================================
   Ajustes de proporción y secciones simples (Inicio, Movimientos, A pagar, Tarjetas)
   ===================================================================== */
/* Inicio: tus cuentas con su margen; en compu en grilla, en el celular se deslizan */
:root[data-mode] #app-layout #view-inicio .patrimonio .hero-balances { padding: 4px 20px 6px; margin: 14px 0 0; scroll-padding-left: 20px; }
@media (min-width: 900px) {
  :root[data-mode] #app-layout #view-inicio .patrimonio { padding: 20px; }
  :root[data-mode] #app-layout #view-inicio .patrimonio .patrimonio-head { padding: 0; }
  :root[data-mode] #app-layout #view-inicio .patrimonio .hero-balances { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 0; overflow: visible; }
  :root[data-mode] #app-layout #view-inicio .patrimonio .hbal { min-height: 104px; }
}
@media (max-width: 899px) {
  :root[data-mode] #app-layout #view-inicio .patrimonio .hero-balances { padding: 4px 18px 6px; scroll-padding-left: 18px; }
}

/* Vacíos: un ícono, una frase y una acción */
:root[data-mode] #app-layout .empty-block { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 2px 0 4px; }
:root[data-mode] #app-layout :is(.empty-block p, .empty-copy) { margin: 0; color: var(--muted); font-size: 14px; }
:root[data-mode] #app-layout .empty-block .link-btn { background: var(--panel2); color: var(--txt); padding: 9px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
:root[data-mode] #app-layout .empty-block .link-btn:hover { background: color-mix(in srgb, var(--panel2) 80%, var(--txt) 8%); }
:root[data-mode] #app-layout .empty-state { border: 0; background: transparent; box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 16px; text-align: center; }
:root[data-mode] #app-layout .empty-state b { font-size: 16px; font-weight: 650; color: var(--txt); }
:root[data-mode] #app-layout .empty-state > span:not(.empty-ic) { color: var(--muted); font-size: 14px; }
:root[data-mode] #app-layout .empty-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--panel2); display: grid; place-items: center; margin-bottom: 8px; color: var(--txt); }
:root[data-mode] #app-layout .empty-ic .ui-icon { width: 22px; height: 22px; }
:root[data-mode] #app-layout #bill-list > .empty-state { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }

/* Menos signos "!" en estas secciones */
:root[data-mode] #app-layout :is(#view-pagos, #view-tarjeta, #view-movimientos) .help-dot { display: none; }

/* ---------- Movimientos: buscar arriba, tipo en píldoras, filtros chicos ---------- */
:root[data-mode] #app-layout #view-movimientos .tx-tools { display: grid; gap: 12px; margin: 0 0 6px; }
:root[data-mode] #app-layout #view-movimientos .tx-tools-main { display: flex; gap: 8px; align-items: center; }
:root[data-mode] #app-layout #view-movimientos .tx-search { flex: 1; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; background: var(--panel2); border: 0; border-radius: 999px; color: var(--muted); }
:root[data-mode] #app-layout #view-movimientos .tx-search input { flex: 1; height: 100%; border: 0; background: transparent; padding: 0; font-size: 15px; color: var(--txt); }
:root[data-mode] #app-layout #view-movimientos .tx-search input::placeholder { color: var(--muted); }
:root[data-mode] #app-layout #view-movimientos :is(.tx-select-btn, .tx-filter-toggle) {
  height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--panel2); color: var(--txt);
  font: 600 14px/1 var(--font); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer;
}
:root[data-mode] #app-layout #view-movimientos .tx-filter-toggle b { min-width: 20px; height: 20px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 12px; display: inline-grid; place-items: center; padding: 0 5px; }
:root[data-mode] #app-layout #view-movimientos .tx-filter-toggle.active { background: var(--ink); color: var(--on-ink); }
:root[data-mode] #app-layout #view-movimientos .tx-kind-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
:root[data-mode] #app-layout #view-movimientos .tx-kind-chips::-webkit-scrollbar { display: none; }
:root[data-mode] #app-layout #view-movimientos .tx-kind-chips button { flex: 0 0 auto; border: 1px solid var(--border); background: transparent; border-radius: 999px; padding: 9px 18px; font: 600 14px/1 var(--font); color: var(--muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
:root[data-mode] #app-layout #view-movimientos .tx-kind-chips button:hover { color: var(--txt); }
:root[data-mode] #app-layout #view-movimientos .tx-kind-chips button.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
:root[data-mode] #app-layout #view-movimientos .tx-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; padding: 0; grid-template-columns: none; }
:root[data-mode] #app-layout #view-movimientos .tx-dates:not(.hidden) { display: contents; }
:root[data-mode] #app-layout #view-movimientos .tx-pill {
  display: inline-flex; flex-direction: row; align-items: center; gap: 6px; height: 40px; margin: 0; padding: 0 12px 0 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 14px; font-weight: 500;
}
:root[data-mode] #app-layout #view-movimientos .tx-pill:focus-within { border-color: var(--ink); }
:root[data-mode] #app-layout #view-movimientos .tx-pill :is(select, input) {
  border: 0; background-color: transparent; padding: 0 18px 0 0; margin: 0; height: 38px; width: auto; min-width: 0; max-width: 180px;
  color: var(--txt); font: 600 14px/1 var(--font); -webkit-appearance: none; appearance: none; box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6965' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 14px;
}
:root[data-mode] #app-layout #view-movimientos .tx-pill input { background-image: none; padding-right: 0; max-width: 150px; }
:root[data-mode] #app-layout #view-movimientos .tx-pill select:disabled { opacity: .5; }
:root[data-mode] #app-layout #view-movimientos .tx-clear { border: 0; background: none; color: var(--muted); font: 600 14px/1 var(--font); padding: 8px 6px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (min-width: 900px) {
  :root[data-mode] #app-layout #view-movimientos .tx-filter-toggle { display: none; }
}
@media (max-width: 899px) {
  :root[data-mode] #app-layout #view-movimientos .tx-filters:not(.open) { display: none; }
  :root[data-mode] #app-layout #view-movimientos .tx-select-btn { padding: 0 14px; }
  :root[data-mode] #app-layout #view-movimientos .tx-pill { flex: 1 1 calc(50% - 4px); justify-content: space-between; }
  :root[data-mode] #app-layout #view-movimientos .tx-pill :is(select, input) { max-width: none; flex: 1; text-align: right; }
}

/* ---------- A pagar: el total como en Inicio ---------- */
:root[data-mode] #app-layout #view-pagos .pay-summary {
  position: relative; background: var(--card-sun); color: var(--txt); border: 0; border-radius: 32px;
  padding: 40px 24px 26px; text-align: center; box-shadow: var(--shadow); margin: 0 0 18px;
}
:root[data-mode] #app-layout #view-pagos .pay-summary .pay-sum-value { font: 700 46px/1 var(--font); letter-spacing: -0.045em; color: var(--txt); }
:root[data-mode] #app-layout #view-pagos .pay-summary .pay-sum-label { margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--txt); opacity: .72; text-transform: none; letter-spacing: 0; }
:root[data-mode] #app-layout #view-pagos .pay-summary .pay-sum-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; color: var(--txt); }
:root[data-mode] #app-layout #view-pagos .pay-summary .pay-sum-sub span { background: rgba(255,255,255,.55); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--txt); }
:root[data-mode] #app-layout #view-pagos .pay-summary .pay-sum-sub span.warn { background: #fde8ea; color: #a1141f; }
:root[data-mode="dark"] #app-layout #view-pagos .pay-summary .pay-sum-sub span { background: rgba(255,255,255,.08); }
:root[data-mode] #app-layout #view-pagos .pay-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px; }
:root[data-mode] #app-layout #view-pagos .pay-toolbar .btn-primary { padding: 11px 18px; }
:root[data-mode] #app-layout #view-pagos .bill-group { margin-bottom: 18px; }
:root[data-mode] #app-layout #view-pagos .bill-group-title { margin: 0 6px 10px; }
:root[data-mode] #app-layout #view-pagos .bill-group-title em { background: var(--panel2); box-shadow: none; color: var(--txt); }
:root[data-mode] #app-layout #view-pagos .bill-group.bad .bill-group-title { color: var(--red); }
:root[data-mode] #app-layout #view-pagos .bill-group-list { display: grid; gap: 10px; }
:root[data-mode] #app-layout #view-pagos .bill-row { padding: 16px 18px; gap: 14px; align-items: center; }
:root[data-mode] #app-layout #view-pagos .bill-row-main b { font-size: 15px; font-weight: 650; }
:root[data-mode] #app-layout #view-pagos .bill-row-main small { color: var(--muted); }
:root[data-mode] #app-layout #view-pagos .bill-row.overdue .bill-row-main small { color: var(--red); }
:root[data-mode] #app-layout #view-pagos .bill-row-amount b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
:root[data-mode] #app-layout #view-pagos .bill-more { border: 0; background: var(--panel2); color: var(--txt); border-radius: 50%; width: 36px; height: 36px; }
:root[data-mode] #app-layout #view-pagos .bill-row :is(.btn-primary, .btn-add) { padding: 9px 18px; }

/* ---------- Tarjetas: el plástico y su detalle ---------- */
:root[data-mode] #app-layout #view-tarjeta .card-toolbar { display: flex; justify-content: flex-end; margin: -58px 0 22px; }
:root[data-mode] #app-layout #view-tarjeta .card-toolbar .btn-add { padding: 11px 18px; }
:root[data-mode] #app-layout #card-status { display: grid; gap: 18px; margin: 0 0 18px; }
:root[data-mode] #app-layout .cc { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 18px; align-items: stretch; }
:root[data-mode] #app-layout .cc-plastic {
  position: relative; aspect-ratio: 1.586; border-radius: 26px; padding: 22px 24px; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,122,69,.6), transparent 55%), radial-gradient(90% 80% at 0% 115%, rgba(139,92,246,.55), transparent 60%), #141416;
  box-shadow: 0 26px 50px -26px rgba(30,10,20,.55);
}
:root[data-mode="dark"] #app-layout .cc-plastic { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
:root[data-mode] #app-layout .cc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
:root[data-mode] #app-layout .cc-name { font-size: 15px; font-weight: 600; opacity: .92; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-mode] #app-layout .cc-plastic .bill-more { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; }
:root[data-mode] #app-layout .cc-plastic .bill-menu { color: var(--txt); }
:root[data-mode] #app-layout .cc-amount > span { display: block; font-size: 13px; opacity: .75; }
:root[data-mode] #app-layout .cc-amount b { display: block; font: 700 38px/1.05 var(--font); letter-spacing: -0.045em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
:root[data-mode] #app-layout .cc-amount small { font-size: 13px; opacity: .78; }
:root[data-mode] #app-layout .cc-foot { display: flex; align-items: flex-end; gap: 24px; font-size: 12px; }
:root[data-mode] #app-layout .cc-foot > span:not(.cc-chip) { display: flex; flex-direction: column; gap: 2px; opacity: .8; }
:root[data-mode] #app-layout .cc-foot b { font-size: 15px; font-weight: 650; opacity: 1; }
:root[data-mode] #app-layout .cc-chip { margin-left: auto; width: 40px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #f6d891, #c49a45); opacity: .85; }
:root[data-mode] #app-layout .cc-detail { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 20px; display: flex; flex-direction: column; justify-content: center; }
:root[data-mode="dark"] #app-layout .cc-detail { border: 1px solid var(--border); box-shadow: none; }
:root[data-mode] #app-layout .cc-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 15px 0; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--txt); font: inherit; text-align: left; }
:root[data-mode] #app-layout .cc-row:last-child { border-bottom: 0; }
:root[data-mode] #app-layout .cc-row > span { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; }
:root[data-mode] #app-layout .cc-row > span small { display: block; font-size: 12px; margin-top: 1px; }
:root[data-mode] #app-layout .cc-row > b { font-size: 15px; font-weight: 650; white-space: nowrap; }
:root[data-mode] #app-layout button.cc-row { cursor: pointer; }
:root[data-mode] #app-layout button.cc-row::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); margin: 0 2px 0 4px; opacity: .6; }
:root[data-mode] #app-layout button.cc-row:hover > b { text-decoration: underline; text-underline-offset: 3px; }
:root[data-mode] #app-layout .cc-est { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #fff1e0; color: #8a4200; margin-left: 6px; vertical-align: 1px; }
:root[data-mode="dark"] #app-layout .cc-est { background: #3a2c0c; color: #f5d78a; }
:root[data-mode] #app-layout .cc-change { border: 0; background: var(--panel2); color: var(--txt); border-radius: 999px; padding: 7px 12px; font: 600 13px/1 var(--font); cursor: pointer; }
:root[data-mode] #app-layout .cc-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 8px; }
:root[data-mode] #app-layout .cc-actions .btn-add { padding: 10px 16px; }
:root[data-mode] #app-layout .cc-forecast { padding: 14px 0; font-size: 14px; display: grid; gap: 6px; }
:root[data-mode] #app-layout .cc-forecast > span { color: var(--muted); font-size: 13px; }
:root[data-mode] #app-layout .cc-forecast div { display: flex; justify-content: space-between; gap: 10px; }
:root[data-mode] #app-layout .cc-projected { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; }
:root[data-mode] #app-layout #view-tarjeta .card-box { border: 0; background: var(--panel2); border-radius: 18px; }
@media (max-width: 899px) {
  :root[data-mode] #app-layout #view-tarjeta .card-toolbar { margin: 0 0 14px; }
  :root[data-mode] #app-layout .cc { grid-template-columns: minmax(0, 1fr); }
  :root[data-mode] #app-layout .cc-plastic { padding: 20px; }
  :root[data-mode] #app-layout .cc-amount b { font-size: 34px; }
}
:root[data-mode] #app-layout #view-movimientos .tx-search .ui-icon { position: static; transform: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }
:root[data-mode] #app-layout #view-movimientos .tx-search input { padding-left: 0 !important; }
:root[data-mode] #app-layout .tx .info .t2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-mode] #app-layout .tx .info .t2 > span { display: inline; }
@media (max-width: 899px) {
  :root[data-mode] #app-layout .cc-row-date { flex-wrap: wrap; row-gap: 4px; }
  :root[data-mode] #app-layout .cc-row-date > span { flex-basis: 100%; }
  :root[data-mode] #app-layout .cc-row-date > b { flex: 1; }
}

/* =====================================================================
   Secciones con la misma lógica: resumen grande + barra de acciones + filas en tarjeta
   (Reportes, Presupuestos, Ahorros, Automáticos, A cobrar)
   ===================================================================== */
:root[data-mode] #app-layout .sec-sum {
  position: relative; background: var(--card-sun); color: var(--txt); border: 0; border-radius: 32px;
  padding: 40px 24px 26px; text-align: center; box-shadow: var(--shadow); margin: 0 0 18px; overflow: hidden;
}
:root[data-mode] #app-layout .sec-sum .sec-sum-value { display: block; font: 700 46px/1 var(--font); letter-spacing: -0.045em; color: var(--txt); }
:root[data-mode] #app-layout .sec-sum .sec-sum-label { display: block; margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--txt); opacity: .72; }
:root[data-mode] #app-layout .sec-sum-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
:root[data-mode] #app-layout :is(.sec-pill, .sec-sum .rchip) {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: rgba(255,255,255,.55); color: var(--txt);
  padding: 8px 14px; border-radius: 999px; font: 600 13px/1.2 var(--font); white-space: nowrap;
}
:root[data-mode="dark"] #app-layout :is(.sec-pill, .sec-sum .rchip) { background: rgba(255,255,255,.08); }
:root[data-mode] #app-layout .sec-pill b { font-weight: 700; }
:root[data-mode] #app-layout button.sec-pill { cursor: pointer; }
:root[data-mode] #app-layout button.sec-pill:hover { background: rgba(255,255,255,.8); }
:root[data-mode] #app-layout :is(.sec-pill.good, .sec-sum .rchip.good) { color: var(--green); }
:root[data-mode] #app-layout :is(.sec-pill.warn, .sec-sum .rchip.bad) { background: #fde8ea; color: #a1141f; }
:root[data-mode] #app-layout .sec-pill.amber { background: #fff1e0; color: #8a4200; }
:root[data-mode="dark"] #app-layout :is(.sec-pill.warn, .sec-sum .rchip.bad) { background: rgba(255,107,116,.16); color: #ff9aa1; }

:root[data-mode] #app-layout .sec-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
:root[data-mode] #app-layout .sec-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
:root[data-mode] #app-layout :is(.sec-bar, .sec-col-head) .btn-add { padding: 11px 18px; }
:root[data-mode] #app-layout .month-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
:root[data-mode] #app-layout .month-pill button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--panel2); color: var(--txt); font-size: 18px; line-height: 1; cursor: pointer; }
:root[data-mode] #app-layout .month-pill b { padding: 0 12px; font-size: 14px; font-weight: 650; min-width: 120px; text-align: center; }

/* Filas en tarjeta */
:root[data-mode] #app-layout .rc-list { display: grid; gap: 10px; }
:root[data-mode] #app-layout .rc {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--panel); border-radius: 22px; box-shadow: var(--shadow);
}
:root[data-mode="dark"] #app-layout .rc { border: 1px solid var(--border); box-shadow: none; }
:root[data-mode] #app-layout .rc-ic { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--cat, var(--muted)) 16%, var(--panel)); color: var(--cat, var(--txt)); }
:root[data-mode] #app-layout .rc-ic .ui-icon { width: 20px; height: 20px; }
:root[data-mode] #app-layout .rc-letter { font: 700 17px/1 var(--font); color: var(--txt); }
:root[data-mode] #app-layout .rc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
:root[data-mode] #app-layout .rc-main > b { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-mode] #app-layout .rc-main > small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-mode] #app-layout .rc-end { text-align: right; flex-shrink: 0; }
:root[data-mode] #app-layout .rc-end b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
:root[data-mode] #app-layout .rc-end small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
:root[data-mode] #app-layout .rc-act { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
:root[data-mode] #app-layout .rc-btn { padding: 9px 16px; }
:root[data-mode] #app-layout .rc-icon-btn { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; }
:root[data-mode] #app-layout .rc-icon-btn:hover { background: var(--panel2); color: var(--txt); }
:root[data-mode] #app-layout .rc-icon-btn.danger:hover { color: var(--red); }
:root[data-mode] #app-layout .rc-icon-btn .ui-icon { width: 18px; height: 18px; }
:root[data-mode] #app-layout .rc-bar { display: block; height: 8px; border-radius: 999px; background: var(--panel2); overflow: hidden; margin-top: 6px; }
:root[data-mode] #app-layout .rc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
:root[data-mode] #app-layout .rc-bar i.warn { background: #f59e0b; }
:root[data-mode] #app-layout .rc-bar i.over { background: var(--red); }
:root[data-mode] #app-layout .rc-budget.over .rc-end b { color: var(--red); }
:root[data-mode] #app-layout .rc-budget.warn .rc-end b { color: var(--amber); }
:root[data-mode] #app-layout .rc-auto.income .rc-ic { --cat: var(--green); }
:root[data-mode] #app-layout .rc-auto.income .rc-end b { color: var(--green); }
:root[data-mode] #app-layout .rc-auto.paused { opacity: .55; }
:root[data-mode] #app-layout .rc-recv.overdue .rc-main > small { color: var(--red); }
:root[data-mode] #app-layout .rc-recv.paid { opacity: .6; }
:root[data-mode] #app-layout .rc-recv.paid .rc-end b { text-decoration: line-through; }
:root[data-mode] #app-layout .rc-empty { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }

/* Automáticos en dos columnas */
:root[data-mode] #app-layout #view-fijos .auto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
:root[data-mode] #app-layout .sec-col-head { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 12px; }
:root[data-mode] #app-layout .sec-col-head h2 { font-size: 17px; font-weight: 650; }

/* Ahorros: una tarjeta por meta */
:root[data-mode] #app-layout .goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
:root[data-mode] #app-layout .goal-card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 4px; }
:root[data-mode="dark"] #app-layout .goal-card { border: 1px solid var(--border); box-shadow: none; }
:root[data-mode] #app-layout .goal-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
:root[data-mode] #app-layout .goal-card-top b { font-size: 16px; font-weight: 650; }
:root[data-mode] #app-layout .goal-pct { font-size: 13px; font-weight: 650; padding: 4px 10px; border-radius: 999px; background: var(--panel2); }
:root[data-mode] #app-layout .goal-card.done .goal-pct { background: #e3f6e8; color: #136c33; }
:root[data-mode] #app-layout .goal-card-amount { font: 700 32px/1.1 var(--font); letter-spacing: -0.04em; margin-top: 12px; font-variant-numeric: tabular-nums; }
:root[data-mode] #app-layout .goal-card-of, :root[data-mode] #app-layout .goal-card-when { color: var(--muted); font-size: 13px; }
:root[data-mode] #app-layout .goal-bar { height: 10px; margin: 10px 0 4px; }
:root[data-mode] #app-layout .goal-bar i { background: linear-gradient(90deg, #8b5cf6, #ff3d7f 45%, #ff7a45 80%, #ffc24b); }
:root[data-mode] #app-layout .goal-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
:root[data-mode] #app-layout .goal-card-actions .btn-add { padding: 9px 16px; }
:root[data-mode] #app-layout .goal-card-tools { margin-left: auto; display: flex; }

/* Reportes: barra de período sin caja y gráficos en tarjetas limpias */
:root[data-mode] #app-layout #view-reportes .report-toolbar { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 16px; }
:root[data-mode] #app-layout #view-reportes .report-toolbar-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
:root[data-mode] #app-layout #view-reportes .report-quick-ranges { background: var(--panel); border: 1px solid var(--border); }
:root[data-mode] #app-layout #view-reportes .report-quick-ranges button { padding: 9px 16px; }
:root[data-mode] #app-layout #view-reportes .report-quick-ranges button.active { background: var(--ink); color: var(--on-ink); }
:root[data-mode] #app-layout #view-reportes .report-filter-toggle { background: var(--panel); color: var(--txt); border: 1px solid var(--border); padding: 10px 16px; display: inline-flex; align-items: center; gap: 8px; }
:root[data-mode] #app-layout #view-reportes .report-filter-panel.open, :root[data-mode] #app-layout #view-reportes .report-filter-panel { background: none; border: 0; box-shadow: none; padding: 0; }
:root[data-mode] #app-layout #view-reportes .report-controls label { color: var(--muted); font-size: 13px; }
:root[data-mode] #app-layout #view-reportes .report-category-toggle { background: var(--panel); border: 1px solid var(--border); border-radius: 999px; color: var(--txt); }
:root[data-mode] #app-layout #view-reportes .report-hero { display: block; }
:root[data-mode] #app-layout #view-reportes .report-hero-main { display: block; width: 100%; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
:root[data-mode] #app-layout #view-reportes .report-view-tabs { display: inline-flex; margin: 4px 0 16px; background: var(--panel); border: 1px solid var(--border); }
:root[data-mode] #app-layout #view-reportes .report-view-tabs button { padding: 9px 18px; }
:root[data-mode] #app-layout #view-reportes .report-range { color: var(--muted); font-size: 13px; }
:root[data-mode] #app-layout #view-reportes .seg-mini { background: var(--panel2); }
:root[data-mode] #app-layout #view-reportes .seg-mini button { padding: 7px 12px; font-size: 13px; }
:root[data-mode] #app-layout #view-reportes .report-chart-note { color: var(--muted); font-size: 13px; }
:root[data-mode] #app-layout #view-reportes :is(.delta-row, .rdelta, .report-delta) { border-color: var(--border); }
:root[data-mode] #app-layout #view-reportes .help-dot, :root[data-mode] #app-layout :is(#view-presupuestos, #view-ahorros, #view-fijos, #view-receivables) .help-dot { display: none; }

@media (max-width: 899px) {
  :root[data-mode] #app-layout .sec-sum { border-radius: 28px; padding: 36px 18px 22px; }
  :root[data-mode] #app-layout .sec-sum .sec-sum-value { font-size: 40px; }
  :root[data-mode] #app-layout #view-fijos .auto-grid { grid-template-columns: minmax(0, 1fr); }
  :root[data-mode] #app-layout .rc { padding: 14px; gap: 12px; flex-wrap: wrap; }
  :root[data-mode] #app-layout .rc-main { flex: 1 1 0; }
  :root[data-mode] #app-layout .rc-recv .rc-act { width: 100%; justify-content: flex-end; margin-top: -4px; }
  :root[data-mode] #app-layout .rc-budget .rc-act, :root[data-mode] #app-layout .rc-auto .rc-act { flex-direction: column; gap: 0; margin-right: -6px; }
  :root[data-mode] #app-layout .month-pill b { min-width: 0; }
  :root[data-mode] #app-layout .sec-bar-actions { width: 100%; }
  :root[data-mode] #app-layout .sec-bar-actions .btn-add { flex: 1; }
}
:root[data-mode] #app-layout .rc-budget { flex-wrap: wrap; row-gap: 10px; }
:root[data-mode] #app-layout .rc-bar-full { flex-basis: 100%; margin: 0 0 2px 58px; }
@media (max-width: 899px) {
  :root[data-mode] #app-layout .rc-bar-full { margin-left: 0; }
  :root[data-mode] #app-layout .rc-budget .rc-act { flex-direction: row; margin-right: 0; }
}
@media (max-width: 899px) {
  :root[data-mode] #app-layout .rc-budget .rc-end small { display: none; }
  :root[data-mode] #app-layout .rc-budget .rc-act .rc-icon-btn { width: 30px; }
}

/* =====================================================================
   Ajustes finos: celular y compu
   ===================================================================== */
/* Tarjeta de crédito: siempre a todo el ancho de su columna */
:root[data-mode] #app-layout #card-status { display: flex; flex-direction: column; }
:root[data-mode] #app-layout .cc-plastic { width: 100%; justify-self: stretch; }
@media (max-width: 899px) {
  :root[data-mode] #app-layout .cc-plastic { aspect-ratio: auto; min-height: 210px; gap: 18px; }
}

/* Más / Configuración en la compu: los grupos llenan el ancho */
@media (min-width: 900px) {
  :root[data-mode] #app-layout #view-mas.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; max-width: none; align-items: start; }
  :root[data-mode] #app-layout #view-mas .mas-account { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  :root[data-mode] #app-layout #view-mas.active { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  /* La barra de la hora: el contenido pasa por debajo con el fondo de la app, no encima del texto */
  :root[data-mode] #app-layout::before {
    content: ""; position: fixed; z-index: 25; inset: 0 0 auto 0; height: env(safe-area-inset-top);
    background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: none;
  }
  /* Barra de abajo casi al borde, con un respiro */
  :root[data-mode] nav.bottomnav { bottom: max(8px, calc(env(safe-area-inset-bottom) - 18px)); left: 10px; right: 10px; }
  :root[data-mode] nav.bottomnav .nav-pill { padding: 6px 4px; border-radius: 30px; }
  :root[data-mode] #app-layout .mainwrap { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  :root[data-mode] #app-layout .topbar { padding: 6px 2px 14px; min-height: 52px; }
  /* Sin avatar arriba en Más y en las pantallas de ajustes: ahí ya está "Mi cuenta" */
  body:is([data-view="mas"], [data-view="usuario"], [data-view="cuentas"], [data-view="categorias"], [data-view="apariencia"], [data-view="ayuda"], [data-view="soporte"], [data-view="telegram"], [data-view="mercadopago"], [data-view="admin"]) #app-layout .topbar .profile-wrap { display: none; }
  /* Inicio: tarjetas de cuentas un poco más chicas */
  :root[data-mode] #app-layout #view-inicio .patrimonio .hbal { flex-basis: 140px; min-height: 96px; padding: 14px; }
  :root[data-mode] #app-layout #view-inicio .patrimonio .hbal .v { font-size: 18px; }
  /* Movimientos: los cuatro tipos entran enteros */
  :root[data-mode] #app-layout #view-movimientos .tx-kind-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  :root[data-mode] #app-layout #view-movimientos .tx-kind-chips button { padding: 9px 0; font-size: 13px; text-align: center; }
  :root[data-mode] #app-layout #view-movimientos .tx-tools-main { gap: 6px; }
  :root[data-mode] #app-layout #view-movimientos :is(.tx-select-btn, .tx-filter-toggle) { height: 44px; padding: 0 14px; }
  :root[data-mode] #app-layout #view-movimientos .tx-search { height: 44px; padding: 0 14px; min-width: 0; }
  :root[data-mode] #app-layout #view-movimientos .tx-panel { padding: 14px; }
  :root[data-mode] #app-layout #view-movimientos .tx-list > p { margin: 8px 2px; color: var(--muted); }
}

/* Montos ocultos: tres puntos en vez de borroso */
body.amounts-hidden #view-inicio :is(.hero-total-value, .hbal .v, .mt .val, .recent-list .amt, .bill-mini-row strong, .bill-mini-total b, .cat-row b, .cat-total b, .hero-total-goals b, .hero-total-sub, .mini-row small) {
  filter: none !important; position: relative; color: transparent !important; -webkit-user-select: none; user-select: none;
}
body.amounts-hidden #view-inicio :is(.hero-total-value, .hbal .v, .mt .val, .recent-list .amt, .bill-mini-row strong, .bill-mini-total b, .cat-row b, .cat-total b, .hero-total-goals b)::after {
  content: "•••"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start;
  color: var(--txt); letter-spacing: .12em; font-weight: 700;
}
body.amounts-hidden #view-inicio :is(.recent-list .amt, .bill-mini-row strong, .bill-mini-total b, .cat-row b, .cat-total b)::after { justify-content: flex-end; }
body.amounts-hidden #view-inicio .total-card .hero-total .hero-total-value::after { justify-content: center; letter-spacing: .18em; }
body.amounts-hidden #view-inicio .total-card .hero-total-label span { display: none; }
body.amounts-hidden #view-inicio .mt .val.in::after { color: var(--green); }
body.amounts-hidden #view-inicio .hbal.credit .v::after { color: var(--on-ink); }

/* Cuentas y Categorías: sin caja dentro de caja, filas en tarjeta */
:root[data-mode] #app-layout :is(#view-cuentas, #view-categorias) .config-panel { background: none; border: 0; box-shadow: none; padding: 0; }
:root[data-mode] #app-layout :is(#view-cuentas, #view-categorias) .help-dot { display: none; }
:root[data-mode] #app-layout :is(#accounts-admin, .category-group-list) { display: grid; gap: 10px; }
:root[data-mode] #app-layout :is(#accounts-admin, .category-group-list) .admin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 16px;
  background: var(--panel); border: 0; border-radius: 20px; box-shadow: var(--shadow);
}
:root[data-mode="dark"] #app-layout :is(#accounts-admin, .category-group-list) .admin-row { border: 1px solid var(--border); box-shadow: none; }
:root[data-mode] #app-layout :is(#accounts-admin, .category-group-list) .label-icon { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
:root[data-mode] #app-layout :is(#accounts-admin, .category-group-list) .label-icon b { font-size: 15px; font-weight: 650; color: var(--txt); }
:root[data-mode] #app-layout #accounts-admin .meta { color: var(--muted); font-size: 13px; }
:root[data-mode] #app-layout :is(#accounts-admin, .category-group-list) .admin-actions { display: flex; gap: 2px; flex-shrink: 0; }
:root[data-mode] #app-layout :is(#accounts-admin, .category-group-list) .admin-actions button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--muted); display: grid; place-items: center; padding: 0; }
:root[data-mode] #app-layout :is(#accounts-admin, .category-group-list) .admin-actions button:hover { background: var(--panel2); color: var(--txt); }
:root[data-mode] #app-layout :is(#accounts-admin, .category-group-list) .admin-actions .de:hover { color: var(--red); }
:root[data-mode] #app-layout :is(#accounts-admin, .category-group-list) .admin-actions .ui-icon { width: 18px; height: 18px; }
:root[data-mode] #app-layout .category-groups-grid { display: grid; gap: 22px; }
@media (min-width: 900px) { :root[data-mode] #app-layout .category-groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
:root[data-mode] #app-layout .category-group { background: none; border: 0; padding: 0; box-shadow: none; }
:root[data-mode] #app-layout .cat-group-head { display: flex; align-items: center; gap: 8px; margin: 0 6px 10px; color: var(--muted); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; }
:root[data-mode] #app-layout .cat-group-head b { margin-left: auto; background: var(--panel2); color: var(--txt); border-radius: 999px; padding: 2px 9px; font-size: 12px; }
:root[data-mode] #app-layout .cat-group-head .ui-icon { width: 16px; height: 16px; }
:root[data-mode] #app-layout .category-admin-row { border-left: 0 !important; }
:root[data-mode] #app-layout .cat-color-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cat-color); flex-shrink: 0; }
@media (min-width: 900px) { :root[data-mode] #app-layout #view-cuentas .config-panel { max-width: 760px; } }
:root[data-mode] #app-layout .dup-title { display: none; }
:root[data-mode] #app-layout .panel-head:has(> .dup-title:only-child) { display: none; }
:root[data-mode] #app-layout .mode-options { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel2); }
:root[data-mode] #app-layout .mode-opt { border: 0; border-radius: 999px; padding: 11px 26px; background: none; color: var(--muted); font: 600 15px/1 var(--font); cursor: pointer; }
:root[data-mode] #app-layout .mode-opt.active { background: var(--ink); color: var(--on-ink); }

/* =====================================================================
   Formularios: carga de movimientos y campos de todas las ventanas
   ===================================================================== */
/* Campos: etiqueta chica arriba, caja suave, foco con borde tinta */
:root[data-mode] .modal .form label, :root[data-mode] .modal #modal-body label, :root[data-mode] #app-layout .form label {
  display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted); margin: 0 0 16px;
}
:root[data-mode] :is(.modal, #app-layout) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not(#f-amount), select, textarea) {
  min-height: 50px; padding: 13px 16px; border-radius: 16px; border: 1.5px solid transparent; background: var(--panel2);
  color: var(--txt); font: 500 16px/1.3 var(--font); transition: border-color .15s ease, background-color .15s ease; box-shadow: none; outline: none;
}
:root[data-mode] :is(.modal, #app-layout) textarea { min-height: 96px; resize: vertical; }
:root[data-mode] :is(.modal, #app-layout) :is(input, select, textarea)::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
:root[data-mode] :is(.modal, #app-layout) :is(input:not([type="checkbox"]):not([type="radio"]):not(#f-amount), select, textarea):focus { border-color: var(--ink); background: var(--panel); }
:root[data-mode] :is(.modal, #app-layout) select:not(.chip-pick-select) {
  -webkit-appearance: none; appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6965' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
:root[data-mode] :is(.modal, #app-layout) input[type="checkbox"], :root[data-mode] :is(.modal, #app-layout) input[type="radio"] { accent-color: var(--ink); width: 18px; height: 18px; }
/* Las píldoras de los filtros de Movimientos conservan su tamaño chico */
:root[data-mode] #app-layout #view-movimientos .tx-pill :is(select, input) { min-height: 0; padding: 0 18px 0 0; border: 0; border-radius: 0; background-color: transparent; font-weight: 600; font-size: 14px; }
:root[data-mode] #app-layout #view-movimientos .tx-search input { min-height: 0; border: 0; padding: 0; background: transparent; }
:root[data-mode] .modal .modal-actions { padding-top: 4px; }
:root[data-mode] .modal .modal-actions .btn-primary, :root[data-mode] .modal .movement-save { width: 100%; padding: 16px; font-size: 16px; }

/* Píldoras que reemplazan selects */
.chip-pick-select { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; overflow: hidden; }
:root[data-mode] .chip-pick { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; margin: 0 -2px; scrollbar-width: none; }
:root[data-mode] .chip-pick::-webkit-scrollbar { display: none; }
:root[data-mode] #lbl-category .chip-pick { flex-wrap: wrap; overflow: visible; max-height: 148px; overflow-y: auto; }
:root[data-mode] .chip-pick button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--border); background: var(--panel);
  color: var(--txt); border-radius: 999px; padding: 9px 14px; font: 600 14px/1 var(--font); cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
:root[data-mode] .chip-pick button:active { transform: scale(.96); }
:root[data-mode] .chip-pick button i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
:root[data-mode] .chip-pick button[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
:root[data-mode] .chip-pick button[aria-checked="true"] i { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3.5px var(--on-ink); }
:root[data-mode] .chip-pick button:disabled { opacity: .4; }

/* Nuevo movimiento: el monto es lo principal */
:root[data-mode] .modal .movement-modal-box { padding: 22px 20px 20px; }
:root[data-mode] #cargar-modal .form .movement-amount { align-items: center; margin: 6px 0 18px; font-size: 0; gap: 0; }
:root[data-mode] #cargar-modal .amount-field { display: flex; align-items: baseline; justify-content: center; gap: 4px; width: 100%; padding: 10px 0 14px; border-bottom: 1.5px solid var(--border); transition: border-color .15s ease; }
:root[data-mode] .modal .amount-field:focus-within { border-color: var(--ink); }
:root[data-mode] .modal .amount-cur { font: 700 30px/1 var(--font); color: var(--muted); letter-spacing: -0.02em; }
:root[data-mode] #cargar-modal .movement-amount input, :root[data-mode] #cargar-modal .movement-amount input:focus {
  width: auto; min-width: 2ch; max-width: 100%; field-sizing: content; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  font: 750 52px/1.05 var(--font); letter-spacing: -0.05em; text-align: center; color: var(--txt); font-variant-numeric: tabular-nums;
}
:root[data-mode] .modal .movement-amount input::placeholder { color: color-mix(in srgb, var(--muted) 45%, transparent); }
:root[data-mode] .modal .movement-amount input::-webkit-outer-spin-button, :root[data-mode] .modal .movement-amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:root[data-mode] .modal .movement-amount input[type="number"] { -moz-appearance: textfield; }
:root[data-mode] .modal .seg { margin-bottom: 8px; }
:root[data-mode] .modal .seg .seg-btn { padding: 11px 0; font-size: 15px; }
:root[data-mode] .modal .movement-hint { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
:root[data-mode] .modal .movement-more-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; padding: 0 16px; margin: 2px 0 14px; font: 600 14px/1 var(--font); }
:root[data-mode] .modal .movement-more-toggle small { color: var(--muted); font-weight: 500; }
:root[data-mode] .modal .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Con una ventana abierta, la franja de la hora no queda blanca encima del fondo oscuro */
@media (max-width: 899px) {
  body:has(.modal:not(.hidden)) #app-layout::before { display: none; }
}

/* Reportes: el gráfico con más aire */
:root[data-mode] #app-layout #view-reportes .report-chart-wrap { height: 300px; margin-top: 6px; }
:root[data-mode] #app-layout #view-reportes .report-chart-panel { padding: 22px 22px 18px; }
@media (max-width: 899px) {
  :root[data-mode] #app-layout #view-reportes .report-chart-wrap { height: 240px; }
  :root[data-mode] #app-layout #view-reportes .report-chart-panel .panel-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  :root[data-mode] #app-layout #view-reportes .seg-mini { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}