/* ═══════════════════════════════════════════════════════════════════════════ v8.css ── El rediseño «experiencia de app» de FinanzasPro. Va después de app.css y manda sobre él. Trae la capa que pedía el kit de NEOBEAT —tarjetas bancarias, barra flotante con joroba, pantalla de éxito, splash, bloqueo— pero con la identidad verde de esta app, no el azul/dorado de aquella. Lo que aquí no se toca sigue igual que en app.css. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · fundamentos de teléfono ─────────────────────────────────────────── */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{-webkit-tap-highlight-color:transparent} button,nav,[role="button"],.tabbar,.bcard{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* Nada se corre hacia los lados en el celular: el contenedor corta lo que sobre y las grillas no pueden crecer más que su celda. */ .main,.view{min-width:0;overflow-x:hidden} .view > *{min-width:0} /* iPhone hace zoom al tocar un campo con letra menor de 16 px, y luego hay que encajar la pantalla con dos dedos. En pantallas chicas todo campo va a 16 px. */ @media (max-width:767px){ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select,textarea{font-size:16px} .amount-in{font-size:34px} } /* entrada suave de cada vista */ @keyframes v8-aparece{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .view > *{animation:v8-aparece .22s ease-out both} .view > *:nth-child(2){animation-delay:.03s} .view > *:nth-child(3){animation-delay:.06s} .view > *:nth-child(4){animation-delay:.09s} .view > *:nth-child(n+5){animation-delay:.12s} h1,h2,h3{letter-spacing:-.02em} input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{ outline:2px solid var(--brand-vivid);outline-offset:1px} @media (prefers-reduced-motion:reduce){ *:not(.exito):not(.exito *),*:not(.exito):not(.exito *)::before,*:not(.exito):not(.exito *)::after{ animation:none!important;transition:none!important} } /* ── 2 · tarjeta bancaria ────────────────────────────────────────────────── */ .bcard{ position:relative;display:flex;flex-direction:column;width:100%;min-height:176px; padding:18px 20px 16px;border-radius:22px;overflow:hidden;text-align:left;color:#fff; background:var(--bc-fondo); box-shadow:0 10px 24px -10px rgba(10,20,40,.55); transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s; -webkit-font-smoothing:antialiased} .bcard:active{transform:scale(.985)} @media (hover:hover){ .bcard:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(10,20,40,.6)} } .bcard.compacta{min-height:148px;padding:15px 18px 13px} .bcard.activa{outline:3px solid var(--text);outline-offset:0; box-shadow:inset 0 0 0 3px #fff,0 10px 24px -10px rgba(10,20,40,.55)} .bc-arc{position:absolute;left:-56px;bottom:-96px;width:192px;height:192px;border-radius:50%; border:26px solid rgba(255,255,255,.07);pointer-events:none} .bc-ring{position:absolute;inset:0;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);pointer-events:none} .bc-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .bc-nm{min-width:0;padding-top:2px} .bc-name{font-size:17px;font-weight:750;letter-spacing:-.01em;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:calc(100% - 16px);display:inline-block;vertical-align:middle} .bc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bc-punto); margin-left:8px;vertical-align:middle;flex:0 0 auto} .bc-tag{display:block;margin-top:3px;font-size:10.5px;font-weight:650;letter-spacing:.08em; text-transform:uppercase;color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bc-chip{width:40px;height:32px;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))} .bc-badges{position:relative;display:flex;justify-content:flex-end;min-height:26px;margin-top:4px} .bc-badge{align-self:center;white-space:nowrap;border-radius:99px;background:#fff;color:var(--bc-tinta); padding:5px 10px;font-size:11px;font-weight:650;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.15)} .bc-amt{position:relative;margin-top:auto;padding-top:14px;font-size:28px;font-weight:800;line-height:1; letter-spacing:-.02em;white-space:nowrap} .bcard.compacta .bc-amt{font-size:25px;padding-top:10px} .bc-amt.tach{text-decoration:line-through;opacity:.7} .bc-foot{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:14px; margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.85);white-space:nowrap} .bc-foot span{display:inline-flex;gap:4px} .bc-pie{color:rgba(255,255,255,.7);overflow:hidden;text-overflow:ellipsis} .bcard .money{color:inherit} /* fila deslizable: en el teléfono una tarjeta y un poco de la siguiente */ .bc-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory; margin:0 -16px 14px;padding:4px 16px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .bc-row::-webkit-scrollbar{display:none} .bc-cell{flex:0 0 86%;max-width:380px;scroll-snap-align:center} .bc-cell:only-child{flex-basis:100%;max-width:none} @media (min-width:768px){ .bc-row{display:grid;grid-template-columns:repeat(var(--bc-cols,2),minmax(0,1fr));gap:16px; margin:0 0 14px;padding:0;overflow:visible} .bc-cell{flex:none;max-width:none} .bcard{min-height:196px;padding:22px 24px 18px} .bc-name{font-size:18px} .bc-amt{font-size:30px} } /* lista vertical de tarjetas (Cuentas): una debajo de otra, con aire */ .bc-stack{display:grid;gap:12px;margin-bottom:16px} @media (min-width:768px){ .bc-stack{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} } @media (min-width:1280px){ .bc-stack{grid-template-columns:repeat(3,minmax(0,1fr))} } /* la última tarjeta del carrusel: ir a todas las cuentas */ .bcard.bc-mas{align-items:center;justify-content:center;text-align:center;gap:6px;color:var(--text); background:color-mix(in srgb,var(--surface) 70%,transparent); border:1.5px dashed color-mix(in srgb,var(--screen-ink) 45%,transparent);box-shadow:none} .bc-mas-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px; background:color-mix(in srgb,var(--screen) 16%,transparent);color:var(--screen-ink)} .bcard.bc-mas b{font-size:15px;font-weight:750} .bcard.bc-mas small{font-size:12px;color:var(--muted)} /* ── 3 · barra inferior flotante con joroba ──────────────────────────────── */ .tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:30;pointer-events:none; display:block;padding:0 12px calc(8px + env(safe-area-inset-bottom)); background:none;border:0;box-shadow:none;border-radius:0} .tb-shell{position:relative;max-width:480px;margin:0 auto;pointer-events:auto; filter:drop-shadow(0 8px 18px color-mix(in srgb,var(--brand-deep) 16%,transparent)) drop-shadow(0 1px 2px color-mix(in srgb,var(--brand-deep) 10%,transparent))} [data-theme="dark"] .tb-shell{filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.4))} .tb-fondo{position:absolute;inset:auto 0 0 0;display:flex;align-items:flex-end;height:80px} .tb-ala{flex:1;height:64px;background:var(--surface)} .tb-ala:first-child{border-radius:32px 0 0 32px} .tb-ala:last-child{border-radius:0 32px 32px 0} .tb-joroba{display:block;flex:0 0 auto;margin:0 -1px;fill:var(--surface)} .tb-fila{position:relative;display:flex;align-items:flex-end;height:80px} .tb-lado{flex:1;display:flex;min-width:0} .tb-hueco{flex:0 0 128px} .tabbar .tb{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center; height:64px;padding:6px 0 0;gap:2px;position:relative;transition:transform .15s} .tabbar .tb:active{transform:scale(.9)} .tb-bubble{width:auto;height:auto;background:none!important;transform:none!important;box-shadow:none; color:var(--muted);display:grid;place-items:center;transition:color .2s} .tb.on .tb-bubble{color:var(--text)} .tb-lb{font-size:9.5px;font-weight:650;color:var(--muted);line-height:1;transition:color .2s} .tb.on .tb-lb{color:var(--text)} .tb-punto{width:4px;height:4px;border-radius:50%;background:transparent;margin-top:3px;transition:background .2s} .tb.on .tb-punto{background:var(--brand-vivid)} .tb.pop .tb-bubble{animation:none} .tb.pop .tb-bubble::after{content:none} /* el «+» en la joroba */ .tabbar .fab{position:absolute;left:50%;top:2px;transform:translateX(-50%);flex:none; display:flex;flex-direction:column;align-items:center;gap:3px;margin:0;padding:0;transition:transform .15s} .tabbar .fab:active{transform:translateX(-50%) scale(.94)} .tabbar .fab::after{content:none} .fab-anillo{position:absolute;top:-7px;left:50%;width:72px;height:72px;margin-left:-36px;border-radius:50%; border:2px dotted color-mix(in srgb,var(--brand-vivid) 55%,transparent);pointer-events:none} .tabbar .fab i{ position:relative;width:58px;height:58px;margin:0;border-radius:50%;overflow:visible;color:#fff; display:grid;place-items:center; background:radial-gradient(120% 120% at 32% 22%,var(--brand-light) 0%,var(--brand-vivid) 48%,color-mix(in srgb,var(--brand-vivid) 60%,#000) 100%); box-shadow:0 8px 20px -4px color-mix(in srgb,var(--brand-deep) 50%,transparent),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -10px 16px -10px rgba(0,0,0,.4)} .tabbar .fab i::before,.tabbar .fab i::after{content:none} .fab-coins{display:none} .fab-lb{font-size:9.5px;font-weight:700;color:var(--brand)} .view{padding-bottom:124px} @media (min-width:1024px){ .tabbar{display:none} .view{padding-bottom:60px} } /* ── 4 · pantalla de éxito ───────────────────────────────────────────────── */ @keyframes ex-fondo{from{opacity:0}to{opacity:1}} @keyframes ex-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}} @keyframes ex-onda{from{transform:scale(.6);opacity:.55}to{transform:scale(2.2);opacity:0}} @keyframes ex-trazo{to{stroke-dashoffset:0}} @keyframes ex-sube{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}} @keyframes ex-barra{from{transform:scaleX(1)}to{transform:scaleX(0)}} @keyframes ex-cae{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(110vh) rotate(540deg);opacity:0}} @keyframes ex-apila{from{transform:translateY(-120px) rotate(-8deg);opacity:0}to{transform:none;opacity:1}} @keyframes ex-sale{to{opacity:0;transform:scale(1.02)}} body.con-exito{overflow:hidden} .exito{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;overflow:hidden;color:#fff;text-align:center; padding:calc(44px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); animation:ex-fondo .25s ease-out both} .exito.saliendo{animation:ex-sale .2s ease-in forwards} .ex-centro{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; width:100%;max-width:400px;margin:0 auto;min-height:0} .ex-circ{position:relative;width:104px;height:104px;border-radius:50%;background:rgba(255,255,255,.18); display:grid;place-items:center;animation:ex-pop .45s ease-out both} .ex-circ::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.6); animation:ex-onda 1s .2s ease-out both} .ex-circ path.tr{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:80;stroke-dashoffset:80;animation:ex-trazo .55s .25s ease-out forwards} .ex-circ path.tr.b{animation-delay:.55s} .ex-pila{position:relative;width:120px;height:100px;animation:ex-pop .45s ease-out both} .ex-pila i{position:absolute;left:10px;width:100px;height:44px;border-radius:7px;background:#86EFAC;border:2px solid #15803D; display:grid;place-items:center;font-style:normal;font-weight:800;font-size:14px;color:color-mix(in srgb,var(--brand-deep) 85%,#000); animation:ex-apila .5s cubic-bezier(.3,1.4,.5,1) both} .exito h2{margin:18px 0 0;font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.02em} .ex-sub{margin:4px 0 0;font-size:13.5px;opacity:.85} .ex-monto{margin-top:14px;font-size:42px;font-weight:850;line-height:1;letter-spacing:-.03em;white-space:nowrap} .ex-sube{animation:ex-sube .4s ease-out both} .ex-tarjeta{width:100%;margin-top:18px;padding:12px 16px;border-radius:20px;background:#fff;color:#0B2219;text-align:left; box-shadow:0 20px 40px -20px rgba(0,0,0,.5)} .ex-fila{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13.5px;border-bottom:1px dashed #E2E8F0} .ex-fila:last-child{border-bottom:0} .ex-fila span{color:#64748B;flex:0 0 auto} .ex-fila b{text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ex-fila b.pos{color:var(--brand-vivid)}.ex-fila b.neg{color:#BE123C} .ex-nota{margin:12px auto 0;max-width:320px;font-size:12.5px;line-height:1.5;opacity:.9} .ex-botones{position:relative;display:grid;gap:8px;width:100%;max-width:400px;margin:0 auto} .ex-chicos{display:grid;gap:8px} .ex-btn{border-radius:16px;padding:14px;font-size:15px;font-weight:750;transition:transform .12s} .ex-btn:active{transform:scale(.98)} .ex-btn.pri{background:#fff;color:#0B2219} .ex-btn.sec{background:rgba(255,255,255,.16);color:#fff} .ex-btn.chico{border-radius:12px;padding:10px;font-size:13px;background:rgba(255,255,255,.14);color:#fff} .ex-barra-f{height:4px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.3)} .ex-barra{display:block;height:100%;transform-origin:left;animation:ex-barra linear .8s both} .ex-confeti{position:absolute;inset:0;overflow:hidden;pointer-events:none} .ex-confeti i{position:absolute;top:-20px;width:8px;height:13px;border-radius:2px;animation-name:ex-cae; animation-timing-function:linear;animation-fill-mode:both} @media (min-width:768px){ .exito h2{font-size:30px} .ex-monto{font-size:48px} } /* ── 5 · pantalla de entrada y de clave: el marco ────────────────────────── */ .lock-screen.lk,.lock-screen.welcome.lk{ background:radial-gradient(120% 80% at 50% 0%,var(--brand-top) 0%,var(--brand-deep) 45%,var(--brand-deeper) 100%); color:#fff;justify-content:center;padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom))} .lk-luz{position:absolute;width:420px;height:420px;border-radius:50%;pointer-events:none;filter:blur(8px)} .lk-luz.l1{left:-160px;top:-150px;background:radial-gradient(circle,color-mix(in srgb,var(--brand-light) 28%,transparent) 0%,transparent 68%)} .lk-luz.l2{right:-170px;bottom:-190px;background:radial-gradient(circle,rgba(240,208,128,.22) 0%,transparent 68%)} .lk-marca{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:22px;text-align:center} .lk-logo{display:grid;place-items:center;width:70px;height:70px;border-radius:22px;margin-bottom:8px;color:var(--brand-deep); background:linear-gradient(145deg,color-mix(in srgb,var(--brand-light) 55%,#fff),var(--brand-light) 55%,var(--brand-vivid));box-shadow:0 16px 30px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6)} .lk-marca b{font-size:22px;font-weight:800;letter-spacing:.32em;padding-left:.32em} .lk-marca small{font-size:11px;font-weight:650;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:var(--brand-pale)} .lk-card{position:relative;width:100%;max-width:400px;margin:0 auto;padding:24px 20px 20px;border-radius:28px; background:var(--surface);color:var(--text);box-shadow:0 30px 60px -24px rgba(0,0,0,.55);text-align:center} .lk-card h2{margin:0 0 4px;font-size:20px} .lk-card .lock-sub{margin:0 auto 18px;max-width:300px} .lk-card .keypad{margin:0 auto} .lk .lock-note{color:rgba(255,255,255,.65);max-width:340px;margin:16px auto 0;text-align:center;display:block} .lk .lock-back{color:rgba(255,255,255,.85);z-index:2} /* portada: la cabecera deja de ser una banda aparte, todo es el mismo fondo */ .lock-screen.welcome.lk .wl-top{background:none;border-radius:0;padding:calc(10px + env(safe-area-inset-top)) 16px 18px;flex:0 0 auto} .lock-screen.welcome.lk .wl-art{opacity:.55} .lock-screen.welcome.lk .wl-hi{font-size:15px;opacity:.85} .lock-screen.welcome.lk .wl-name{font-size:30px} .lock-screen.welcome.lk .wl-body{flex:0 0 auto;padding:22px 18px 20px} .lock-screen.welcome.lk .wl-body .lock-link{color:var(--brand)} .lock-screen.welcome.lk{justify-content:center;gap:0} @media (max-height:700px){ .lk-logo{width:56px;height:56px} .lk-marca{margin-bottom:12px} .lock-screen.welcome.lk .wl-name{font-size:26px} } /* ── 6 · modo noche en el menú ───────────────────────────────────────────── */ .dw-noche{display:flex;align-items:center;gap:12px;width:calc(100% - 24px);margin:8px 12px 4px;padding:10px 12px; border-radius:14px;background:var(--surface-2);text-align:left;color:var(--text)} .dw-noche .dw-txt b{display:block;font-size:14px;font-weight:700} .dw-noche .dw-txt small{display:block;font-size:11.5px;color:var(--muted)} .dw-noche .dw-txt{flex:1} .dw-sw{position:relative;width:44px;height:26px;border-radius:99px;background:color-mix(in srgb,var(--muted) 35%,transparent);transition:background .2s;flex:0 0 auto} .dw-sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s} .dw-sw.on{background:var(--brand-vivid)} .dw-sw.on i{left:21px} /* ── 7 · ¿sigues ahí? ────────────────────────────────────────────────────── */ .inact{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px; background:color-mix(in srgb,var(--brand-deeper) 60%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:ex-fondo .2s ease-out both} .inact-card{width:100%;max-width:360px;padding:24px 22px 18px;border-radius:26px;background:var(--surface);color:var(--text); text-align:center;box-shadow:0 30px 60px -24px rgba(0,0,0,.6);animation:ex-pop .35s ease-out both} .inact-ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto;border-radius:50%; background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)} .inact-card h2{margin:12px 0 0;font-size:19px} .inact-card p{margin:4px 0 0;font-size:13.5px;color:var(--muted)} .inact-seg{margin:6px 0 10px;font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1} .inact-seg small{font-size:15px;font-weight:650;color:var(--muted);margin-left:3px} .inact-link{margin-top:8px;font-size:13px;font-weight:650;color:var(--muted);padding:8px} /* ── 8 · arreglos de modo noche ──────────────────────────────────────────── */ /* app.css pintaba todos los chips de --surface-2 en oscuro, con la misma especificidad que .chip.on y después: el chip elegido perdía su fondo y quedaba texto oscuro sobre fondo oscuro. */ [data-theme="dark"] .chip.on{background:var(--brand);color:var(--on-brand)} [data-theme="dark"] .chip.biz.on{background:var(--bz);color:#fff} /* ── 9 · cabecera del Inicio: misma familia que las tarjetas ─────────────── */ .headband{ position:relative;overflow:hidden;margin:0 0 16px;border-radius:26px;padding:20px 18px 18px; background: radial-gradient(120% 130% at 90% -5%,color-mix(in srgb,var(--brand-light) 55%,transparent) 0%,transparent 45%), linear-gradient(140deg,var(--brand-top) 0%,var(--brand) 45%,var(--brand-deep) 100%); box-shadow:0 14px 30px -14px color-mix(in srgb,var(--brand-deep) 55%,transparent)} .headband::before{content:'';position:absolute;left:-60px;bottom:-110px;width:220px;height:220px;border-radius:50%; border:28px solid rgba(255,255,255,.07);pointer-events:none} .headband::after{content:'';position:absolute;inset:0;border-radius:26px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none} .hb-deco{display:none} .hb-art{flex:0 0 96px;opacity:.9} .headband .lbl{font-size:11px;letter-spacing:.1em;opacity:.78} .headband .big{font-size:clamp(30px,9vw,38px);font-weight:850;letter-spacing:-.03em;margin-top:4px} .hb-libre{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:9px 12px; border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);font-size:12.5px} .hb-libre span{opacity:.88} .hb-libre b{font-size:15px;font-weight:780;white-space:nowrap} .hb-stats{margin-top:12px;border-radius:16px} .hb-net2{margin-top:10px} .hb-ops-t{margin:16px 0 10px} [data-theme="dark"] .headband{ background: radial-gradient(120% 130% at 90% -5%,color-mix(in srgb,var(--brand-light) 28%,transparent) 0%,transparent 45%), linear-gradient(140deg,var(--brand-deep) 0%,color-mix(in srgb,var(--brand-deep) 75%,#000) 50%,var(--brand-deeper) 100%)} @media (min-width:768px){ .headband{margin:0 0 18px;padding:26px 26px 22px;border-radius:30px} } /* La cabecera del Inicio ya no es una banda verde pegada arriba: la tarjeta de abajo lleva la marca, y «Hola» va en el mismo tono que el resto de pantallas. */ .topbar.brand{background:color-mix(in srgb,var(--bg) 80%,transparent);color:var(--text); backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)} .topbar.brand h1,.topbar.brand .sub{color:var(--text)} .topbar.brand .sub{color:var(--muted);opacity:1} .topbar.brand .iconbtn.ghost{color:var(--text)} body[data-view="dashboard"] .topbar{position:sticky} .hb-top{display:block} .hb-art{display:none} .hb-libre span{white-space:nowrap} /* ── 10 · la fila de un movimiento: entra, sale o solo se mueve ──────────── */ /* Antes todas las filas se veían iguales y solo el color del importe las separaba. Ahora cada una lleva un borde de color a la izquierda, una flecha pegada al icono y el importe en el tono de su familia. */ .txr{display:flex;align-items:center;gap:12px;width:100%;text-align:left; padding:10px 12px 10px 11px;border-radius:14px;border-left:3px solid transparent; transition:background .14s} .txr + .txr{margin-top:2px} .txr:active{background:var(--surface-2)} .txr.out{border-left-color:color-mix(in srgb,var(--expense) 70%,transparent)} .txr.in {border-left-color:color-mix(in srgb,var(--income) 75%,transparent)} .txr.mov{border-left-color:color-mix(in srgb,var(--neutral) 60%,transparent)} .txr-ic{position:relative;flex:0 0 auto} .txr-dir{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%; display:grid;place-items:center;color:#fff;box-shadow:0 0 0 2px var(--surface)} .txr.out .txr-dir{background:var(--expense)} .txr.in .txr-dir{background:var(--income)} .txr.mov .txr-dir{background:var(--neutral)} .txr-mid{flex:1;min-width:0} .txr-mid b{display:block;font-size:14px;font-weight:650;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* El recorte con puntos suspensivos no funciona sobre un contenedor flex: el texto va dentro de su propio span para que sí lo haga. */ .txr-mid small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .txr-mid small .bizdot{display:inline-block;vertical-align:middle;margin-right:5px} .txr-mid small span{vertical-align:middle} .txr-amt{flex:0 0 auto;font-size:14.5px;font-weight:750;white-space:nowrap; font-variant-numeric:tabular-nums} .txr.out .txr-amt{color:var(--expense)} .txr.in .txr-amt{color:var(--income)} .txr.mov .txr-amt{color:var(--muted)} /* El contenedor ya no necesita separadores: el color hace el trabajo */ .card > .day-sep + .txr{margin-top:2px} /* ── 11 · la clave: los puntos al centro ─────────────────────────────────── */ /* .dots es flex y el contenedor solo tenía text-align:center, que no alinea cajas flex: los puntos se quedaban pegados a la izquierda. */ .lk-card .dots{justify-content:center;margin:0 auto 24px} .lk-card .keypad{justify-content:center} /* ── 12 · el formulario de registro, como preguntas numeradas ────────────── */ /* cabecera: qué estás registrando y qué le hace a tu dinero */ .tipo-cab{display:flex;align-items:center;gap:11px;margin:0 0 16px;padding:11px 13px;border-radius:16px} .tipo-cab .tc-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;flex:0 0 auto;color:#fff} .tipo-cab .tc-tx{min-width:0} .tipo-cab b{display:block;font-size:15.5px;font-weight:750;line-height:1.2} .tipo-cab small{display:block;font-size:12px;line-height:1.4;margin-top:2px;opacity:.9} .tipo-cab.out{background:color-mix(in srgb,var(--expense) 10%,transparent);color:var(--expense)} .tipo-cab.out .tc-ic{background:var(--expense)} .tipo-cab.in{background:color-mix(in srgb,var(--income) 11%,transparent);color:var(--income)} .tipo-cab.in .tc-ic{background:var(--income)} .tipo-cab.mov{background:var(--surface-2);color:var(--text)} .tipo-cab.mov .tc-ic{background:var(--neutral)} .tipo-cab b,.tipo-cab small{color:inherit} /* el importe manda: grande, centrado y con su símbolo */ .monto-f{margin-bottom:18px;text-align:center} .monto-f label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px} /* La caja se ajusta a su contenido y se centra como bloque: con el campo a ancho completo, el símbolo quedaba pegado al borde izquierdo y el número en el medio, como si fueran dos cosas distintas. */ .monto-caja{display:inline-flex;align-items:baseline;gap:7px; padding:10px 20px;border-radius:18px;background:var(--surface-2); border:2px solid transparent;transition:border-color .15s;max-width:100%} .monto-caja:focus-within{border-color:var(--brand-vivid)} .monto-sim{font-size:24px;font-weight:700;color:var(--muted)} .monto-caja .amount-in{flex:0 1 auto;width:170px;border:0;background:none;padding:0; font-size:36px;font-weight:800;text-align:left;letter-spacing:-.02em; font-variant-numeric:tabular-nums;outline:none} .monto-caja .amount-in::-webkit-outer-spin-button, .monto-caja .amount-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .monto-caja .amount-in{-moz-appearance:textfield;appearance:textfield} .monto-hint{font-size:12px;color:var(--muted);margin-top:6px;min-height:1px} .monto-hint:empty{margin:0} /* cada paso, con su número */ .paso-f{margin-bottom:16px} .paso-t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;margin-bottom:8px} .paso-t i{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;flex:0 0 auto; background:var(--brand);color:var(--on-brand);font-style:normal;font-size:11.5px;font-weight:800} /* dentro de un paso las etiquetas vacías sobran */ .paso-f .f > label:empty{display:none} .paso-f .f{margin-bottom:0} .paso-f .cat-picker > label{display:none} .paso-f .biz-f > label:empty{display:none} .paso-f .biz-f{margin-bottom:0} /* las categorías de siempre, con su nombre: antes parecían un duplicado suelto */ .cat-rapidas{margin-top:8px} .cat-rapidas::before{content:'Las que más usas';display:block;width:100%; font-size:11px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:5px} /* ── 13 · salida visible en toda ventana que se abre encima ───────────────── */ /* La hoja sube hasta el 92% de la pantalla, así que del fondo oscuro queda un dedo de alto — y tocar ese fondo era la única forma de cerrarla en el teléfono (Escape no existe ahí). Abrir una ventana por error dejaba sin salida clara. Ahora la cabecera va pegada arriba con la X a la derecha, y sigue ahí después de bajar en un formulario largo. */ .sheet{padding-top:0} .sheet-head{position:sticky;top:0;z-index:3;margin:0 -18px 2px;padding:8px 18px 0; background:var(--surface)} .sheet-head .grab{margin:0 auto 8px} .sheet-tit{display:flex;align-items:center;gap:10px;min-height:38px;padding-bottom:10px; border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)} .sheet-tit h2{flex:1;min-width:0;margin:0;font-size:17px;font-weight:750;line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sheet-tit > span{flex:1} /* 38px de círculo con el icono a 17: el área táctil real llega a los 44 que pide el dedo porque la cabecera le añade aire arriba y abajo. */ .sheet-x{flex:0 0 auto;width:38px;height:38px;margin-right:-4px;border-radius:50%; display:grid;place-items:center;border:0;cursor:pointer; background:var(--surface-2);color:var(--muted); transition:background .14s,color .14s,transform .12s;-webkit-tap-highlight-color:transparent} .sheet-x:hover{background:color-mix(in srgb,var(--line) 65%,var(--surface-2));color:var(--text)} .sheet-x:active{transform:scale(.9)} .sheet-x:focus-visible{outline:2px solid var(--brand-vivid);outline-offset:2px} /* de noche --surface-2 y --surface casi coinciden: el círculo desaparecía y quedaba la equis flotando, sin pinta de botón. */ [data-theme="dark"] .sheet-x{background:color-mix(in srgb,#fff 11%,transparent);color:var(--text)} [data-theme="dark"] .sheet-x:hover{background:color-mix(in srgb,#fff 20%,transparent)} .sheet-body{padding-top:12px} /* la pantalla de éxito tapa todo y sus botones tardan .75s en aparecer: mientras tanto no había nada que tocar. */ .ex-x{position:absolute;top:calc(8px + env(safe-area-inset-top));right:12px;z-index:2; width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer; background:rgba(255,255,255,.18);color:#fff;-webkit-tap-highlight-color:transparent; animation:ex-sube .3s .1s ease-out both} .ex-x:active{transform:scale(.9)} /* ── 14 · elegir cuenta: cada una su tarjeta, con el color de su banco ─────── */ /* El