/* ===== VARIABLES DE TEMA ===== */
:root {
  --bg-root:   #0f0f13;
  --bg-card:   #1e1e2a;
  --bg-input:  #252535;
  --bg-panel:  #16161f;
  --bg-accent: #1e1a3a;
  --text:      #e8e8f0;
  --muted:     #888;
  --dim:       #666;
  --dark:      #555;
  --bxs: rgba(255,255,255,.06);
  --bsm: rgba(255,255,255,.08);
  --bmd: rgba(255,255,255,.10);
  --blg: rgba(255,255,255,.12);
  --bxl: rgba(255,255,255,.14);
  --b2x: rgba(255,255,255,.20);
  --scheme: dark;
}

html[data-tema="claro"] {
  --bg-root:   #f0f0f7;
  --bg-card:   #ffffff;
  --bg-input:  #eaeaf4;
  --bg-panel:  #fafafa;
  --bg-accent: #eeecfb;
  --text:      #1a1a2e;
  --muted:     #777;
  --dim:       #999;
  --dark:      #bbb;
  --bxs: rgba(0,0,0,.05);
  --bsm: rgba(0,0,0,.08);
  --bmd: rgba(0,0,0,.10);
  --blg: rgba(0,0,0,.14);
  --bxl: rgba(0,0,0,.18);
  --b2x: rgba(0,0,0,.25);
  --scheme: light;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

body {
  font-family: system-ui, sans-serif;
  background: var(--bg-root);
  color: var(--text);
  font-size: 14px;
  padding: 1rem .75rem;
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  padding-left: max(.75rem, env(safe-area-inset-left));
  padding-right: max(.75rem, env(safe-area-inset-right));
  transition: background-color .25s, color .25s
}

.w {
  max-width: 720px;
  margin: 0 auto
}

/* ── Splash screen ── */
.splash {
  position: fixed;
  inset: 0;
  background: var(--bg-root);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity .4s ease, visibility .4s ease
}

.splash.splash-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none
}

.splash-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  opacity: 0;
  animation: splashLogoIn .6s ease forwards
}

.splash-name {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-top: 16px;
  background: linear-gradient(135deg, #7F77DD 0%, #5BD3B0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  animation: splashFadeUp .5s ease forwards;
  animation-delay: .3s
}

.splash-slogan {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-top: 6px;
  opacity: 0;
  animation: splashFadeUp .5s ease forwards;
  animation-delay: .45s
}

.splash-version {
  font-size: 11px;
  color: var(--dim);
  margin-top: 28px;
  opacity: 0;
  animation: splashFadeUp .5s ease forwards;
  animation-delay: .6s
}

@keyframes splashLogoIn {
  from { opacity: 0; transform: scale(.7) }
  to   { opacity: 1; transform: scale(1) }
}

@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(8px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* ── Iconos Lucide ── */
.ico-xs {
  width: 11px;
  height: 11px;
  vertical-align: middle;
  stroke-width: 2.2;
  margin-right: 3px;
  opacity: .7
}

.ico-kpi {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  stroke-width: 2.2;
  margin-right: 4px
}

.ico-tab {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  stroke-width: 2;
  display: block;
  margin: 0 auto 3px
}

.ico-st {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  stroke-width: 2.2;
  margin-right: 5px;
  opacity: .75
}

.ico-btn {
  width: 13px;
  height: 13px;
  vertical-align: middle;
  stroke-width: 2;
  margin-right: 4px
}

/* ── Topbar ── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 12px;
  flex-wrap: wrap
}

.topbar-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.brand-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
  background: linear-gradient(135deg, #7F77DD 0%, #5BD3B0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.brand-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em
}

.period label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  margin-bottom: 2px
}

.period input[type=month] {
  font-size: 15px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  outline: none;
  color-scheme: var(--scheme)
}

.kpis {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.kpi {
  background: var(--bg-card);
  border: 1px solid var(--bsm);
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 110px;
  transition: background-color .25s, border-color .25s
}

.kpi .lb {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
  display: flex;
  align-items: center
}

.health-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: var(--muted);
  transition: background .4s;
  cursor: help
}

.kpi .vl {
  font-size: 14px;
  font-weight: 600
}

.btn-cfg {
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--dim);
  border-color: var(--bsm);
  flex-shrink: 0
}

.btn-cfg:hover {
  color: var(--text);
  border-color: var(--b2x)
}

/* ── Tabs ── */
.tabs {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  border-bottom: 2px solid var(--bsm);
  margin-bottom: 1.25rem;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-root)
}

.tab {
  position: relative;
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: color .15s
}

.tab-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E24B4A;
  box-shadow: 0 0 0 2px var(--bg);
  pointer-events: none
}

.tab .ico-tab {
  opacity: .5;
  transition: opacity .15s
}

.tab.on {
  color: var(--text);
  border-bottom-color: #7F77DD
}

.tab.on .ico-tab {
  opacity: 1
}

.tab:hover:not(.on) {
  color: var(--muted)
}

.tab:hover:not(.on) .ico-tab {
  opacity: .75
}

/* ── Análisis sub-nav ── */
.analisis-nav {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--bxs);
  margin-bottom: 1.25rem
}

.atab {
  padding: 8px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .15s
}

.atab .ico-tab {
  opacity: .5;
  transition: opacity .15s
}

.atab.on {
  color: var(--text);
  border-bottom-color: #7F77DD99
}

.atab.on .ico-tab {
  opacity: 1
}

.atab:hover:not(.on) {
  color: var(--text)
}

.apnl {
  display: none
}

.apnl.on {
  display: block
}

/* ── Panels ── */
.pnl {
  display: none
}

.pnl.on {
  display: block
}

/* ── Section title ── */
.st {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 1.25rem 0 8px;
  display: flex;
  align-items: center
}

.st:first-child {
  margin-top: 0
}

.st .ico-st {
  color: #7F77DD;
  opacity: 1
}

/* ── Collapsible sections ── */
.st.collapsible {
  cursor: pointer;
  user-select: none;
  justify-content: space-between;
  gap: 8px
}

.st.collapsible:hover {
  color: #7F77DD
}

.sec-chev {
  flex-shrink: 0;
  transition: transform .22s ease;
  opacity: .6
}

.st.collapsible.sec-off .sec-chev {
  transform: rotate(-90deg)
}

.sec-body {
  overflow: hidden
}

.sec-body.sec-off {
  display: none
}

/* ── Card ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--bsm);
  border-radius: 10px;
  padding: .9rem 1rem;
  margin-bottom: .9rem;
  transition: background-color .25s, border-color .25s
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--bxs)
}

.row:last-child {
  border-bottom: none
}

.rl {
  font-size: 13px;
  color: var(--muted);
  flex: 1
}

/* ── Inputs ── */
.fi {
  background: var(--bg-input);
  border: 1px solid var(--bmd);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: background-color .25s, border-color .25s, color .25s
}

.fi:focus {
  border-color: #7F77DD
}

.fn {
  width: 100%
}

.fv {
  width: 130px;
  text-align: right
}

.fs {
  padding: 5px 5px;
  cursor: pointer
}

/* ── Buttons ── */
.btn {
  background: transparent;
  border: 1px solid var(--blg);
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .15s, border-color .25s, color .25s
}

.btn:hover {
  background: var(--bg-input)
}

.badd {
  color: #7F77DD;
  border-color: #7F77DD;
  margin-top: 8px;
  display: inline-flex
}

.bx {
  padding: 4px 8px;
  border-color: transparent;
  color: var(--dark);
  font-size: 13px
}

.bx:hover {
  color: #E24B4A
}

.bdg {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg-input);
  color: var(--muted);
  white-space: nowrap
}

.bdg.fin {
  background: var(--bg-accent);
  color: #7F77DD
}

/* ── List items ──
   Grid de columnas fijas (no flex) para que la categoria y el dia queden
   alineados en vertical entre filas, sin importar que tan largo sea el
   nombre o cuantos digitos tenga el valor en $. Cada fila siempre tiene
   4 hijos directos en el mismo orden (nombre, categoria, dia-o-espaciador,
   valor) — ver crearItemLista() en gastos.js. */
.li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 46px 86px;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bxs)
}

.li:last-child {
  border-bottom: none
}

.li-header {
  padding: 0 0 4px;
  border-bottom: none;
}

.li-header span {
  font-size: 9.5px;
  color: var(--muted);
  line-height: 1.2;
}

.li-header-dia {
  text-align: center;
  justify-self: center;
}

/* ── Swipe-to-delete ── */
.swipe-wrap {
  position: relative;
  overflow: hidden
}

.swipe-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #E24B4A;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding-right: 18px;
  cursor: pointer
}

.swipe-content {
  position: relative;
  background: var(--bg-card);
  touch-action: pan-y;
  will-change: transform
}

/* .li ya trae su propio border-bottom; al quedar envuelto en .swipe-wrap
   ya no es realmente el ultimo hijo del contenedor de la lista, asi que
   corregimos la regla de "ultimo elemento sin borde" a nivel del wrap */
.swipe-wrap:not(:last-child) .li { border-bottom: 1px solid var(--bxs) }
.swipe-wrap:last-child .li       { border-bottom: none }

.lin {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

/* Nombre y valor de cada item ahora son inputs editables (antes texto
   fijo) — se resetea su estilo de campo para que se vean como el texto
   de antes hasta que se les da click. */
input.lin, input.lia {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  font-family: inherit;
  width: 100%;
  min-width: 0;
}

input.lia { text-align: right }

.li .bdg { justify-self: start }

/* Caso especial: fila de "Deuda" dentro de Obligaciones fijas, que en vez
   de un input de dia muestra valor + boton de editar juntos en la ultima
   columna del grid. */
.lir {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px
}

.lia {
  font-size: 13px;
  font-weight: 500;
  justify-self: end
}

.dia-inp {
  width: 100%;
  text-align: center;
  font-size: 11px;
  padding: 2px 4px;
  background: var(--bg-input);
  border: 1px solid var(--bxs);
  border-radius: 4px;
  color: var(--text)
}

/* ── Grid rows ── */
.grow {
  display: grid;
  grid-template-columns: 1fr 120px 115px 34px;
  gap: 6px;
  align-items: center;
  margin-top: 8px
}

.grow .fi {
  width: 100%
}

/* Variante de .grow con columna extra para el dia de pago (Gastos fijos
   mensuales). No se toca .grow base porque otras filas de "agregar item"
   solo tienen 4 columnas (sin dia). */
.grow-dia {
  grid-template-columns: 1fr 120px 60px 115px 34px;
}

.drow {
  display: grid;
  grid-template-columns: 1fr 100px 85px 30px;
  gap: 5px;
  align-items: center
}

.drow .fi {
  width: 100%
}

.irow {
  display: grid;
  grid-template-columns: 1fr 110px 115px 30px;
  gap: 5px;
  align-items: center
}

.irow .fi {
  width: 100%
}

.arow {
  display: grid;
  grid-template-columns: 1fr 65px 54px 95px 24px 30px;
  gap: 5px;
  align-items: center
}

/* El espaciado entre filas se mueve al wrapper del swipe: si queda en
   el .irow/.drow/.arow, ese margen cae fuera del fondo opaco de la fila
   y se ve el rojo de "Eliminar" como una linea debajo de cada item */
.swipe-wrap:has(.irow, .drow, .arow) {
  margin-bottom: 6px
}

.arow .fi {
  width: 100%
}

/* ── Ahorro total ── */
.ahorro-total {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--bxs);
  display: flex;
  justify-content: space-between
}

.ahorro-total-lbl {
  font-size: 12px;
  color: var(--dim)
}

.ahorro-total-sec {
  margin-top: 4px;
  padding-top: 0;
  border-top: none
}

/* ── Totals / nbox ── */
.tln {
  display: flex;
  justify-content: space-between;
  padding: 8px 0 2px;
  font-size: 13px;
  color: var(--muted)
}

.nbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--bsm);
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--bg-card);
  transition: background-color .25s, border-color .25s
}

.nbox .nl {
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 2px
}

.nbox .nv {
  font-size: 18px;
  font-weight: 600
}

/* ── Progress bar ── */
.pgb {
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px
}

.pgf {
  height: 100%;
  border-radius: 3px
}

.pgi {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  margin-bottom: 2px
}

/* ── Metrics grid ── */
.gmet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 1rem
}

.met {
  background: var(--bg-card);
  border: 1px solid var(--bsm);
  border-radius: 10px;
  padding: 10px 12px;
  transition: background-color .25s, border-color .25s
}

.met .ml {
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 3px
}

.met .mv {
  font-size: 13px;
  font-weight: 600
}

/* ── Charts ── */
.cwrap {
  position: relative;
  width: 100%
}

.leg {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px
}

.leg span {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px
}

.ldot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-block
}

/* ── Historic table ── */
.htbl {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse
}

.htbl th {
  padding: 6px 4px;
  text-align: right;
  color: var(--dim);
  font-weight: 500;
  border-bottom: 1px solid var(--bsm)
}

.htbl th:first-child,
.htbl td:first-child {
  text-align: left
}

.htbl td {
  padding: 6px 4px;
  text-align: right;
  border-bottom: 1px solid var(--bxs);
  color: var(--muted)
}

/* ── Misc ── */
.emp {
  font-size: 13px;
  color: var(--dark);
  padding: 8px 0
}

.hint {
  font-size: 11px;
  color: var(--dark);
  margin-bottom: 10px
}

.ing-sublbl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text);
  margin: 10px 0 4px;
}

.hint-icon {
  width: 13px;
  height: 13px;
  margin-left: 2px;
  color: var(--dim);
  cursor: pointer;
  flex-shrink: 0
}

.subsec-toggle { cursor: pointer }

.subsec-chev {
  width: 12px;
  height: 12px;
  margin-left: auto;
  color: var(--dim);
  transition: transform .2s ease;
  flex-shrink: 0
}

.subsec-toggle.closed .subsec-chev { transform: rotate(-90deg) }

.subsec-body.closed { display: none }

.hint-icon:hover { color: var(--muted) }

.hint-toggle {
  display: none;
  margin-top: -2px
}

.hint-toggle.show { display: block }

.ing-divider {
  border-top: 1px solid var(--bxs);
  margin: 12px 0 8px;
}

.fc-metodo {
  font-size: 11px;
  color: var(--dark);
  margin-bottom: 12px
}

.prow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--bxs)
}

.prow:last-child {
  border-bottom: none
}

/* ── Modal Configuracion ── */
.cfg-divider {
  height: 1px;
  background: var(--bsm);
  margin: 1rem 0
}

.cfg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1rem
}

.cfg-overlay.open {
  display: flex
}

.cfg-panel {
  background: var(--bg-panel);
  border: 1px solid var(--blg);
  border-radius: 14px;
  width: min(340px, 95vw);
  padding: 1.25rem;
  animation: cfgIn .18s ease;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  transition: background-color .25s, border-color .25s
}

@keyframes cfgIn {
  from { opacity: 0; transform: translateY(-10px) scale(.98) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}

.cfg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  font-size: 15px;
  font-weight: 600
}

.cfg-section {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  display: flex;
  align-items: center
}

.cfg-section .ico-st {
  color: #7F77DD;
  opacity: 1
}

.cfg-hint {
  font-size: 11px;
  color: var(--dark);
  margin-bottom: 14px;
  line-height: 1.5
}

/* ── Opciones de divisa / idioma / tema ── */
.div-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--bsm);
  cursor: pointer;
  margin-bottom: 6px;
  transition: background .12s, border-color .12s
}

.div-opt:hover {
  background: var(--bg-card);
  border-color: var(--bxl)
}

.div-opt.on {
  border-color: #7F77DD;
  background: rgba(127, 119, 221, .08)
}

.div-symbol {
  font-size: 15px;
  font-weight: 700;
  width: 30px;
  text-align: center;
  color: #7F77DD;
  flex-shrink: 0
}

.div-info {
  flex: 1;
  min-width: 0
}

.div-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text)
}

.div-code {
  font-size: 11px;
  color: var(--dark);
  margin-top: 1px
}

.div-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--blg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .12s
}

.div-opt.on .div-radio {
  border-color: #7F77DD
}

.div-radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7F77DD;
  display: none
}

.div-opt.on .div-radio-dot {
  display: block
}

/* Lista de divisas: son muchas opciones (9), asi que se muestran unas
   pocas a la vez con scroll interno en vez de alargar todo el panel. */
#cfgDivisas {
  max-height: 232px;
  overflow-y: auto;
  padding-right: 4px;
}

/* ── Patrimonio Neto ── */
.patrimonio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px
}

@media (max-width: 480px) {
  .patrimonio-grid { grid-template-columns: 1fr }
}

.patrimonio-col-hdr {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px
}

.patrimonio-row {
  display: grid;
  grid-template-columns: 1fr 95px 30px;
  gap: 5px;
  align-items: center;
  margin-bottom: 6px
}

.patrimonio-row .fi {
  width: 100%
}

.patrimonio-row-wrap {
  margin-bottom: 6px
}

.patrimonio-row-wrap .patrimonio-row {
  margin-bottom: 0
}

.prow-sel {
  width: 100%;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 3px
}

.patrimonio-row .fi:disabled {
  opacity: .55;
  cursor: not-allowed
}

/* ── Metas ── */
.meta-card {
  background: var(--bg-card);
  border: 1px solid var(--bsm);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  transition: background-color .25s, border-color .25s
}

.meta-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px
}

.meta-stat-lbl {
  font-size: 10px;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px
}

.meta-stat-val {
  font-size: 13px;
  font-weight: 600;
  text-align: right
}

.meta-bar {
  background: var(--bg-input);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 4px
}

.meta-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .3s
}

.meta-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--dim)
}

/* ===== RESPONSIVE MÓVIL ===== */
@media (max-width: 620px) {
  body {
    padding: .6rem .5rem;
    padding-top: max(.6rem, env(safe-area-inset-top));
    padding-bottom: max(.6rem, env(safe-area-inset-bottom));
    font-size: 15px;
  }

  /* Topbar: 4 cols — brand | reload | lock | config
             period y kpis ocupan fila completa */
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 8px 6px;
    margin-bottom: 1rem;
  }
  .brand      { grid-column: 1; grid-row: 1; }
  #btnReload  { grid-column: 2; grid-row: 1; }
  #btnLockMes { grid-column: 3; grid-row: 1; }
  #btnConfig  { grid-column: 4; grid-row: 1; }
  .period     { grid-column: 1 / -1; grid-row: 2; }
  .kpis       { grid-column: 1 / -1; grid-row: 3; justify-content: space-between; }

  .brand-name { font-size: 21px; }
  .topbar-logo { height: 40px; }

  .kpi        { flex: 1; min-width: 0; padding: 9px 10px; }
  .kpi .lb    { font-size: 10px; }
  .kpi .vl    { font-size: 14px; }

  /* Iconos más grandes en toda la app */
  .ico-xs  { width: 13px; height: 13px; }
  .ico-kpi { width: 14px; height: 14px; }
  .ico-st  { width: 15px; height: 15px; }
  .ico-btn { width: 17px; height: 17px; }

  /* Tabs: icono + nombre, más compactos para que quepan con texto */
  .tab        { padding: 9px 7px; font-size: 9.5px; }
  .atab       { font-size: 10px; }
  .ico-tab    { margin-bottom: 2px; width: 19px; height: 19px; }

  /* Botones de la topbar: área de toque más cómoda */
  .btn-cfg    { padding: 10px 12px; }

  /* Cards: padding más cómodo para tocar */
  .card       { padding: 14px; }
  .st         { margin-top: 1.1rem; font-size: 12.5px; }

  /* Inputs y selects: 16px evita el zoom automático de iOS al enfocar,
     más padding para área de toque. !important porque muchos templates
     fijan font-size/padding inline. */
  .fi { font-size: 16px !important; padding: 10px 10px !important; }
  .fs { padding: 10px 8px !important; }

  /* Botones "x" de eliminar: más fáciles de tocar */
  .bx { padding: 7px 11px; font-size: 15px; }

  /* Filas de listas: más aire y texto más legible */
  .li  { padding: 10px 0; }
  .lin, .lia { font-size: 14.5px; }
  .rl  { font-size: 14px; }

  /* Filas de ingresos/descuentos: ocultar nombre personalizado
     (redundante con el selector de tipo/categoria) y dejar Valor | Tipo.
     El selector ahora es flexible (1fr) para usar el ancho disponible de
     la fila en vez de quedarse en un ancho fijo angosto. La franja vacia
     al final queda fija y pequeña (no flexible): sin ella, el selector
     cubriria el 100% del ancho y no quedaria ningun area "no interactiva"
     donde iniciar el swipe para eliminar (swipe.js ignora a proposito los
     toques que empiezan sobre inputs/selects, para no romper la edicion
     normal). */
  .drow .fn, .irow .fn { display: none; }
  .irow, .drow { grid-template-columns: minmax(80px, 120px) 1fr 30px; }

  /* Filas de porcentajes de ahorro: el nombre pasa a su propia linea (.fn),
     y abajo quedan porcentaje | % | monto | color. El primer track quedaba
     en 1fr (greedy), asi que el input de porcentaje se estiraba a casi
     todo el ancho de la fila aunque solo necesita espacio para 3 digitos. */
  .arow { grid-template-columns: 54px auto 1fr auto; }
  .arow .fn { grid-column: 1 / -1; }
  .arow input[type="number"] { text-align: center; }

  /* Formulario agregar items: descripción en fila propia */
  .grow { grid-template-columns: 1fr auto auto; }
  .grow .fn { grid-column: 1 / -1; }

  /* Gastos fijos mensuales: fila con columna extra de dia de pago */
  .grow-dia { grid-template-columns: 100px 50px 1fr 34px; }

  /* Input nombre en tarjeta de deuda: ancho completo */
  .fi.fn { width: 100% !important; max-width: 100% !important; }

  /* Calendario en móvil: celdas más cómodas */
  .cal-cell { min-height: 58px; padding: 4px; }
  .cal-chip  { font-size: 9px; }
  .cal-num   { font-size: 11px; }
}

/* ── Calendario ── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 1rem
}

.cal-hdr {
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  padding: 4px 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em
}

.cal-cell {
  min-height: 72px;
  background: var(--bg-card);
  border: 1px solid var(--bxs);
  border-radius: 6px;
  padding: 4px;
  overflow: hidden
}

.cal-empty {
  background: transparent !important;
  border-color: transparent !important
}

.cal-hoy {
  border-color: #7F77DD !important;
  background: #7F77DD12 !important
}

.cal-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 3px
}

.cal-hoy .cal-num { color: #7F77DD }

.cal-chip {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  margin-bottom: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  border: 1px solid transparent
}

.cal-dia-total {
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

/* ── Día de pago input en lista de items ── */
.dia-inp { -moz-appearance: textfield }
.dia-inp::-webkit-outer-spin-button,
.dia-inp::-webkit-inner-spin-button { -webkit-appearance: none }

/* ── FAB Acceso rápido ── */
.fab {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7F77DD 0%, #5BD3B0 100%);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(127, 119, 221, .45);
  z-index: 150;
  transition: transform .15s ease
}

.fab:hover { transform: scale(1.06) }
.fab:active { transform: scale(.94) }

.ico-fab {
  width: 24px;
  height: 24px;
  stroke-width: 2.4
}

/* ── Panel de acceso rápido ── */
.qa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 220;
  display: none;
  align-items: flex-end;
  justify-content: center
}

.qa-overlay.open { display: flex }

.qa-panel {
  background: var(--bg-panel);
  border: 1px solid var(--blg);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 1.25rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  animation: qaIn .2s ease
}

@keyframes qaIn {
  from { opacity: 0; transform: translateY(20px) }
  to   { opacity: 1; transform: translateY(0) }
}

.qa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 15px;
  font-weight: 600
}

.qa-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 1rem
}

.qa-tab {
  flex: 1;
  padding: 9px 6px;
  border-radius: 8px;
  border: 1px solid var(--bsm);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px
}

.qa-tab.on {
  color: #7F77DD;
  border-color: #7F77DD;
  background: #7F77DD18
}

.qa-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px
}

.qa-row .fi { flex: 1; min-width: 0 }

/* Filas con input + select + boton "+" (wizard de bienvenida, pasos de
   gastos/obligaciones): por defecto un <select> no se encoge mas alla del
   ancho de su contenido dentro de un flex, asi que en pantallas angostas
   empuja el boton "+" fuera del modal. min-width:0 deja que se encoja
   (el texto largo de categoria queda truncado en vez de desbordar), y
   flex-shrink:0 en el boton asegura que el "+" siempre se vea completo. */
.qa-row select.fi { flex: 0 1 96px }
.qa-row > .btn { flex-shrink: 0 }

.qa-save {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: #7F77DD;
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px
}

.qa-save:active { transform: scale(.98) }

/* ── Asistente de bienvenida ── */
.ob-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem
}

.ob-overlay.open { display: flex }

.ob-panel {
  background: var(--bg-panel);
  border: 1px solid var(--blg);
  border-radius: 16px;
  width: min(420px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.25rem;
  animation: qaIn .2s ease
}

/* Campos compactos dentro del wizard: el !important sobre-escribe
   la regla global de mobile (16px/10px) pensada para listas normales,
   ya que aqui el espacio del modal es mas reducido */
.ob-panel .fi {
  font-size: 13px !important;
  padding: 7px 8px !important
}

.ob-panel .qa-row { margin-bottom: 8px }

.ob-list {
  margin: 10px 0;
  max-height: 130px;
  overflow-y: auto
}

.ob-empty {
  font-size: 12px;
  color: var(--dim);
  text-align: center;
  padding: 8px
}

.ob-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 1.25rem
}

.ob-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bsm);
  transition: all .2s ease
}

.ob-dot.on {
  background: #7F77DD;
  width: 18px;
  border-radius: 4px
}

.ob-title { font-size: 16px; font-weight: 700; margin-bottom: 4px }
.ob-hint  { font-size: 12.5px; color: var(--muted); line-height: 1.4 }

.ob-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px
}

.ob-actions .btn { flex: 1 }

.ob-next {
  flex: 2;
  background: #7F77DD;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit
}

.ob-next:active { transform: scale(.98) }

.ob-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--bxs);
  font-size: 12.5px
}

.ob-item span:first-child {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ob-item span:nth-child(2) {
  font-weight: 600;
  white-space: nowrap
}

.ob-item-del {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  font-family: inherit;
  flex-shrink: 0
}

.ob-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--bxs);
  font-size: 13px
}