/* Mis finanzas v2 */
:root {
  --bg: #F3F5FA; --card: #FFFFFF; --tx: #0F172A; --tx2: #475569; --tx3: #94A3B8; --bd: #E6EAF2;
  --navy: #0B1736; --navy2: #14244D; --azul: #2F6BFF; --azul-s: #EAF0FF;
  --verde: #0E9F6E; --verde-s: #E7F7F0; --rojo: #E5484D; --rojo-s: #FDECEC; --ambar: #E38A0B; --ambar-s: #FFF4E0;
  --morado: #7C5CFF; --morado-s: #F0ECFF; --cel: #0EA5E9; --cel-s: #E6F6FD;
  --r: 18px; --sombra: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.04);
}
* { box-sizing: border-box; }
html, body.fp-body { margin: 0; padding: 0; background: var(--bg); }
body.fp-body { font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tx); -webkit-font-smoothing: antialiased; }
.fp-app a { color: inherit; text-decoration: none; }
.fp-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-pos { color: var(--verde); } .fp-neg { color: var(--rojo); } .fp-mute { color: var(--tx3); }

/* ---------- Estructura ---------- */
.fp-app { display: flex; min-height: 100vh; }
.fp-side { width: 248px; flex: none; background: var(--navy); color: #C9D3EA; padding: 22px 14px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; }
.fp-marca { display: flex; gap: 12px; align-items: center; padding: 0 8px; }
.fp-marca b { color: #fff; display: block; font-size: 16px; }
.fp-marca small { color: #7C8DB5; font-size: 12px; }
.fp-logo { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #4F86FF, #2F6BFF); color: #fff; font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; flex: none; }
.fp-logo-xl { width: 60px; height: 60px; border-radius: 18px; font-size: 32px; margin: 0 auto; }
.fp-side nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.fp-side nav a, .fp-salir { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-weight: 500; transition: background .15s, color .15s; }
.fp-side nav a:hover, .fp-salir:hover { background: var(--navy2); color: #fff; }
.fp-side nav a.on { background: var(--azul); color: #fff; box-shadow: 0 6px 18px rgba(47,107,255,.35); }
.fp-salir { color: #F3A5A7; }
.fp-cuerpo { flex: 1; min-width: 0; }
.fp-main { max-width: 1240px; margin: 0 auto; padding: 28px 32px 60px; display: flex; flex-direction: column; gap: 20px; }

/* ---------- Cabecera ---------- */
.fp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fp-head h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.fp-head p { margin: 4px 0 0; color: var(--tx2); }
.fp-head-acc { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fp-mesnav { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.fp-mesnav span { font-weight: 600; color: var(--tx); min-width: 130px; text-align: center; }

/* ---------- Botones ---------- */
.fp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--azul); color: #fff !important; border: 0; border-radius: 12px; padding: 10px 16px; font: 600 14px/1.2 inherit; font-family: inherit; cursor: pointer; transition: filter .15s, transform .05s; white-space: nowrap; }
.fp-btn:hover { filter: brightness(1.07); } .fp-btn:active { transform: translateY(1px); }
.fp-btn .fp-i { width: 18px; height: 18px; }
.fp-btn-sec { background: #fff; color: var(--tx) !important; border: 1px solid var(--bd); }
.fp-btn-peligro { background: var(--rojo-s); color: var(--rojo) !important; }
.fp-btn-full { width: 100%; padding: 13px; font-size: 15px; }
.fp-btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.fp-icon-btn { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--bd); color: var(--tx2); cursor: pointer; padding: 0; flex: none; }
.fp-icon-btn:hover { color: var(--tx); border-color: #CBD3E1; }
.fp-icon-btn.fp-ok { color: var(--verde); border-color: #BDE8D6; background: var(--verde-s); }
.fp-icon-btn.fp-ok:hover { background: var(--verde); color: #fff; }
.fp-ok-hecho { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--tx3); flex: none; }
.fp-link { color: var(--azul) !important; font-weight: 600; font-size: 14px; }
.fp-inline { display: inline-flex; margin: 0; }

/* ---------- Tarjetas ---------- */
.fp-card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--r); padding: 20px; box-shadow: var(--sombra); min-width: 0; }
.fp-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.fp-card-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.fp-card-head small { color: var(--tx3); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.fp-card-lista { padding: 8px 8px; }
.fp-card-lista > .fp-card-head { padding: 12px 12px 0; }
.fp-grid { display: grid; gap: 20px; }
.fp-grid-2 { grid-template-columns: 1fr 1fr; }
.fp-grid-2-1 { grid-template-columns: 1.6fr 1fr; }
.fp-nota { color: var(--tx2); font-size: 13px; margin: 6px 0 0; }
.fp-pad { padding: 0 12px 6px; margin: 0; }
.fp-vacio { padding: 26px 16px; text-align: center; color: var(--tx3); }

/* ---------- Héroe ---------- */
.fp-hero { background: radial-gradient(120% 140% at 100% 0%, #2F6BFF 0%, #1A3A8F 45%, #0B1736 100%); color: #fff; border-radius: 24px; padding: 26px 28px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; align-items: center; box-shadow: 0 12px 30px rgba(11,23,54,.25); }
.fp-hero-main span, .fp-hero-grid span { color: #B9C8F2; font-size: 13px; font-weight: 500; display: block; }
.fp-hero-main strong { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; display: block; margin: 6px 0; }
.fp-hero-main small { color: #8FA3D8; font-size: 12px; }
.fp-hero-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fp-hero-grid > div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px 16px; }
.fp-hero-grid b { display: block; font-size: 21px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fp-hero-grid .fp-pos { color: #6EE7B7; }
.fp-neg-claro { color: #FFB4B6; }

/* ---------- Plan ---------- */
.fp-plan ol { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: flex; flex-direction: column; gap: 10px; }
.fp-plan li { counter-increment: paso; }
.fp-plan li a { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 12px; border-radius: 14px; background: #F7F9FD; border: 1px solid transparent; transition: border-color .15s, background .15s; }
.fp-plan li a:hover { border-color: var(--bd); background: #fff; }
.fp-plan li a::before { content: counter(paso); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--azul-s); color: var(--azul); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.fp-plan li b { font-weight: 700; }
.fp-plan li span { color: var(--tx2); font-size: 14px; }

/* ---------- Semáforo ---------- */
.fp-semaforo { display: flex; flex-direction: column; gap: 8px; }
.fp-semaforo h2 { margin: 6px 0 0; font-size: 20px; }
.fp-semaforo p { margin: 0; color: var(--tx2); font-size: 14px; }
.fp-luz { display: inline-flex; gap: 6px; background: #F1F4F9; padding: 6px 8px; border-radius: 999px; align-self: flex-start; }
.fp-luz i { width: 14px; height: 14px; border-radius: 50%; background: #D7DDE8; }
.fp-s-rojo .fp-luz i:nth-child(1) { background: var(--rojo); box-shadow: 0 0 10px var(--rojo); }
.fp-s-ambar .fp-luz i:nth-child(2) { background: var(--ambar); box-shadow: 0 0 10px var(--ambar); }
.fp-s-verde .fp-luz i:nth-child(3) { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.fp-s-rojo { border-top: 4px solid var(--rojo); } .fp-s-ambar { border-top: 4px solid var(--ambar); } .fp-s-verde { border-top: 4px solid var(--verde); }
.fp-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 12px; }
.fp-mini > div { background: #F7F9FD; border-radius: 12px; padding: 10px 12px; }
.fp-mini span { color: var(--tx3); font-size: 12px; display: block; }
.fp-mini b { font-size: 17px; font-variant-numeric: tabular-nums; }

/* ---------- Filas ---------- */
.fp-lista { display: flex; flex-direction: column; }
.fp-fila { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.fp-fila + .fp-fila { border-top: 1px solid #F0F2F7; }
.fp-card-lista .fp-fila:hover { background: #F8FAFD; }
.fp-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fp-fila-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-fila-txt small { color: var(--tx2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-fila-der { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.fp-fila-der b { font-weight: 700; }
.fp-fila-der small { font-size: 12px; }
.fp-fila-pend { background: #FFFCF5; }
.fp-fila-hecha { opacity: .55; }
.fp-pagar { margin: 0; display: inline-flex; }
.fp-dia { font-size: 12px; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: .05em; padding: 14px 12px 4px; }
.fp-ver-mas { padding: 10px 12px; }
.fp-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; background: #F1F4F9; color: var(--tx2); }
.fp-ico-ingreso { background: var(--verde-s); color: var(--verde); }
.fp-ico-prestamo { background: var(--ambar-s); color: var(--ambar); }
.fp-ico-egreso { background: var(--rojo-s); color: var(--rojo); }
.fp-ico-abono { background: var(--morado-s); color: var(--morado); }
.fp-ico-ahorro, .fp-ico-com { background: var(--cel-s); color: var(--cel); }
.fp-ico-casa { background: var(--azul-s); color: var(--azul); }
.fp-dia-num { font-size: 15px; }

/* ---------- Badges ---------- */
.fp-badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #EEF1F6; color: var(--tx2); white-space: nowrap; }
.fp-b-rojo { background: var(--rojo-s); color: var(--rojo); }
.fp-b-ambar { background: var(--ambar-s); color: #B26A00; }
.fp-b-verde { background: var(--verde-s); color: var(--verde); }
.fp-b-azul { background: var(--azul-s); color: var(--azul); }
.fp-b-gris { background: #F1F3F6; color: var(--tx3); }

/* ---------- Estadísticas ---------- */
.fp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.fp-stat { background: #fff; border: 1px solid var(--bd); border-radius: 16px; padding: 16px 18px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 2px; }
.fp-stat > span { color: var(--tx2); font-size: 13px; font-weight: 500; }
.fp-stat strong { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.fp-stat small { color: var(--tx3); font-size: 12.5px; }
.fp-stat-ambar { border-left: 4px solid var(--ambar); }
.fp-stat-azul { border-left: 4px solid var(--azul); }

/* ---------- Toolbar / chips ---------- */
.fp-toolbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.fp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fp-chips a { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--bd); font-size: 13.5px; font-weight: 500; color: var(--tx2); }
.fp-chips a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.fp-buscar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 0 12px; color: var(--tx3); }
.fp-buscar input { border: 0 !important; outline: 0; padding: 9px 0 !important; background: transparent !important; width: 200px; font: inherit; }

/* ---------- Barras ---------- */
.fp-prog { height: 8px; border-radius: 999px; background: #EDF0F6; overflow: hidden; }
.fp-prog i { display: block; height: 100%; border-radius: 999px; background: var(--azul); }
.fp-prog-verde i { background: linear-gradient(90deg, #34D399, var(--verde)); }
.fp-prog-rojo i { background: var(--rojo); }
.fp-prog-xl { height: 12px; }
.fp-cats { display: flex; flex-direction: column; gap: 14px; }
.fp-cat { display: flex; flex-direction: column; gap: 5px; }
.fp-cat-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.fp-cat-top b { font-variant-numeric: tabular-nums; }
.fp-cat small { color: var(--tx3); font-size: 12px; }

/* Proyección */
.fp-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.fp-tri > div { background: #F7F9FD; border-radius: 14px; padding: 12px 14px; }
.fp-tri span { font-size: 12.5px; color: var(--tx2); display: block; }
.fp-tri b { font-size: 19px; font-weight: 800; display: block; }
.fp-tri small { color: var(--tx3); font-size: 12px; }
.fp-barras-saldo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; height: 170px; }
.fp-bs { display: grid; grid-template-rows: 1fr 1fr auto; text-align: center; gap: 0; }
.fp-bs-pos, .fp-bs-neg { display: flex; justify-content: center; }
.fp-bs-pos { align-items: flex-end; border-bottom: 1px solid #DDE3EE; }
.fp-bs-neg { align-items: flex-start; }
.fp-bs i { width: 60%; max-width: 38px; display: block; }
.fp-bs-pos i { background: linear-gradient(180deg, #34D399, var(--verde)); border-radius: 8px 8px 0 0; }
.fp-bs-neg i { background: linear-gradient(0deg, #FF8A8D, var(--rojo)); border-radius: 0 0 8px 8px; }
.fp-bs span { font-size: 12px; color: var(--tx3); margin-top: 6px; }

/* Histórico */
.fp-hist { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; height: 190px; }
.fp-h { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fp-h-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.fp-h-bars i { width: 34%; max-width: 18px; border-radius: 6px 6px 0 0; display: block; min-height: 2px; }
.fp-h-in, .fp-ley-in { background: var(--verde); }
.fp-h-out, .fp-ley-out { background: #A9B7D6; }
.fp-h b { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.fp-h span { font-size: 12px; color: var(--tx3); }
.fp-ley { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }

/* ---------- Deudas y metas ---------- */
.fp-deuda-total { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; align-items: center; }
.fp-deuda-total > div > span { color: var(--tx2); font-size: 13px; }
.fp-deuda-total strong { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.fp-deuda-total small { color: var(--tx3); font-size: 13px; }
.fp-deuda-avance { display: flex; flex-direction: column; gap: 8px; }
.fp-deudas, .fp-metas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.fp-deuda, .fp-meta { display: flex; flex-direction: column; gap: 10px; }
.fp-deuda-primera { border: 2px solid var(--azul); box-shadow: 0 8px 24px rgba(47,107,255,.15); }
.fp-deuda-top { display: flex; align-items: flex-start; gap: 10px; }
.fp-deuda-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.fp-deuda-top b { font-weight: 700; }
.fp-orden { width: 28px; height: 28px; border-radius: 9px; background: #F1F4F9; color: var(--tx2); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.fp-deuda-primera .fp-orden { background: var(--azul); color: #fff; }
.fp-deuda > strong, .fp-meta-num strong { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.fp-meta-num { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fp-meta-num span { color: var(--tx3); font-size: 14px; }
.fp-deuda-pie { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--tx2); align-items: center; }
.fp-plegable summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.fp-plegable[open] summary { margin-bottom: 10px; }
.fp-card.fp-plegable { padding: 14px 20px; }

/* ---------- Avisos ---------- */
.fp-toast { display: flex; align-items: center; gap: 10px; background: #0F2A1E; color: #D1FADF; padding: 12px 16px; border-radius: 14px; font-weight: 500; animation: fp-in .3s ease; }
.fp-toast .fp-i { color: #6EE7B7; }
@keyframes fp-in { from { opacity: 0; transform: translateY(-6px); } }
.fp-aviso { background: var(--ambar-s); color: #8A5300; border: 1px solid #F8DDAA; border-radius: 14px; padding: 12px 16px; font-size: 14px; }
.fp-aviso-rojo { background: var(--rojo-s); color: var(--rojo); border-color: #F7C7C8; }

/* ---------- Formularios ---------- */
.fp-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.fp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fp-ancho { grid-column: 1 / -1; }
.fp-campo { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.fp-campo > span { font-size: 13px; font-weight: 600; color: var(--tx2); }
.fp-campo > small { font-size: 12px; color: var(--tx3); }
.fp-campo[hidden] { display: none; }
.fp-app input[type=text], .fp-app input[type=date], .fp-app input[type=number], .fp-app input[type=password], .fp-app input[type=search], .fp-app select, .fp-app textarea {
  width: 100%; border: 1px solid #D9DFEA; border-radius: 12px; padding: 11px 12px; font: inherit; color: var(--tx); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.fp-app input:focus, .fp-app select:focus, .fp-app textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(47,107,255,.12); }
.fp-din { display: flex; align-items: center; border: 1px solid #D9DFEA; border-radius: 12px; background: #fff; padding-left: 12px; }
.fp-din:focus-within { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(47,107,255,.12); }
.fp-din b { color: var(--tx3); font-weight: 600; }
.fp-din input { border: 0 !important; box-shadow: none !important; padding-left: 6px !important; font-variant-numeric: tabular-nums; font-weight: 600; }
.fp-din-pct { padding: 0 12px 0 0; } .fp-din-pct input { padding-left: 12px !important; }
.fp-check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--tx2); cursor: pointer; }
.fp-check input { width: 18px; height: 18px; accent-color: var(--azul); }
.fp-tipos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.fp-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.fp-tipo span { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1.5px solid var(--bd); border-radius: 14px; cursor: pointer; height: 100%; transition: all .15s; }
.fp-tipo b { font-size: 13.5px; } .fp-tipo small { font-size: 11.5px; color: var(--tx3); line-height: 1.3; }
.fp-tipo input:checked + span { border-color: var(--c); background: var(--cs); }
.fp-tipo input:checked + span b { color: var(--c); }
.fp-tipo input:focus-visible + span { box-shadow: 0 0 0 3px rgba(47,107,255,.25); }
.fp-tipo-ingreso { --c: var(--verde); --cs: var(--verde-s); }
.fp-tipo-egreso { --c: var(--rojo); --cs: var(--rojo-s); }
.fp-tipo-abono { --c: var(--morado); --cs: var(--morado-s); }
.fp-tipo-prestamo { --c: var(--ambar); --cs: var(--ambar-s); }
.fp-tipo-ahorro { --c: var(--cel); --cs: var(--cel-s); }
.fp-calc { background: #F7F9FD; border-radius: 12px; padding: 10px 14px; font-size: 14px; color: var(--tx2); }
.fp-calc b { color: var(--tx); }

/* ---------- Diálogos ---------- */
.fp-dlg { border: 0; border-radius: 22px; padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 40px); box-shadow: 0 24px 60px rgba(15,23,42,.3); color: var(--tx); font-family: inherit; }
.fp-dlg::backdrop { background: rgba(11,23,54,.45); backdrop-filter: blur(3px); }
.fp-dlg[open] { animation: fp-in .2s ease; }
.fp-dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--bd); position: sticky; top: 0; background: #fff; z-index: 1; }
.fp-dlg-head h3 { margin: 0; font-size: 18px; }
.fp-dlg-body { padding: 20px 22px 22px; }
.fp-dlg-pie { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bd); display: flex; justify-content: center; }
.fp-menu-mas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fp-menu-mas a { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--bd); border-radius: 14px; font-weight: 600; }

/* ---------- Login ---------- */
.fp-app-login { align-items: center; justify-content: center; padding: 20px; background: radial-gradient(90% 70% at 50% 0%, #1A3A8F 0%, #0B1736 70%); }
.fp-login { background: #fff; border-radius: 24px; padding: 34px 30px; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.fp-login h2 { margin: 4px 0 0; font-size: 24px; font-weight: 800; }
.fp-login p { margin: 0; }
.fp-login form { display: flex; flex-direction: column; gap: 14px; text-align: left; margin-top: 6px; }

/* ---------- Barra inferior (celular) ---------- */
.fp-tabbar { display: none; }

@media (max-width: 1100px) {
  .fp-hero { grid-template-columns: 1fr; }
  .fp-grid-2-1 { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .fp-side { display: none; }
  .fp-main { padding: 18px 14px 110px; gap: 16px; }
  .fp-grid-2 { grid-template-columns: 1fr; }
  .fp-head h1 { font-size: 24px; }
  .fp-head-acc .fp-btn:not(.fp-btn-sec) { display: none; }
  .fp-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--bd); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); z-index: 50; box-shadow: 0 -6px 20px rgba(15,23,42,.06); }
  .fp-tabbar a, .fp-tabbar > button:not(.fp-fab) { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--tx3); background: none; border: 0; padding: 6px 0; font-family: inherit; cursor: pointer; }
  .fp-tabbar .on { color: var(--azul); }
  .fp-fab { justify-self: center; width: 54px; height: 54px; border-radius: 18px; border: 0; background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center; margin-top: -22px; box-shadow: 0 10px 24px rgba(47,107,255,.45); cursor: pointer; }
  .fp-fab .fp-i { width: 26px; height: 26px; }
  .fp-hero { padding: 22px 20px; border-radius: 20px; }
  .fp-hero-main strong { font-size: 36px; }
  .fp-hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .fp-hero-grid > div { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; }
  .fp-hero-grid b { margin: 0; font-size: 17px; }
  .fp-deuda-total { grid-template-columns: 1fr; gap: 14px; }
  .fp-tipos { grid-template-columns: repeat(2, 1fr); }
  .fp-tipos label:last-child { grid-column: 1 / -1; }
  .fp-form-grid { grid-template-columns: 1fr; }
  .fp-buscar, .fp-buscar input { width: 100%; }
  .fp-toolbar { flex-direction: column; align-items: stretch; }
  .fp-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .fp-chips a { flex: none; }
  .fp-dlg { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .fp-tri b { font-size: 16px; }
  .fp-stat strong { font-size: 21px; }
  .fp-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fp-stat { padding: 12px 14px; }
}

.fp-atrasados { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--rojo-s); margin-bottom: 8px; }
.fp-atrasados > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.fp-atrasados small { color: var(--tx2); font-size: 13px; }
.fp-atrasados .fp-ico { background: #fff; font-weight: 800; }
.fp-chips a.fp-chip-alt { border-style: dashed; }
.fp-chips a.fp-chip-alt.on { border-style: solid; }
.fp-side { align-self: flex-start; }
.fp-grid-2-1 { align-items: start; } .fp-semaforo .fp-mini { margin-top: 8px; }

.fp-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.fp-zona-roja { border-color: #F7C7C8; }
.fp-check[hidden] { display: none; }
.fp-ajuste { color: var(--morado) !important; font-weight: 600; }
.fp-calc small { color: var(--tx3); }

.fp-seg { font-size: 13px; color: var(--tx2); display: inline-flex; gap: 4px; align-items: center; margin-top: 3px; white-space: normal; }
.fp-seg b { color: var(--azul); background: var(--azul-s); padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.fp-seg-viejo b { color: #B26A00; background: var(--ambar-s); }
.fp-seg-viejo { color: #B26A00; }
.fp-seg-vacio { color: var(--tx3); font-style: italic; }
.fp-seg-form { gap: 6px; }
.fp-seg-form input { width: 170px !important; padding: 7px 10px !important; font-size: 13px !important; }
@media (max-width: 960px) { .fp-card-lista .fp-fila:has(.fp-seg-form) { flex-wrap: wrap; } .fp-seg-form { width: 100%; } .fp-seg-form input { flex: 1; width: auto !important; } }

.fp-limite { display: flex; align-items: center; gap: 8px; background: #F7F9FD; border-radius: 12px; padding: 8px 12px; font-size: 13px; }
.fp-limite span { color: var(--tx2); } .fp-limite b { font-weight: 700; } .fp-limite em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--tx2); }
.fp-lim-cerca { background: var(--ambar-s); } .fp-lim-cerca em { color: #B26A00; }
.fp-lim-vencida { background: var(--rojo-s); } .fp-lim-vencida em { color: var(--rojo); }

.fp-hero-libre { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.3) !important; }
@media (max-width: 1280px) and (min-width: 961px) { .fp-hero-grid { grid-template-columns: repeat(2, 1fr); } }