@font-face { font-family: 'Sora'; font-weight: 300; font-display: swap; src: url(fonts/sora-300.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 400; font-display: swap; src: url(fonts/sora-400.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 600; font-display: swap; src: url(fonts/sora-600.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url(fonts/manrope-400.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url(fonts/manrope-500.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url(fonts/manrope-600.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url(fonts/manrope-700.woff2) format('woff2'); }

:root {
  --noche: #0B1C2C;
  --noche-2: #0F2438;
  --tinta: #10283B;
  --sup: rgba(243, 249, 253, .045);
  --sup-2: rgba(243, 249, 253, .075);
  --borde: rgba(243, 249, 253, .09);
  --borde-2: rgba(243, 249, 253, .16);
  --texto: #F3F9FD;
  --texto-2: #A9BCCB;
  --texto-3: #6F8597;
  --oro: #C9A24A;
  --oro-1: #B8903A;
  --oro-2: #E3C77E;
  --oro-grad: linear-gradient(135deg, #B8903A 0%, #E3C77E 55%, #C9A24A 100%);
  --celeste: #6EC1E8;
  --senal: #2E8FC4;
  --perla: #EDE6D6;
  --coral: #F0907F;
  --f1: #6EC1E8;
  --f2: #E3C77E;
  --f3: #EDE6D6;
  --display: 'Sora', system-ui, sans-serif;
  --cuerpo: 'Manrope', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --resorte: cubic-bezier(.34, 1.4, .5, 1);
  --radio: 22px;
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--noche); color: var(--texto); }
body {
  font: 500 15px/1.45 var(--cuerpo);
  min-height: 100dvh;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
input, textarea, select { -webkit-appearance: none; appearance: none; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.oculto { display: none !important; }

/* ---------- Fondo animado: resplandores + ondas de antena ---------- */
#fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#fondo::before, #fondo::after {
  content: ''; position: absolute; width: 120vmax; height: 120vmax; border-radius: 50%;
  filter: blur(10px); will-change: transform;
}
#fondo::before { left: -60vmax; top: -70vmax; background: radial-gradient(closest-side, rgba(201, 162, 74, .22), transparent 70%); animation: deriva 22s ease-in-out infinite alternate; }
#fondo::after { right: -70vmax; top: -50vmax; background: radial-gradient(closest-side, rgba(46, 143, 196, .26), transparent 70%); animation: deriva 26s ease-in-out infinite alternate-reverse; }
#fondo .ondas { position: absolute; left: 50%; top: calc(-180px + var(--sa-t)); width: 760px; height: 760px; transform: translateX(-50%); opacity: .5; }
#fondo .ondas circle { fill: none; stroke: rgba(110, 193, 232, .09); stroke-width: 1; transform-origin: 380px 380px; animation: onda 9s linear infinite; }
#fondo .ondas circle:nth-child(2) { animation-delay: -3s; }
#fondo .ondas circle:nth-child(3) { animation-delay: -6s; }
@keyframes deriva { to { transform: translate(8vmax, 6vmax) scale(1.08); } }
@keyframes onda { from { transform: scale(.25); opacity: 0; } 15% { opacity: 1; } to { transform: scale(1); opacity: 0; } }

#app { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; min-height: 100dvh; }

/* ---------- Isotipo ---------- */
.iso { display: block; overflow: visible; }
.iso .a, .iso .barra { fill: none; stroke: url(#gOro); stroke-linecap: round; stroke-linejoin: round; }
.iso .punto { fill: var(--senal); }
.iso .o1, .iso .o2 { fill: none; stroke: var(--celeste); stroke-linecap: round; }
.iso .o2 { opacity: .55; }
.iso.dibuja .a { stroke-dasharray: 70; stroke-dashoffset: 70; animation: trazo .9s var(--ease) .1s forwards; }
.iso.dibuja .barra { stroke-dasharray: 16; stroke-dashoffset: 16; animation: trazo .5s var(--ease) .65s forwards; }
.iso.dibuja .punto { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: pop .5s var(--resorte) .85s forwards; }
.iso.dibuja .o1, .iso.dibuja .o2 { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: emite 1.6s var(--ease) 1.05s infinite; }
.iso.dibuja .o2 { animation-delay: 1.25s; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
@keyframes pop { to { transform: scale(1); } }
@keyframes emite { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }

.marca-nombre { font: 300 13px/1 var(--display); letter-spacing: .4em; margin-right: -.4em; text-transform: uppercase; }

/* ---------- Pantalla de carga y de clave ---------- */
.inicio-app { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 24px 16px calc(24px + var(--sa-b)); }
.inicio-app .iso { width: 92px; height: 92px; margin: 0 auto 22px; }
.inicio-app .marca-nombre { font-size: 22px; display: block; }
.inicio-app .sub { margin: 12px 0 0; color: var(--texto-2); font-size: 14px; letter-spacing: .02em; }
.entrar { width: min(340px, 100%); margin-top: 34px; display: grid; gap: 12px; }
.entrar input {
  height: 54px; border-radius: 16px; border: 1px solid var(--borde-2); background: var(--sup);
  padding: 0 18px; font-size: 17px; text-align: center; outline: none; transition: border-color .2s, background .2s;
}
.entrar input:focus { border-color: var(--oro); background: var(--sup-2); }
.entrar .error { color: var(--coral); font-size: 14px; min-height: 20px; margin: 0; }
.sacude { animation: sacude .45s var(--ease); }
@keyframes sacude { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- Botones ---------- */
.btn-oro {
  height: 54px; border-radius: 16px; background: var(--oro-grad); color: #20180a; font: 700 16px/1 var(--cuerpo);
  letter-spacing: .01em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  box-shadow: 0 12px 30px -12px rgba(201, 162, 74, .65), inset 0 1px 0 rgba(255, 255, 255, .45);
  position: relative; overflow: hidden; transition: transform .15s var(--ease), filter .2s;
}
.btn-oro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: brillo 3.6s ease-in-out 1.2s infinite; }
@keyframes brillo { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn-oro:active, .btn-sec:active, .chip:active, .pulsable:active { transform: scale(.97); }
.btn-oro[disabled] { filter: grayscale(.6) brightness(.7); }
.btn-sec {
  height: 48px; border-radius: 14px; border: 1px solid var(--borde-2); background: var(--sup);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; font-weight: 600; transition: transform .15s var(--ease);
}
.btn-sec.peligro { color: var(--coral); border-color: rgba(240, 144, 127, .35); }
.btn-txt { color: var(--oro-2); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.fila-btns { display: flex; gap: 10px; }
.fila-btns > * { flex: 1; }

/* ---------- Encabezado ---------- */
.cab { position: sticky; top: 0; z-index: 5; padding: calc(10px + var(--sa-t)) 16px 6px; background: rgba(11, 28, 44, .82); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid transparent; transition: border-color .3s; }
.cab.bajo { border-bottom-color: var(--borde); }
.cab-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; }
.marca { display: flex; align-items: center; gap: 9px; }
.marca .iso { width: 26px; height: 26px; }
.sinc { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); margin-left: 2px; transition: background .3s; }
.sinc.ok { background: #6EE8B4; box-shadow: 0 0 10px rgba(110, 232, 180, .7); }
.sinc.cola { background: var(--oro-2); animation: titila 1.2s ease-in-out infinite; }
.sinc.off { background: var(--coral); }
@keyframes titila { 50% { opacity: .35; } }
.libros { position: relative; display: flex; background: var(--sup); border: 1px solid var(--borde); border-radius: 999px; padding: 3px; }
.libros button { position: relative; z-index: 1; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--texto-2); transition: color .25s; }
.libros button.activo { color: #20180a; }
.libros .pildora { position: absolute; z-index: 0; top: 3px; bottom: 3px; border-radius: 999px; background: var(--oro-grad); transition: left .35s var(--resorte), width .35s var(--resorte); box-shadow: 0 6px 16px -6px rgba(201, 162, 74, .7); }
.mesnav { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.mesnav button.flecha { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--texto-2); }
.mesnav button.flecha:disabled { opacity: .25; }
.mesnav .mes { font: 600 17px/1 var(--display); display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; }
.mesnav .mes svg { width: 16px; height: 16px; color: var(--oro-2); }

/* ---------- Vistas ---------- */
.vista { padding: 4px 16px calc(120px + var(--sa-b)); }
.entra > * { opacity: 0; animation: subir .55s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.titulo-seccion { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 2px 10px; }
.titulo-seccion h2 { margin: 0; font: 600 16px/1.2 var(--display); }
.eti { color: var(--texto-2); font-size: 13px; margin: 0; letter-spacing: .01em; }

.heroe { text-align: center; padding: 18px 0 6px; }
.heroe .grande { font: 600 44px/1.05 var(--display); margin: 6px 0 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.heroe .grande .cent { font-size: .55em; color: var(--texto-2); margin-left: 1px; }
.heroe .grande.neg { color: var(--coral); }
.resumen-mes { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--sup); border: 1px solid var(--borde); font-size: 13px; font-weight: 600; }
.pill svg { width: 15px; height: 15px; }
.pill.sube { color: var(--celeste); }
.pill.baja { color: var(--texto-2); }
.curva { display: block; width: 100%; height: 70px; margin-top: 8px; overflow: visible; }
.curva .linea { fill: none; stroke: url(#gOroH); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--largo); stroke-dashoffset: var(--largo); animation: trazo 1.6s var(--ease) .25s forwards; }
.curva .area { fill: url(#gArea); opacity: 0; animation: aparece 1.2s ease .9s forwards; }
.curva .punto-fin { fill: var(--oro-2); opacity: 0; animation: aparece .4s ease 1.7s forwards; filter: drop-shadow(0 0 6px rgba(227, 199, 126, .9)); }
@keyframes aparece { to { opacity: 1; } }

.fondos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.fondo {
  position: relative; padding: 13px 11px 10px; border-radius: 18px; background: var(--sup); border: 1px solid var(--borde);
  overflow: hidden; text-align: left; min-width: 0;
}
.fondo::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c); opacity: .9; }
.fondo .nom { font-size: 12px; color: var(--texto-2); display: flex; justify-content: space-between; gap: 4px; white-space: nowrap; }
.fondo .nom span { overflow: hidden; text-overflow: ellipsis; }
.fondo .nom b { color: var(--c); font-weight: 700; }
.fondo .val { font: 600 16.5px/1.2 var(--display); margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; }
.fondo .val.neg { color: var(--coral); }
.fondo .mov { font-size: 11.5px; color: var(--texto-3); margin-top: 2px; white-space: nowrap; }
.fondo svg.mini { display: block; width: 100%; height: 26px; margin-top: 6px; overflow: visible; }
.fondo svg.mini path { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--largo); stroke-dashoffset: var(--largo); animation: trazo 1.3s var(--ease) .5s forwards; }

.tarjeta { margin-top: 12px; padding: 16px; border-radius: var(--radio); background: var(--sup); border: 1px solid var(--borde); }
.tarjeta.pulsable { display: block; width: 100%; text-align: left; transition: transform .15s var(--ease), background .2s; }
.tarjeta .cab-tarjeta { display: flex; align-items: center; gap: 12px; }
.tarjeta .cab-tarjeta .ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(110, 193, 232, .1); color: var(--celeste); }
.tarjeta .cab-tarjeta .ic.oro { background: rgba(227, 199, 126, .12); color: var(--oro-2); }
.tarjeta h3 { margin: 0; font: 600 15px/1.25 var(--display); }
.tarjeta .sub { margin: 2px 0 0; color: var(--texto-2); font-size: 13px; }
.tarjeta .der { margin-left: auto; text-align: right; }
.ok-txt { color: #6EE8B4; }
.aviso-txt { color: var(--oro-2); }
.neg { color: var(--coral); }
.barra-prog { height: 8px; border-radius: 999px; background: rgba(243, 249, 253, .07); overflow: hidden; margin-top: 12px; }
.barra-prog i { display: block; height: 100%; border-radius: inherit; background: var(--oro-grad); width: 0; transition: width 1.1s var(--ease) .2s; }
.barra-prog i.pasado { background: linear-gradient(90deg, var(--oro-1), var(--coral)); }
.apartados { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.apartados::-webkit-scrollbar { display: none; }
.apartado { flex: none; padding: 12px 14px; border-radius: 16px; background: var(--sup); border: 1px solid var(--borde); min-width: 120px; }
.apartado .n { font-size: 12.5px; color: var(--texto-2); }
.apartado .v { font: 600 17px/1.2 var(--display); margin-top: 3px; }
.cita { margin-top: 12px; padding: 16px 18px; border-radius: var(--radio); background: linear-gradient(135deg, rgba(227, 199, 126, .1), rgba(110, 193, 232, .06)); border: 1px solid rgba(227, 199, 126, .2); font-style: italic; color: var(--texto); }
.cita::before { content: '“'; font: 600 30px/0 var(--display); color: var(--oro-2); vertical-align: -12px; margin-right: 4px; font-style: normal; }

/* ---------- Lista de movimientos ---------- */
.dia { margin: 20px 4px 6px; font-size: 12.5px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .08em; display: flex; justify-content: space-between; }
.lista { border-radius: var(--radio); background: var(--sup); border: 1px solid var(--borde); overflow: hidden; }
.fila { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; position: relative; transition: background .2s; }
.fila + .fila::before { content: ''; position: absolute; left: 66px; right: 0; top: 0; height: 1px; background: var(--borde); }
.fila:active { background: var(--sup-2); }
.avatar { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; background: rgba(110, 193, 232, .1); color: var(--celeste); font: 600 16px/1 var(--display); }
.avatar svg { width: 20px; height: 20px; }
.avatar.ing { background: var(--oro-grad); color: #20180a; box-shadow: 0 6px 16px -8px rgba(201, 162, 74, .8); }
.avatar.aj { background: rgba(243, 249, 253, .07); color: var(--texto-2); }
.fila .txt { min-width: 0; flex: 1; }
.fila .t1 { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .t2 { font-size: 12.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.fila .monto { font: 600 15.5px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila .monto.ing { color: var(--celeste); }
.fila .clip { width: 14px; height: 14px; color: var(--oro-2); vertical-align: -2px; margin-left: 4px; }
.puntos-fondo { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: 1px; }
.puntos-fondo i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.vacio { text-align: center; color: var(--texto-3); padding: 40px 16px; }
.vacio .iso { width: 54px; height: 54px; margin: 0 auto 12px; opacity: .7; }

.filtros { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 0; padding: 0 16px; }
.filtros::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--sup); border: 1px solid var(--borde);
  font-size: 13.5px; font-weight: 600; color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; transition: all .2s var(--ease);
}
.chip svg { width: 16px; height: 16px; }
.chip.activo { background: rgba(227, 199, 126, .14); border-color: rgba(227, 199, 126, .55); color: var(--oro-2); }
.chip.c-f1.activo { background: rgba(110, 193, 232, .14); border-color: rgba(110, 193, 232, .55); color: var(--celeste); }
.chip.c-f3.activo { background: rgba(237, 230, 214, .12); border-color: rgba(237, 230, 214, .45); color: var(--perla); }
.buscador { margin-top: 12px; position: relative; }
.buscador input { width: 100%; height: 44px; border-radius: 14px; border: 1px solid var(--borde); background: var(--sup); padding: 0 14px 0 42px; outline: none; }
.buscador svg { position: absolute; left: 13px; top: 11px; width: 20px; height: 20px; color: var(--texto-3); }

.tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tira > div { padding: 12px; border-radius: 16px; background: var(--sup); border: 1px solid var(--borde); }
.tira .v { font: 600 16px/1.2 var(--display); margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Año ---------- */
.grafico { margin-top: 12px; padding: 16px 10px 10px; border-radius: var(--radio); background: var(--sup); border: 1px solid var(--borde); }
.grafico svg { display: block; width: 100%; height: 190px; overflow: visible; }
.grafico .b-gan { fill: url(#gOroV); }
.grafico .b-gas { fill: rgba(110, 193, 232, .35); }
.grafico .barra { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: crece .9s var(--ease) forwards; }
.grafico text { fill: var(--texto-3); font: 600 10px var(--cuerpo); text-anchor: middle; }
.grafico .actual { fill: var(--oro-2); }
@keyframes crece { to { transform: scaleY(1); } }
.leyenda { display: flex; gap: 14px; justify-content: center; font-size: 12px; color: var(--texto-2); margin-top: 8px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ranking .item { padding: 10px 2px; }
.ranking .item + .item { border-top: 1px solid var(--borde); }
.ranking .fila-r { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.ranking .fila-r b { font: 600 14px var(--display); font-variant-numeric: tabular-nums; }
.ranking .barra-prog { height: 6px; margin-top: 7px; }
.ranking .barra-prog i.cel { background: linear-gradient(90deg, var(--senal), var(--celeste)); }

/* ---------- Más ---------- */
.mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.mosaico button { padding: 16px; border-radius: var(--radio); background: var(--sup); border: 1px solid var(--borde); text-align: left; min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .15s var(--ease); }
.mosaico button:active { transform: scale(.97); }
.mosaico .ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(227, 199, 126, .12); color: var(--oro-2); }
.mosaico b { display: block; font: 600 15px/1.2 var(--display); margin-top: 14px; }
.mosaico span { font-size: 12.5px; color: var(--texto-3); }

/* ---------- Barra inferior ---------- */
.nav {
  position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--sa-b)); width: min(calc(100% - 24px), 520px);
  height: 68px; border-radius: 24px; display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr; align-items: center;
  background: rgba(15, 36, 56, .78); border: 1px solid var(--borde-2); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7);
}
.nav button { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--texto-3); transition: color .25s; }
.nav button svg { width: 23px; height: 23px; transition: transform .35s var(--resorte); }
.nav button.activo { color: var(--oro-2); }
.nav button.activo svg { transform: translateY(-1px) scale(1.08); }
.nav .mas-centro { position: relative; height: 100%; display: grid; place-items: center; }
.nav .fab {
  width: 62px; height: 62px; flex: none; border-radius: 22px; margin: -30px auto 0; display: grid; place-items: center; color: #20180a;
  background: var(--oro-grad); box-shadow: 0 14px 30px -10px rgba(201, 162, 74, .85), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .3s var(--resorte); position: relative;
}
.nav .fab svg { width: 28px; height: 28px; stroke-width: 2.2; transition: transform .35s var(--resorte); }
.fab:active { transform: scale(.92); }
.fab.abierto svg { transform: rotate(45deg); }
.fab::before, .fab::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid rgba(227, 199, 126, .7); animation: pulso 3.2s var(--ease) infinite; pointer-events: none; }
.fab::after { animation-delay: 1.6s; }
@keyframes pulso { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* ---------- Hojas (paneles que suben) ---------- */
.capa { position: fixed; inset: 0; z-index: 40; background: rgba(4, 12, 20, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; }
.capa.visible { opacity: 1; }
.hoja {
  position: fixed; z-index: 41; left: 50%; bottom: 0; width: min(100%, 560px); max-height: calc(100dvh - 40px - var(--sa-t));
  transform: translate(-50%, 105%); transition: transform .42s var(--ease);
  background: linear-gradient(180deg, #13304A 0%, #0E2438 30%, #0C1F31 100%); border: 1px solid var(--borde-2); border-bottom: 0;
  border-radius: 28px 28px 0 0; display: flex; flex-direction: column; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .8);
}
.hoja.visible { transform: translate(-50%, 0); }
.hoja.alta { height: calc(100dvh - 40px - var(--sa-t)); }
.hoja .asa { flex: none; height: 26px; display: grid; place-items: center; touch-action: none; }
.hoja .asa::before { content: ''; width: 40px; height: 5px; border-radius: 9px; background: var(--borde-2); }
.hoja .cab-hoja { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; }
.hoja .cab-hoja h2 { margin: 0; font: 600 19px/1.2 var(--display); }
.hoja .cerrar { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--sup); color: var(--texto-2); }
.hoja .cuerpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(24px + var(--sa-b)); overscroll-behavior: contain; }

/* Elegir qué agregar */
.opciones { display: grid; gap: 10px; }
.opcion { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: var(--sup); border: 1px solid var(--borde); text-align: left; transition: transform .15s var(--ease); }
.opcion:active { transform: scale(.98); }
.opcion .ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: rgba(110, 193, 232, .1); color: var(--celeste); flex: none; }
.opcion .ic svg { width: 24px; height: 24px; }
.opcion b { display: block; font: 600 16px/1.2 var(--display); }
.opcion span { font-size: 13px; color: var(--texto-2); }
.opcion.estrella { background: linear-gradient(135deg, rgba(227, 199, 126, .16), rgba(110, 193, 232, .08)); border-color: rgba(227, 199, 126, .4); }
.opcion.estrella .ic { background: var(--oro-grad); color: #20180a; }
.opciones-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.opciones-mini .opcion { padding: 12px; }
.opciones-mini .opcion .ic { width: 38px; height: 38px; border-radius: 12px; }

/* Formulario */
.tipos { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--sup); border: 1px solid var(--borde); border-radius: 14px; padding: 3px; position: relative; }
.tipos button { height: 36px; border-radius: 11px; font-size: 13px; font-weight: 700; color: var(--texto-2); position: relative; z-index: 1; transition: color .25s; }
.tipos button.activo { color: #20180a; }
.tipos .pildora { position: absolute; top: 3px; bottom: 3px; width: calc((100% - 6px) / 4); border-radius: 11px; background: var(--oro-grad); transition: transform .35s var(--resorte); }
.campo-monto { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 22px 0 4px; }
.campo-monto .moneda { font: 600 22px/1 var(--display); color: var(--oro-2); height: 40px; min-width: 40px; padding: 0 10px; border-radius: 12px; background: rgba(227, 199, 126, .1); border: 1px solid rgba(227, 199, 126, .3); }
.campo-monto input { width: 100%; max-width: 260px; text-align: center; background: none; border: 0; outline: none; font: 600 46px/1.1 var(--display); letter-spacing: -.02em; caret-color: var(--oro-2); padding: 0; }
.campo-monto input::placeholder { color: rgba(243, 249, 253, .22); }
.conv { text-align: center; font-size: 13px; color: var(--texto-2); margin: 0; min-height: 19px; }
.campo { margin-top: 18px; }
.campo > label, .campo > .lbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .08em; margin: 0 2px 8px; }
.campo input[type=text], .campo input[type=date], .campo input[type=number], .campo input:not([type]), .campo textarea, .campo select {
  width: 100%; height: 50px; border-radius: 14px; border: 1px solid var(--borde); background: var(--sup); padding: 0 14px; outline: none; transition: border-color .2s;
}
.campo textarea { height: 84px; padding: 12px 14px; resize: none; }
.campo input:focus, .campo textarea:focus { border-color: rgba(227, 199, 126, .6); }
.campo input[type=date] { color-scheme: dark; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips + input { margin-top: 8px; }
.reparto { margin-top: 2px; }
.reparto .barras { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; }
.reparto .barras i { display: block; height: 100%; background: var(--c); transition: flex-grow .5s var(--ease); }
.reparto .partes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.reparto .partes div { font-size: 12px; color: var(--texto-2); }
.reparto .partes b { display: block; font: 600 15px/1.2 var(--display); color: var(--texto); font-variant-numeric: tabular-nums; }
.reparto .partes i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; }
.form-pie { position: sticky; bottom: calc(-24px - var(--sa-b)); margin: 22px -16px calc(-24px - var(--sa-b)); padding: 12px 16px calc(16px + var(--sa-b)); background: linear-gradient(rgba(12, 31, 49, 0), #0C1F31 30%); }

/* Detalle */
.detalle-monto { text-align: center; padding: 6px 0 4px; }
.detalle-monto .grande { font: 600 40px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.detalle-monto .grande.ing { color: var(--celeste); }
.datos { margin-top: 16px; border-radius: 18px; background: var(--sup); border: 1px solid var(--borde); }
.datos > div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 14px; font-size: 14px; }
.datos > div + div { border-top: 1px solid var(--borde); }
.datos span { color: var(--texto-3); flex: none; }
.datos b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.comprobante { margin-top: 14px; border-radius: 18px; overflow: hidden; border: 1px solid var(--borde); background: var(--sup); min-height: 80px; display: grid; place-items: center; color: var(--texto-3); font-size: 13px; }
.comprobante img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #000; }
.etiqueta { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--sup-2); color: var(--texto-2); }

/* Foto: lectura con IA */
.escaner { position: relative; margin: 6px auto 0; width: min(260px, 70%); aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; border: 1px solid rgba(227, 199, 126, .4); background: #000; }
.escaner img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.escaner::after { content: ''; position: absolute; left: 0; right: 0; height: 34%; top: -34%; background: linear-gradient(180deg, transparent, rgba(110, 193, 232, .28) 70%, rgba(227, 199, 126, .9) 98%, transparent); animation: escanea 1.8s var(--ease) infinite; }
.escaner .marco { position: absolute; inset: 12px; border-radius: 14px; border: 1px dashed rgba(243, 249, 253, .35); }
@keyframes escanea { to { top: 100%; } }
.leyendo { text-align: center; margin-top: 18px; }
.leyendo .iso { width: 40px; height: 40px; margin: 0 auto 8px; }
.leyendo p { margin: 0; color: var(--texto-2); }
.exito { text-align: center; padding-top: 4px; }
.exito .sello { width: 86px; height: 86px; margin: 0 auto; position: relative; }
.exito .sello svg { width: 86px; height: 86px; }
.exito .sello .anillo { fill: none; stroke: url(#gOroBB); stroke-width: 3; stroke-dasharray: 260; stroke-dashoffset: 260; animation: trazo .8s var(--ease) forwards; }
.exito .sello .palomita { fill: none; stroke: var(--oro-2); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: trazo .45s var(--ease) .55s forwards; }
.exito .sello::before, .exito .sello::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(110, 193, 232, .6); animation: pulso 1.6s var(--ease) .7s 2 both; }
.exito .sello::after { animation-delay: 1s; }
.exito h3 { margin: 14px 0 0; font: 600 20px/1.2 var(--display); }
.exito .monto-ok { font: 600 34px/1.2 var(--display); margin-top: 6px; }
.exito .monto-ok.ing { color: var(--celeste); }
.exito p { color: var(--texto-2); margin: 4px 0 0; }

/* Billeteras, fijos, cripto */
.editable { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.editable + .editable { border-top: 1px solid var(--borde); }
.editable .nombre { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-weight: 600; padding: 6px 0; }
.editable .valor { width: 110px; height: 40px; border-radius: 12px; border: 1px solid var(--borde); background: rgba(0, 0, 0, .12); text-align: right; padding: 0 12px; outline: none; font: 600 15px var(--display); font-variant-numeric: tabular-nums; }
.editable .valor:focus { border-color: rgba(227, 199, 126, .6); }
.editable .quitar { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--texto-3); }
.editable .quitar svg { width: 18px; height: 18px; }
.total-fila { display: flex; justify-content: space-between; padding: 14px 14px; border-top: 1px solid var(--borde-2); font-weight: 700; }
.total-fila b { font: 600 17px var(--display); }
.cuadre { margin-top: 14px; padding: 16px; border-radius: 18px; text-align: center; background: var(--sup); border: 1px solid var(--borde); }
.cuadre .grande { font: 600 26px/1.2 var(--display); margin: 4px 0; }
.fijo { padding: 12px 14px; }
.fijo + .fijo { border-top: 1px solid var(--borde); }
.fijo .arriba { display: flex; align-items: center; gap: 10px; }
.fijo .arriba .t { flex: 1; min-width: 0; font-weight: 600; }
.fijo .arriba .t small { display: block; color: var(--texto-3); font-weight: 500; font-size: 12.5px; }
.fijo .marca-ok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--borde-2); color: transparent; flex: none; }
.fijo .marca-ok.si { background: var(--oro-grad); border-color: transparent; color: #20180a; }
.fijo .marca-ok svg { width: 15px; height: 15px; stroke-width: 2.6; }
.fijo .barra-prog { height: 5px; margin-top: 8px; }
.cripto-item { padding: 14px; }
.cripto-item + .cripto-item { border-top: 1px solid var(--borde); }
.cripto-item .arriba { display: flex; align-items: center; gap: 12px; }
.cripto-item .sim { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(227, 199, 126, .12); color: var(--oro-2); font: 600 11px var(--display); letter-spacing: .02em; flex: none; }
.cripto-item .pl { font: 600 15px var(--display); text-align: right; }
.cripto-item .pl small { display: block; font: 500 12px var(--cuerpo); color: var(--texto-3); }
.sube-txt { color: #6EE8B4; }

/* Aviso inferior */
.aviso {
  position: fixed; z-index: 60; left: 50%; bottom: calc(92px + var(--sa-b)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  width: min(calc(100% - 32px), 480px); padding: 12px 12px 12px 16px; border-radius: 18px; display: flex; align-items: center; gap: 12px;
  background: rgba(19, 48, 74, .96); border: 1px solid var(--borde-2); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .8);
  transition: transform .35s var(--resorte), opacity .25s;
}
.aviso.visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.aviso p { margin: 0; flex: 1; font-size: 14px; font-weight: 600; }
.aviso button { height: 36px; padding: 0 14px; border-radius: 12px; background: rgba(227, 199, 126, .15); color: var(--oro-2); font-weight: 700; font-size: 13.5px; }

.instalar-pasos { counter-reset: paso; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.instalar-pasos li { counter-increment: paso; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--sup); border: 1px solid var(--borde); }
.instalar-pasos li::before { content: counter(paso); width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--oro-grad); color: #20180a; font: 700 14px var(--display); }
.instalar-pasos svg { width: 18px; height: 18px; vertical-align: -3px; color: var(--celeste); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (min-width: 600px) {
  .hoja { border-radius: 28px; bottom: 24px; border-bottom: 1px solid var(--borde-2); }
}