/* ---------- Tokens (tema claro por defecto) ---------- */
:root {
  --papel: #F8FAFC; --sup: #FFFFFF; --sup2: #F1F5F9;
  --tinta: #0F172A; --tinta2: #475569; --tinta3: #94A3B8;
  --linea: #E2E8F0; --linea2: #CBD5E1;
  --acento: #4F46E5; --acento-sup: #EEF2FF; --acento-tinta: #FFFFFF;
  --ok: #10B981; --ok-sup: #D1FAE5; --mal: #F43F5E; --mal-sup: #FFE4E6; --ambar: #F59E0B; --ambar-sup: #FEF3C7;
  --azul: #0369A1; --azul-sup: #E0F2FE; --ambar-tinta: #92400E; --ambar-suave: #FEF9C3;
  --s1: #4F46E5; --s2: #0EA5E9; --s3: #10B981; --s4: #F59E0B; --s5: #8B5CF6;
  --radio: 12px; --radio-lg: 24px;
  --sombra: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 0 3px rgba(15, 23, 42, 0.02);
  --borde-tarjeta: 1px solid rgba(255, 255, 255, 0.5);
  --cifra: 'Outfit', system-ui, sans-serif;
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pc: 600; --tr-cifra: -0.01em;
  color-scheme: light;
}

/* Tema oscuro: sigue al sistema hasta que la persona elige uno con el botón. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #0B1120; --sup: #1E293B; --sup2: #334155;
    --tinta: #F8FAFC; --tinta2: #CBD5E1; --tinta3: #64748B;
    --linea: rgba(248, 250, 252, 0.06); --linea2: rgba(248, 250, 252, 0.12);
    --acento: #818CF8; --acento-sup: rgba(79, 70, 229, 0.15); --acento-tinta: #FFFFFF;
    --ok: #34D399; --ok-sup: rgba(16, 185, 129, 0.15); --mal: #FB7185; --mal-sup: rgba(244, 63, 94, 0.15); --ambar: #FBBF24; --ambar-sup: rgba(245, 158, 11, 0.15);
    --azul: #7DD3FC; --azul-sup: rgba(56, 189, 248, 0.16); --ambar-tinta: #FDE68A; --ambar-suave: rgba(250, 204, 21, 0.14);
    --s1: #6366F1; --s2: #38BDF8; --s3: #34D399; --s4: #FBBF24; --s5: #A78BFA;
    --sombra: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.3);
    --borde-tarjeta: 1px solid rgba(255, 255, 255, 0.03);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --papel: #0B1120; --sup: #1E293B; --sup2: #334155;
  --tinta: #F8FAFC; --tinta2: #CBD5E1; --tinta3: #64748B;
  --linea: rgba(248, 250, 252, 0.06); --linea2: rgba(248, 250, 252, 0.12);
  --acento: #818CF8; --acento-sup: rgba(79, 70, 229, 0.15); --acento-tinta: #FFFFFF;
  --ok: #34D399; --ok-sup: rgba(16, 185, 129, 0.15); --mal: #FB7185; --mal-sup: rgba(244, 63, 94, 0.15); --ambar: #FBBF24; --ambar-sup: rgba(245, 158, 11, 0.15);
  --azul: #7DD3FC; --azul-sup: rgba(56, 189, 248, 0.16); --ambar-tinta: #FDE68A; --ambar-suave: rgba(250, 204, 21, 0.14);
  --s1: #6366F1; --s2: #38BDF8; --s3: #34D399; --s4: #FBBF24; --s5: #A78BFA;
  --sombra: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.3);
  --borde-tarjeta: 1px solid rgba(255, 255, 255, 0.03);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--papel); color: var(--tinta);
  font-family: var(--ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
/* Transición de colores solo al cambiar de tema con el botón (no al cargar la página). */
.transicion-tema, .transicion-tema * {
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
}
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }
h2 { font-size: 1rem; }
h3 { font-size: 0.95rem; }
p { margin: 0; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; opacity: 0.85; }
button, input, select, textarea { font: inherit; color: inherit; }
input::placeholder { color: var(--tinta3); }
::-webkit-scrollbar { width: 0; height: 0; }
code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.85em; background: var(--sup2); padding: 1px 6px; border-radius: 6px; word-break: break-all; }
.cargando { padding: 3rem 1rem; color: var(--tinta3); text-align: center; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.cifra, .monto { font-family: var(--cifra); font-weight: var(--pc); letter-spacing: var(--tr-cifra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.etiqueta { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta3); }
.titulo-grupo { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta3); }
.tenue { color: var(--tinta3); }
.texto2 { color: var(--tinta2); }
.positivo { color: var(--ok); }
.negativo { color: var(--mal); }
.nota { color: var(--tinta2); font-size: 0.86rem; }
.nota.chica { font-size: 0.8rem; color: var(--tinta3); }
.meta { color: var(--tinta3); font-size: 0.78rem; }
.vacio { color: var(--tinta3); text-align: center; padding: 28px 12px; font-size: 0.92rem; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--papel) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
  padding-top: env(safe-area-inset-top);
}
.cab-dentro { max-width: 840px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 6px; min-height: 58px; }
.cab-titulos { display: flex; flex-direction: column; min-width: 0; }
.cab-titulo { font-family: var(--cifra); font-weight: var(--pc); font-size: 1.32rem; letter-spacing: var(--tr-cifra); line-height: 1.1; white-space: nowrap; }
.cab-titulo::first-letter { text-transform: uppercase; }
.cab-sub { font-size: 0.72rem; color: var(--tinta3); letter-spacing: 0.04em; text-transform: uppercase; }
.cab-espacio { flex: 1; }
.btn-icono { border: 0; background: transparent; color: var(--tinta2); width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; flex: none; }
.btn-icono:hover { background: var(--sup2); }
.btn-icono:disabled { opacity: 0.35; cursor: default; background: transparent; }
.btn-redondo { border: 1px solid var(--linea); background: transparent; color: var(--tinta2); width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; flex: none; }
.btn-hoy { border: 1px solid var(--linea2); background: transparent; color: var(--acento); border-radius: 999px; padding: 3px 10px; font-size: 0.76rem; cursor: pointer; flex: none; }
.pill-sync { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--linea); background: transparent; color: var(--tinta3); border-radius: 999px; padding: 5px 10px; font-size: 0.76rem; cursor: pointer; flex: none; }
.pill-sync.ok { color: var(--ok); }
.pill-sync.aviso { color: var(--ambar); background: var(--ambar-sup); border-color: transparent; }
.pill-sync.mal { color: var(--mal); background: var(--mal-sup); border-color: transparent; }
.pill-sync.girando svg { animation: girar 1s linear infinite; }
.pill-sync span { display: none; }
@media (min-width: 560px) { .pill-sync.con-texto span { display: inline; } }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Contenido ---------- */
.contenido { max-width: 840px; margin: 0 auto; padding: 18px 16px calc(132px + env(safe-area-inset-bottom)); }
.pila { display: flex; flex-direction: column; gap: 16px; }
.pila.amplia { gap: 18px; }

.hero-num { font-family: var(--cifra); font-weight: var(--pc); letter-spacing: var(--tr-cifra); font-variant-numeric: tabular-nums; line-height: 1; margin-top: 2px; font-size: 2.6rem; }
.hero-num.xl { font-size: 3.1rem; }
.hero-num.md { font-size: 2.1rem; }
.hero-texto { margin-top: 8px; color: var(--tinta2); font-size: 0.9rem; }

.tarjeta { background: var(--sup); border: var(--borde-tarjeta); box-shadow: var(--sombra); border-radius: var(--radio-lg); padding: 16px; min-width: 0; }
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }
.tarjeta-cab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.tarjeta-cab.centro { align-items: center; }
.tarjeta-cab > h2, .tarjeta-cab > .titulo-grupo { margin-right: auto; }
.tarjeta-cab.pegada { margin-bottom: 2px; }
.subtitulo { margin: -8px 0 14px; color: var(--tinta3); font-size: 0.82rem; }

.lista { list-style: none; margin: 0; padding: 0; }
.fila { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linea); min-width: 0; }
.fila.compacta { padding: 8px 0; gap: 10px; }
.fila.clic, .clic { cursor: pointer; }
.fila-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fila-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.fila-sub { font-size: 0.77rem; color: var(--tinta3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-quien { display: inline-block; font-size: 0.72rem; font-weight: 600; line-height: 1.35; padding: 1px 7px; margin-right: 6px; border-radius: 999px;
  vertical-align: 1px; background: var(--azul-sup); color: var(--azul); }
.chip-quien.otro { background: var(--ambar-suave); color: var(--ambar-tinta); }
.fila-sub.envuelve { white-space: normal; display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 3px; }
.derecha { text-align: right; flex: none; }
.dif { font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.hecho .fila-titulo { color: var(--tinta2); }

.check { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--linea2); background: transparent; display: grid; place-items: center; cursor: pointer; color: #fff; padding: 0; }
.check:hover { border-color: var(--acento); }
.hecho .check { background: var(--ok); border-color: var(--ok); }
/* Partida en abonos: el anillo se llena con lo pagado (--pct de 0 a 100). */
.check.parcial { position: relative; border-color: transparent; background: conic-gradient(var(--acento) calc(var(--pct, 0) * 1%), var(--linea2) 0); }
.check.parcial::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--sup); }
.hecho .check.omitida, .check.omitida { background: transparent; border: 1.5px dashed var(--linea2); }

.punto { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }
.barra-seg { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--sup2); }
.barra-seg.alta { height: 34px; border-radius: var(--radio); background: transparent; }
.barra-seg.media { height: 28px; border-radius: var(--radio); background: transparent; }
.barra-seg.fina { height: 8px; }
.barra-seg > span { display: block; height: 100%; min-width: 2px; }
.progreso { height: 6px; border-radius: 999px; background: var(--sup2); overflow: hidden; }
.progreso.fino { height: 4px; max-width: 180px; margin-top: 6px; }
.progreso > div { height: 100%; border-radius: 999px; background: var(--ok); transition: width 0.4s ease; }
.progreso.acento > div { background: var(--acento); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.leyenda > span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--tinta2); }
.leyenda b { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.leyenda .linea-sin { display: inline-block; width: 14px; border-top: 2px dashed var(--tinta3); }
.leyenda .linea-con { display: inline-block; width: 14px; border-top: 2px solid var(--acento); }

.chip { display: inline-block; font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; background: var(--sup2); color: var(--tinta2); white-space: nowrap; }
.chip.aviso { background: var(--ambar-sup); color: var(--ambar); }
.chip.acento { background: var(--acento-sup); color: var(--acento); }
.chip.ok { background: var(--ok-sup); color: var(--ok); }
.chip.clic { cursor: pointer; font-size: 0.8rem; padding: 5px 11px; }

.caja-ambar { margin-top: 14px; padding: 12px 14px; background: var(--ambar-sup); border-radius: var(--radio); font-size: 0.9rem; }
.caja-ambar b { font-family: var(--cifra); font-weight: 600; }
.aviso-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--acento-sup); border-radius: var(--radio); padding: 12px 14px; font-size: 0.9rem; }
.aviso-banner.ambar { background: var(--ambar-sup); }
.aviso-banner p { flex: 1 1 220px; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.kpis.dos { grid-template-columns: 1fr 1fr; }
.kpi { background: var(--sup); border: var(--borde-tarjeta); box-shadow: var(--sombra); border-radius: var(--radio-lg); padding: 14px 16px; min-width: 0; }
.kpi-et { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta3); }
.kpi-val { font-family: var(--cifra); font-weight: var(--pc); font-size: 1.5rem; letter-spacing: var(--tr-cifra); font-variant-numeric: tabular-nums; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-nota { font-size: 0.76rem; color: var(--tinta3); }
.kpi.destacado { background: var(--acento-sup); box-shadow: none; border-color: transparent; }
.kpi.destacado .kpi-et, .kpi.destacado .kpi-nota { color: var(--tinta2); }
.kpi.destacado .kpi-val { color: var(--acento); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--linea2); background: transparent; color: var(--tinta); border-radius: var(--radio); padding: 8px 14px; font-size: 0.85rem; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--sup2); text-decoration: none; opacity: 1; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primario { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); font-weight: 600; }
.btn.primario:hover { filter: brightness(1.08); }
.btn.peligro { border-color: var(--mal); color: var(--mal); }
.btn-link { border: 0; background: transparent; color: var(--acento); font-size: 0.85rem; cursor: pointer; padding: 2px 0; }
.btn-punteado { border: 1px dashed var(--linea2); background: transparent; color: var(--tinta2); border-radius: var(--radio); padding: 10px 14px; font-size: 0.86rem; cursor: pointer; width: 100%; }
.btn-punteado:hover { border-color: var(--acento); color: var(--acento); }
.botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.segmentos { display: flex; gap: 4px; background: var(--sup2); border-radius: var(--radio); padding: 4px; }
.segmentos button { flex: 1 1 auto; border: 0; border-radius: calc(var(--radio) - 2px); padding: 8px 10px; cursor: pointer; font-size: 0.84rem; background: transparent; color: var(--tinta2); }
.segmentos button.activo { background: var(--sup); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.segmentos.envuelve { flex-wrap: wrap; }

.chips-filtro { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.chip-filtro { flex: none; border-radius: 999px; padding: 7px 14px; font-size: 0.83rem; cursor: pointer; white-space: nowrap; background: transparent; color: var(--tinta2); border: 1px solid var(--linea2); }
.chip-filtro.activo { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.interruptor { width: 48px; height: 28px; border-radius: 999px; border: 0; cursor: pointer; padding: 3px; display: flex; justify-content: flex-start; background: var(--sup2); flex: none; }
.interruptor.on { justify-content: flex-end; background: var(--acento); }
.interruptor > span { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.interruptor.chico { width: 38px; height: 22px; }
.interruptor.chico > span { width: 16px; height: 16px; }

.opciones { display: flex; gap: 8px; flex-wrap: wrap; }
.opcion { flex: 1 1 120px; border-radius: var(--radio); padding: 10px 14px; font-size: 0.9rem; cursor: pointer; background: transparent; color: var(--tinta2); border: 1px solid var(--linea2); }
.opcion.activa { background: var(--acento); color: var(--acento-tinta); border-color: var(--acento); font-weight: 600; }
.avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sup2); color: var(--tinta2); display: grid; place-items: center; font-size: 0.8rem; font-weight: 600; }
.num-circulo { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--acento-sup); color: var(--acento); display: grid; place-items: center; font-size: 0.8rem; font-weight: 600; }
.num-circulo.fuera { background: var(--sup2); color: var(--tinta3); }
.icono-tipo { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; background: var(--sup2); color: var(--tinta2); }
.icono-tipo.gasto, .icono-tipo.abono { background: var(--mal-sup); color: var(--mal); }
.icono-tipo.ingreso, .icono-tipo.recibo { background: var(--ok-sup); color: var(--ok); }
.icono-tipo.transferencia { background: var(--acento-sup); color: var(--acento); }

.datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 14px 0 0; font-size: 0.86rem; padding-top: 12px; border-top: 1px solid var(--linea); }
.datos.sin-linea { border-top: 0; padding-top: 0; margin-top: 0; }
.datos dt { color: var(--tinta3); }
.datos dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.enlace-mas { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; border-top: 1px solid var(--linea); background: transparent; color: var(--tinta); padding: 16px; font-size: 0.98rem; text-align: left; cursor: pointer; text-decoration: none; }
.enlace-mas:first-child { border-top: 0; }
.enlace-mas:hover { background: var(--sup2); text-decoration: none; opacity: 1; }
.enlace-mas .icono { color: var(--tinta3); display: grid; place-items: center; }
.enlace-mas .valor { color: var(--tinta3); font-size: 0.82rem; font-variant-numeric: tabular-nums; }

/* ---------- Movimientos ---------- */
.dia-cab { display: flex; align-items: baseline; gap: 8px; margin: 4px 2px 6px; }
.dia-cab .etiqueta { font-weight: 600; }
.dia-cab .punto { align-self: center; }
.titulo-grupo .punto { margin-right: 4px; vertical-align: 1px; }
.dia-cab .linea { flex: 1; height: 1px; background: var(--linea); align-self: center; }
.dia-cab .total { font-size: 0.78rem; color: var(--tinta3); font-variant-numeric: tabular-nums; }
.lista-mov { list-style: none; margin: 0; padding: 0; background: var(--sup); border: var(--borde-tarjeta); box-shadow: var(--sombra); border-radius: var(--radio-lg); overflow: hidden; }
.lista-mov > li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--linea); cursor: pointer; }
.lista-mov > li:first-child { border-top: 0; }
.lista-mov > li:hover { background: color-mix(in srgb, var(--sup2) 50%, transparent); }
.buscador { display: flex; gap: 8px; }
.buscador input { flex: 1; min-width: 0; border: 1px solid var(--linea2); background: var(--sup); color: var(--tinta); border-radius: var(--radio); padding: 10px 12px; min-height: 42px; }
.buscador .btn { background: var(--sup); }
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 8px; }

/* ---------- Agenda de pendientes ---------- */
.agenda-dia { display: flex; gap: 14px; align-items: stretch; }
.agenda-fecha { flex: none; width: 46px; text-align: center; padding-top: 10px; }
.agenda-fecha .num { font-family: var(--cifra); font-weight: var(--pc); font-size: 1.35rem; line-height: 1; }
.agenda-fecha .dia { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta3); }
.agenda-linea { flex: none; width: 1px; background: var(--linea); margin: 0 2px; }
.agenda-items { flex: 1; min-width: 0; padding: 8px 0; }
.agenda-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }

/* ---------- Gráficos SVG ---------- */
.grafico { width: 100%; display: block; overflow: visible; }
.eje-meses { display: grid; margin-top: 6px; }
.eje-meses > div { text-align: center; }
.eje-meses .mes { font-size: 0.74rem; color: var(--tinta2); text-transform: uppercase; letter-spacing: 0.04em; }
.eje-meses .total { font-size: 0.68rem; color: var(--tinta3); font-variant-numeric: tabular-nums; }
.eje-meses .activo .mes { color: var(--acento); font-weight: 600; }
.eje-anios { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.72rem; color: var(--tinta3); font-variant-numeric: tabular-nums; }
.grafico-info { margin-top: 10px; font-size: 0.82rem; color: var(--tinta2); min-height: 1.3em; font-variant-numeric: tabular-nums; }
.leyenda-grafico { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.leyenda-grafico > span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--tinta2); }

/* ---------- Tabla ---------- */
.envoltura-tabla { overflow-x: auto; margin-top: 16px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tabla th { padding: 8px 6px; text-align: left; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta3); font-weight: 600; }
.tabla td { padding: 10px 6px; border-top: 1px solid var(--linea); white-space: nowrap; }
.tabla th:first-child, .tabla td:first-child { padding-left: 0; }
.tabla th:last-child, .tabla td:last-child { padding-right: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Barra de navegación inferior ---------- */
.navbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: color-mix(in srgb, var(--sup) 90%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom);
}
.navbar-dentro { max-width: 840px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: 62px; padding: 0 4px; }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: transparent; cursor: pointer; height: 100%; padding: 0; color: var(--tinta3); text-decoration: none; }
.nav-item span { font-size: 0.68rem; }
.nav-item.activo { color: var(--acento); font-weight: 600; }
.nav-item:hover { text-decoration: none; opacity: 1; color: var(--tinta2); }
.nav-item.activo:hover { color: var(--acento); }
.nav-fab { display: grid; place-items: center; }
.fab { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--sup); background: var(--acento); color: var(--acento-tinta); display: grid; place-items: center; cursor: pointer; transform: translateY(-14px); box-shadow: 0 8px 20px color-mix(in srgb, var(--acento) 40%, transparent); }
.fab:active { transform: translateY(-14px) scale(0.96); }

/* ---------- Formularios ---------- */
.formulario { display: flex; flex-direction: column; gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > span { font-size: 0.78rem; color: var(--tinta3); }
.campo input, .campo select, .campo textarea, .filtros select, .input {
  width: 100%; border: 1px solid var(--linea2); background: transparent; color: var(--tinta); border-radius: var(--radio); padding: 9px 11px; min-height: 40px; font-variant-numeric: tabular-nums;
}
.campo select option, .filtros select option { background: var(--sup); color: var(--tinta); }
.campo input:focus, .campo select:focus, .filtros select:focus, .buscador input:focus, .input:focus { outline: 2px solid color-mix(in srgb, var(--acento) 45%, transparent); outline-offset: 0; border-color: var(--acento); }
.fila-campos { display: flex; flex-wrap: wrap; gap: 10px; }
.fila-campos > .campo, .fila-campos > .casilla { flex: 1 1 150px; }
.casilla { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9rem; }
.casilla input { width: 18px; height: 18px; flex: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acento); }
.meses { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.meses button { border: 1px solid var(--linea2); background: transparent; border-radius: 8px; padding: 6px 0; font-size: 0.8rem; cursor: pointer; }
.meses button.activo { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.error { color: var(--mal); font-size: 0.86rem; }
.acciones { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.espacio { flex: 1; }

/* ---------- Menú lateral ---------- */
.menu { display: flex; flex-direction: column; gap: 4px; min-height: 100%; padding: calc(12px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)); }
.menu-cab { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; min-height: 44px; }
.menu-marca { font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.menu-nuevo { width: 100%; margin: 2px 0 8px; padding: 10px 14px; }
.menu-grupo { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--linea); }
.menu-cab + .menu-grupo, .menu-nuevo + .menu-grupo { border-top: 0; }
.menu-grupo-titulo { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta3); padding: 4px 10px 4px; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 8px 10px; border: 0; border-radius: var(--radio); background: transparent; color: var(--tinta2); text-decoration: none; font-size: 0.93rem; text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--sup2); color: var(--tinta); text-decoration: none; opacity: 1; }
.menu-item.activo { background: var(--acento-sup); color: var(--acento); font-weight: 600; }
.menu-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-valor { font-size: 0.78rem; color: var(--tinta3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-pie { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 2px; }
.menu-meta { padding: 6px 10px 0; }
.menu.contraido { align-items: center; padding-left: 8px; padding-right: 8px; }
.menu.contraido .menu-item, .menu.contraido .menu-nuevo { justify-content: center; width: 48px; padding-left: 0; padding-right: 0; }
.menu.contraido .menu-cab { justify-content: center; }
.avatar.chico { width: 26px; height: 26px; font-size: 0.72rem; }

dialog.menu-panel { margin: 0; padding: 0; border: 0; inset: 0 auto 0 0; height: 100dvh; max-height: 100dvh; width: min(84vw, 320px); max-width: none; background: var(--sup); color: var(--tinta); box-shadow: var(--sombra); overflow-y: auto; }
dialog.menu-panel::backdrop { background: rgba(15, 23, 42, 0.5); }
dialog.menu-panel[open] { animation: entrar-izq 0.2s ease-out; }
@keyframes entrar-izq { from { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { dialog.menu-panel[open] { animation: none; } }

.menu-fijo { position: fixed; top: 0; bottom: 0; left: 0; z-index: 35; width: 264px; background: var(--sup); border-right: 1px solid var(--linea); overflow-y: auto; }
.menu-contraido .menu-fijo { width: 76px; }
@media (min-width: 1024px) {
  .con-menu-fijo { padding-left: 264px; }
  .con-menu-fijo.menu-contraido { padding-left: 76px; }
  .con-menu-fijo .contenido { padding-bottom: 48px; }
  .con-menu-fijo .avisos { bottom: 24px; }
}

/* ---------- Filtro de persona ---------- */
.selector-persona { position: relative; flex: none; }
.campana { position: relative; text-decoration: none; }
.campana.activo { border-color: transparent; background: var(--acento-sup); color: var(--acento); }
.insignia { position: absolute; top: -4px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--mal); color: #fff; font-size: 0.66rem; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.btn-persona { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--tinta2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.btn-persona.activo { border-color: transparent; background: var(--acento-sup); color: var(--acento); }
.inicial { font-weight: 700; font-size: 0.82rem; }
.inicial.chica { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 0.7rem; flex: none; }
.popover { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: var(--sup); border: 1px solid var(--linea2); box-shadow: var(--sombra); border-radius: var(--radio); padding: 6px; z-index: 45; }
.popover-titulo { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta3); padding: 4px 8px 6px; }
.popover button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; border-radius: 8px; padding: 9px 8px; text-align: left; cursor: pointer; font-size: 0.92rem; color: var(--tinta); }
.popover button:hover { background: var(--sup2); }
.popover button span:not(.inicial) { flex: 1; }
.popover .marca { color: var(--acento); }
.franja-persona { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: -6px 0 16px; padding: 8px 12px; border-radius: var(--radio); background: var(--acento-sup); color: var(--tinta); font-size: 0.86rem; }

.enlace-tarjeta { display: flex; align-items: center; gap: 12px; color: var(--tinta); text-decoration: none; }
.enlace-tarjeta:hover { text-decoration: none; opacity: 1; background: var(--sup2); }
button.nav-item { font: inherit; }
@media (max-width: 400px) {
  .cab-dentro { gap: 2px; padding-left: 8px; padding-right: 8px; }
  .cab-titulo { font-size: 1.12rem; }
  .btn-hoy { padding: 3px 8px; }
  .segmentos button { padding: 8px 5px; font-size: 0.8rem; }
}

/* ---------- Bloqueo con PIN ---------- */
html.privado #app { visibility: hidden; }
.bloqueo { position: fixed; inset: 0; z-index: 60; background: var(--papel); display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; }
.bloqueo-caja { width: min(100%, 320px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.bloqueo-caja h1 { font-size: 1.4rem; }
.bloqueo-caja .nota { min-height: 2.6em; }
.puntos-pin { display: flex; gap: 14px; justify-content: center; margin: 4px 0 10px; }
.puntos-pin span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linea2); }
.puntos-pin span.lleno { background: var(--acento); border-color: var(--acento); }
.puntos-pin.sacudir { animation: sacudir 0.35s ease; }
@keyframes sacudir { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.teclado-pin { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px 22px; justify-content: center; }
.teclado-pin button { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--linea); background: var(--sup); box-shadow: var(--sombra); font-family: var(--cifra); font-size: 1.6rem; font-weight: 500; cursor: pointer; color: var(--tinta); }
.teclado-pin button:active { background: var(--sup2); }
.teclado-pin button:disabled { opacity: 0.45; cursor: default; }
.teclado-pin button.borrar { border: 0; background: transparent; box-shadow: none; color: var(--tinta2); display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) { .puntos-pin.sacudir { animation: none; } }

/* ---------- Modal y avisos ---------- */
dialog.modal { border: 0; padding: 0; background: transparent; max-width: 560px; width: calc(100% - 24px); color: var(--tinta); }
dialog.modal::backdrop { background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); }
dialog.modal.confirmar { max-width: 420px; }
.modal-caja { background: var(--sup); border: var(--borde-tarjeta); border-radius: var(--radio-lg); padding: 18px; max-height: calc(100dvh - 40px); overflow-y: auto; box-shadow: var(--sombra); }
.modal-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.modal-cab h2 { margin-right: auto; font-family: var(--cifra); font-size: 1.2rem; letter-spacing: var(--tr-cifra); }
@media (max-width: 560px) {
  dialog.modal { width: 100%; max-width: none; margin: auto 0 0; }
  .modal-caja { border-radius: var(--radio-lg) var(--radio-lg) 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}
.avisos { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; z-index: 50; width: min(92vw, 440px); pointer-events: none; }
.aviso-item { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--tinta); color: var(--papel); border-radius: var(--radio); padding: 10px 14px; font-size: 0.9rem; box-shadow: var(--sombra); }
.aviso-item.error { background: var(--mal); color: #fff; }
.aviso-item span { flex: 1; }
.aviso-item button { border: 0; background: transparent; color: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }

/* Deducciones del pago de un salario */
.deducciones { display: flex; flex-direction: column; gap: 8px; }
.deducciones-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.deduccion { display: grid; grid-template-columns: minmax(0, 1fr) 118px auto; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--linea); }
.deduccion-nombre { display: flex; flex-direction: column; min-width: 0; font-size: 0.92rem; }
.deduccion input[type="number"] { width: 100%; border: 1px solid var(--linea2); background: var(--sup); color: var(--tinta); border-radius: var(--radio); padding: 8px 10px; font: inherit; font-variant-numeric: tabular-nums; }
.deduccion.no-aplica .deduccion-nombre { color: var(--tinta3); text-decoration: line-through; }
.casilla.chica { font-size: 0.8rem; white-space: nowrap; }
.texto-aviso { color: var(--ambar); }
.check.planilla { border-style: dashed; }
.aviso-tarjeta.hoy { border-left: 3px solid var(--mal); }
.aviso-tarjeta.semana { border-left: 3px solid var(--ambar); }
.aviso-tarjeta h3 { font-size: 1rem; }
@media (max-width: 400px) { .deduccion { grid-template-columns: minmax(0, 1fr) 100px; } .deduccion .casilla { grid-column: 1 / -1; } }

/* Asistente de configuración */
.pasos { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; }
.pasos li { flex: 1 1 0; min-width: 72px; }
.pasos button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border: 0; border-radius: var(--radio); background: transparent; color: var(--tinta2); cursor: pointer; font-size: 0.78rem; text-align: center; }
.pasos li.activo button { background: var(--acento-sup); color: var(--tinta); font-weight: 600; }
.pasos li.hecho .num-circulo { background: var(--ok); color: #fff; }
.lista-puntos { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; color: var(--tinta2); }

/* Tarjetas de crédito y compras a cuotas */
.hero-num.chico { font-size: 1.6rem; }
.chip.mal { background: var(--mal-sup); color: var(--mal); }
.icono-tipo.pago_tarjeta { background: var(--acento-sup); color: var(--acento); }
.icono-tipo.cuota, .icono-tipo.cargo { background: var(--mal-sup); color: var(--mal); }
.deuda-tarjeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; margin-top: 10px; }
.deuda-tarjeta > div { display: flex; flex-direction: column; gap: 2px; }
.caja-corte { padding: 10px 14px; background: var(--sup2); border-radius: var(--radio); font-size: 0.88rem; display: flex; flex-direction: column; gap: 4px; }
.caja-cuotas, .cargo-tarjeta { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--linea); border-radius: var(--radio); }
.navegador-corte { display: flex; align-items: center; gap: 8px; }
.navegador-titulos { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.navegador-titulo { font-weight: 600; font-size: 1rem; }
.navegador-sub { font-size: 0.78rem; color: var(--tinta3); }
.enlace-fila, .enlace-fila:hover { color: inherit; text-decoration: none; opacity: 1; }

/* Metas, reparto y comparar años */
.chips-filtro.envuelve { flex-wrap: wrap; overflow: visible; }
.progreso.gris > div { background: var(--tinta3); }
.fila-comparada { padding: 10px 0; border-top: 1px solid var(--linea); }
.fila-comparada-cab { display: flex; align-items: baseline; gap: 10px; width: 100%; border: 0; background: transparent; color: inherit; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.fila-comparada-cab .fila-titulo { flex: 1; min-width: 0; }
.barras-par { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.barras-par .progreso { height: 5px; }
.detalle-grupo { margin-top: 10px; padding: 8px 10px; background: var(--sup2); border-radius: var(--radio); display: flex; flex-direction: column; gap: 4px; font-size: 0.84rem; }
.detalle-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 64px; gap: 10px; align-items: baseline; }
.detalle-fila > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detalle-fila > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }