/* Ahorrapdo — App Styles | Black Solution © 2025 */

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-tap-highlight-color: transparent; }

/* ── LANDING 2.0 ── */
.landing-v2 { --ink:#eafbf5; --muted:#9ab8ae; --green:#08c977; --deep:#001712; background:#00120f; color:var(--ink); overflow:hidden; }
.landing-v2 main { display:flex; flex-direction:column; }
.landing-v2 .landing-hero { order:1; }.landing-v2 #funciones { order:2; }.landing-v2 .web-section { order:3; }.landing-v2 .showcase-section-iphone { order:4; }.landing-v2 .steps-section { order:5; }
.landing-v2 button, .landing-v2 a { -webkit-tap-highlight-color:transparent; }
.landing-shell { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.landing-nav { position:absolute; inset:0 0 auto; z-index:40; border:0; }
.nav-inner { height:82px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.landing-brand { display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:21px; font-weight:850; letter-spacing:-.04em; min-height:44px; }
.landing-brand strong { color:var(--green); }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(145deg,#22d890,#069f66); color:white; font-size:13px; box-shadow:0 8px 24px rgba(8,201,119,.2); }
.nav-links { display:flex; align-items:center; gap:34px; margin-left:auto; }
.nav-links a, .nav-links button { color:#cae0d9; font-family:inherit; font-size:13px; font-weight:600; background:none; border:0; padding:0; min-height:44px; position:relative; display:flex; align-items:center; cursor:pointer; }
.nav-links a:hover, .nav-links button:hover { color:#fff; }
.nav-links a::after { content:""; position:absolute; height:2px; left:50%; right:50%; bottom:2px; background:var(--green); border-radius:2px; transition:left .35s cubic-bezier(.22,1,.36,1),right .35s cubic-bezier(.22,1,.36,1),box-shadow .35s; }
.nav-links a:hover::after,.nav-links a.active::after { left:0; right:0; box-shadow:0 0 12px rgba(8,201,119,.65); }
.landing-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:10px; padding:0 22px; min-height:52px; border:1px solid transparent; font-size:14px; font-weight:800; transition:transform .2s, box-shadow .2s, background .2s; }
.landing-btn:hover { transform:translateY(-2px); }
.landing-btn-primary { color:#fff; background:linear-gradient(135deg,#06b96b,#08d482); box-shadow:0 14px 35px rgba(8,201,119,.18); }
.landing-btn-primary:hover { box-shadow:0 16px 38px rgba(8,201,119,.3); }
.landing-btn-ghost { color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.025); }
.nav-cta { min-height:44px; padding-inline:18px; margin-left:22px; }
.app-download-menu { position:relative; margin-left:22px; }
.app-download-menu summary { list-style:none; cursor:pointer; user-select:none; }
.app-download-menu summary::-webkit-details-marker { display:none; }
.app-download-menu[open] .app-download-chevron { transform:rotate(180deg); }
.app-download-chevron { font-size:10px; transition:transform .2s ease; }
.app-download-popover { position:absolute; top:calc(100% + 10px); right:0; width:220px; padding:8px; border:1px solid rgba(54,224,151,.25); border-radius:14px; background:rgba(0,31,24,.98); box-shadow:0 20px 45px rgba(0,0,0,.35); }
.app-download-option { width:100%; min-height:51px; display:flex; align-items:center; gap:11px; padding:9px 10px; border:0; border-radius:9px; color:#eafbf5; background:transparent; font:inherit; text-align:left; cursor:pointer; }
.app-download-option:hover { color:#fff; background:rgba(31,215,132,.12); }.app-download-option>i:first-child { width:24px; color:#29de92; font-size:19px; text-align:center; }.app-download-option span { display:grid; gap:2px; }.app-download-option strong { font-size:12px; }.app-download-option small { color:#91afa4; font-size:10px; }.app-download-option>i:last-child { margin-left:auto; color:#829a90; font-size:10px; }.app-download-option.is-disabled { opacity:.45; cursor:not-allowed; }.app-download-option.is-disabled:hover { background:transparent; color:#eafbf5; }
.landing-hero { min-height:900px; padding:150px 0 54px; position:relative; background:radial-gradient(circle at 72% 45%,rgba(0,139,91,.2),transparent 31%),radial-gradient(circle at 18% 10%,rgba(0,73,58,.22),transparent 26%),#00120f; }
.landing-hero::after { content:""; position:absolute; inset:auto -15% 55px; height:240px; background:radial-gradient(ellipse at center,rgba(5,211,124,.12),transparent 56%); pointer-events:none; }
.hero-orbit { position:absolute; width:1100px; height:260px; border:1px solid rgba(11,227,132,.36); border-radius:50%; transform:rotate(-13deg); left:38%; bottom:180px; box-shadow:0 0 18px rgba(8,201,119,.08); }
.hero-orbit-two { transform:rotate(-7deg); bottom:145px; border-color:rgba(11,227,132,.17); }
.hero-grid { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:60px; position:relative; z-index:2; }
.landing-pill { display:inline-flex; align-items:center; gap:8px; color:#e5f5ef; background:rgba(7,111,78,.16); border:1px solid rgba(53,214,150,.22); border-radius:999px; padding:9px 14px; font-size:12px; margin-bottom:24px; }
.hero-copy h1 { color:#fff; font-size:clamp(48px,5vw,72px); line-height:1.04; letter-spacing:-.055em; font-weight:900; margin:0 0 22px; }
.hero-copy h1 em { color:var(--green); font-style:normal; }
.hero-copy>p { color:#bfd1cb; max-width:525px; font-size:17px; line-height:1.7; margin-bottom:30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-downloads { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.hero-downloads .play-store-badge { width:250px !important; height:78.26px; margin:0; overflow:hidden; border-radius:8px; }
.hero-downloads .play-store-badge img { width:100%; height:100%; object-fit:fill; }
.app-store-badge { cursor:default; }
.portal-web-button { width:250px; max-width:100%; min-height:52px; display:flex; align-items:center; gap:12px; padding:8px 15px; border:1px solid rgba(112,151,139,.65); border-radius:9px; color:#fff; background:rgba(255,255,255,.04); font:inherit; text-align:left; cursor:pointer; transition:transform .2s ease,background .2s ease,border-color .2s ease; }.portal-web-button:hover { transform:translateY(-2px); border-color:#18cf83; background:rgba(8,201,119,.13); }.portal-web-button>i:first-child { color:#21d88b; font-size:19px; }.portal-web-button span { display:grid; gap:1px; }.portal-web-button strong { font-size:13px; }.portal-web-button small { color:#a9c0b7; font-size:10px; }.portal-web-button>i:last-child { margin-left:auto; color:#8ddab5; font-size:12px; }
.hero-product { min-height:590px; position:relative; }
.hero-phone { width:305px; margin:0 auto; position:relative; z-index:3; border:5px solid #202523; border-radius:49px; padding:3px; background:#050706; transform:rotate(6deg); box-shadow:0 42px 75px rgba(0,0,0,.6),0 0 0 1px #77817d,4px 0 0 #383f3c; overflow:hidden; }
.hero-phone img { width:100%; display:block; border-radius:42px; }
.phone-camera { position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:2; width:11px; height:11px; background:#050706; border-radius:50%; box-shadow:0 0 0 2px rgba(35,48,45,.75); }
.float-card { position:absolute; z-index:4; width:150px; padding:15px; border-radius:14px; background:linear-gradient(145deg,rgba(5,47,39,.9),rgba(2,25,21,.92)); border:1px solid rgba(16,208,124,.38); box-shadow:0 22px 45px rgba(0,0,0,.25); backdrop-filter:blur(10px); }
.float-card small,.float-card strong { display:block; }
.float-card small { color:#dcece7; margin-top:9px; font-size:13px; }
.float-card strong { color:#fff; font-size:12px; margin-top:3px; }
.float-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#08794f; color:#fff; }
.float-icon.blue { background:#0754a7; }.float-icon.red { background:#a62929; }
.float-income { left:0; top:75px; transform:rotate(5deg); }.float-expense { right:-4px; top:112px; transform:rotate(7deg); }.float-categories { left:-22px; top:280px; transform:rotate(7deg); }.float-balance { right:5px; top:325px; transform:rotate(7deg); }
.trust-strip { position:relative; z-index:5; display:grid; grid-template-columns:repeat(5,1fr); margin-top:26px; border:1px solid rgba(11,200,119,.2); border-radius:18px; background:rgba(0,20,16,.76); min-height:110px; padding:20px 28px; }
.trust-strip>div { display:flex; align-items:center; gap:13px; padding:0 20px; border-right:1px solid rgba(255,255,255,.07); }
.trust-strip>div:last-child { border:0; }
.trust-icon { flex:0 0 44px; height:44px; display:grid; place-items:center; border-radius:50%; background:rgba(8,201,119,.1); color:#22d98d; font-size:15px; font-weight:900; }
.trust-strip p { margin:0; min-width:0; }.trust-strip strong { display:block; color:#10d987; font-size:19px; line-height:1.2; }.trust-strip small { display:block; color:#c0d1cc; font-size:10px; line-height:1.35; margin-top:4px; }
.showcase-section { padding:78px 0 105px; background:radial-gradient(circle at 15% 50%,rgba(5,154,105,.18),transparent 28%),linear-gradient(90deg,#01231c,#001a15); }
.showcase-section-iphone { position:relative; z-index:1; margin-top:-497px; padding-top:575px; background:#001a15; }
.showcase-grid { display:grid; grid-template-columns:245px 1fr; gap:45px; align-items:end; }
.section-kicker { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:7px 10px; background:rgba(9,186,111,.12); color:#8ad8b5; text-transform:uppercase; letter-spacing:.04em; font-size:9px; font-weight:800; }
.showcase-copy h2,.web-copy h2 { font-size:39px; line-height:1.06; letter-spacing:-.045em; font-weight:900; margin:19px 0 16px; color:#fff; }.showcase-copy h2 span,.web-copy h2 span { color:var(--green); }
.showcase-copy>p { font-size:13px; color:#b8ccc5; line-height:1.65; }
.showcase-copy ul,.web-copy ul { list-style:none; padding:0; margin:22px 0; display:grid; gap:10px; }.showcase-copy li,.web-copy li { font-size:11px; color:#d3e2dd; }.showcase-copy li i { width:17px; height:17px; display:inline-grid; place-items:center; border-radius:50%; color:#001a12; background:#14d888; margin-right:7px; font-size:8px; }
.showcase-copy .landing-btn { margin-top:8px; min-height:45px; padding-inline:15px; font-size:11px; }
.play-store-badge { display:inline-block; flex:none; width:250px !important; max-width:100%; margin:16px 0 8px; border-radius:8px; line-height:0; transition:transform .2s ease,filter .2s ease; }
.showcase-copy .play-store-badge { width:275px !important; }
.play-store-badge img { display:block; width:100%; height:auto; border-radius:8px; }
.app-store-showcase-badge { cursor:default; overflow:hidden; }.app-store-showcase-badge:hover { transform:none; filter:none; }
.iphone-frame { position:relative; padding:6px; border:3px solid #c1c9c6; border-radius:30px; background:#080b0a; box-shadow:0 18px 36px rgba(0,0,0,.36),inset 0 0 0 1px #38433f; }.iphone-frame img { border-radius:22px; }.iphone-island { position:absolute; z-index:2; top:11px; left:50%; width:38%; height:11px; translate:-50% 0; border-radius:999px; background:#030504; box-shadow:0 1px 2px rgba(255,255,255,.12); }
.play-store-badge:hover { filter:brightness(1.08); transform:translateY(-2px); }
.play-store-badge:focus-visible { outline:3px solid #56e5a5; outline-offset:4px; }
.screens-gallery { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; align-items:end; }
.screens-gallery figure { min-width:0; text-align:center; }.screens-gallery figcaption { color:#fff; font-size:12px; font-weight:800; margin-bottom:14px; }.screens-gallery figcaption small { display:block; color:#9fb6ae; font-size:9px; font-weight:400; margin-top:7px; }
.mini-phone { background:#07100e; padding:5px; border:2px solid #75807d; border-radius:27px; box-shadow:0 20px 40px rgba(0,0,0,.28); overflow:hidden; }.mini-phone img { width:100%; display:block; border-radius:21px; }
.web-section { position:relative; z-index:2; background:transparent; padding:0; }
.web-card { transform:translateY(-32px); min-height:465px; border-radius:23px; display:grid; grid-template-columns:.75fr 1.25fr .63fr; align-items:center; gap:32px; padding:43px 48px; color:#101c25; background:linear-gradient(105deg,#fff,#f5f6f6); box-shadow:0 22px 55px rgba(0,32,24,.1); }
.section-kicker.light { background:#dff8eb; color:#098356; }
.web-copy h2 { color:#101c25; }.web-copy>p { color:#47555c; font-size:13px; line-height:1.6; }.web-copy li { color:#27353a; }.web-copy li i { color:#09a96b; width:22px; }
.browser-phones { display:flex; align-items:end; justify-content:center; gap:10px; height:370px; }.browser-phone { width:145px; flex:0 0 auto; border:5px solid #111; background:#fff; border-radius:28px; padding:19px 4px 5px; position:relative; overflow:hidden; box-shadow:0 16px 25px rgba(0,0,0,.14); }.browser-phone-up { transform:translateY(-12px); }.browser-phone>span { position:absolute; top:5px; left:0; right:0; text-align:center; font-size:7px; color:#606a6d; }.browser-phone img { width:100%; display:block; border-radius:19px; }
.web-entry { align-self:center; }.web-entry p { color:#1e2a2f; font-size:13px; line-height:1.6; margin-bottom:18px; }.web-entry .landing-btn { min-height:47px; padding-inline:16px; font-size:12px; }.web-entry strong { display:block; margin-top:27px; color:#0aaf6c; font-size:19px; font-style:italic; transform:rotate(-5deg); }.web-entry>i { color:#0aaf6c; font-size:27px; margin:18px 0 0 5px; transform:rotate(-25deg); }
.steps-section { padding:62px 0 25px; background:radial-gradient(circle at 50% 20%,rgba(5,124,87,.24),transparent 40%),#00221c; }.steps-section>.landing-shell>h2 { text-align:center; font-size:28px; font-weight:850; padding:0 0 45px; }.steps-section h2 span { color:var(--green); }
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-bottom:52px; }.steps-grid>div { text-align:center; position:relative; }.steps-grid>div:not(:last-child)::after { content:""; position:absolute; height:1px; border-top:1px dashed rgba(9,206,122,.55); width:calc(100% - 62px); left:calc(50% + 42px); top:25px; }.steps-grid span { width:54px; height:54px; display:grid; place-items:center; margin:0 auto 17px; border-radius:13px; color:#b7f4d8; background:linear-gradient(145deg,#08714f,#064433); border:1px solid rgba(39,222,144,.32); font-size:19px; }.steps-grid h3 { font-size:13px; margin:0 0 8px; }.steps-grid p { color:#b1c5be; font-size:11px; line-height:1.6; margin:auto; max-width:190px; }
.final-card { min-height:245px; border:1px solid rgba(15,220,133,.36); border-radius:20px; padding:40px 70px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; background:radial-gradient(circle at 75% 60%,rgba(7,181,111,.2),transparent 36%),rgba(1,42,33,.6); }.final-card h2 { font-size:29px; line-height:1.12; margin:0 0 10px; }.final-card p { color:#bdd0c9; font-size:13px; margin-bottom:20px; }.final-card .landing-btn { min-height:46px; font-size:12px; }
.device-stack { position:relative; width:390px; height:190px; align-self:flex-end; }.laptop { position:absolute; width:285px; height:154px; left:0; top:4px; padding:7px 7px 12px; overflow:visible; background:#202624; border:2px solid #78817e; border-radius:9px; box-shadow:0 18px 35px rgba(0,0,0,.3); }.laptop img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; border-radius:4px; }.laptop::before { content:""; position:absolute; z-index:-1; width:34px; height:28px; left:50%; top:100%; translate:-50% 0; background:linear-gradient(90deg,#4e5754,#89918e,#4e5754); }.laptop::after { content:""; position:absolute; z-index:-1; width:120px; height:9px; left:50%; top:calc(100% + 25px); translate:-50% 0; border-radius:7px 7px 3px 3px; background:#747d7a; box-shadow:0 5px 10px rgba(0,0,0,.25); }.stack-phone { position:absolute; z-index:2; width:90px; right:12px; bottom:0; border:4px solid #242927; border-radius:19px; overflow:hidden; box-shadow:0 15px 25px rgba(0,0,0,.35); }.stack-phone img { width:100%; display:block; }
.landing-footer { background:#001712; padding:20px 0 25px; border:0; }.landing-footer>.landing-shell { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:34px; }.landing-footer .landing-brand { font-size:15px; }.landing-footer .brand-mark { width:25px; height:25px; border-radius:8px; font-size:10px; }.landing-footer p,.landing-footer small { color:#839b93; font-size:9px; }.landing-footer a { color:#9cb1aa; font-size:9px; }.landing-footer small a { color:#18cf83; font-weight:800; }
.hero-phone,.mini-phone,.browser-phone,.device-stack { animation:deviceFloat 5.5s ease-in-out infinite; }.mini-phone { animation-duration:5s; }.screens-gallery figure:nth-child(2) .mini-phone,.browser-phone:nth-child(2) { animation-delay:-1.4s; }.screens-gallery figure:nth-child(3) .mini-phone,.browser-phone:nth-child(3) { animation-delay:-2.8s; }.screens-gallery figure:nth-child(4) .mini-phone { animation-delay:-4.2s; }
@keyframes deviceFloat { 0%,100% { translate:0 0; } 50% { translate:0 -9px; } }
.landing-support-overlay { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(0,10,8,.72); backdrop-filter:blur(8px); }.landing-support-overlay.hidden { display:none; }.landing-support-modal { width:min(520px,100%); max-height:92vh; overflow:auto; border:1px solid rgba(29,219,139,.25); border-radius:22px; background:#fff; color:#17231f; box-shadow:0 30px 90px rgba(0,0,0,.55); animation:supportPop .35s cubic-bezier(.22,1,.36,1); }.landing-support-head { display:flex; align-items:center; justify-content:space-between; padding:21px 23px; color:#fff; background:linear-gradient(135deg,#047857,#10b981); }.landing-support-head>div { display:flex; align-items:center; gap:12px; }.landing-support-head>div>span { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.16); }.landing-support-head h2 { margin:0; font-size:17px; font-weight:900; }.landing-support-head p { margin:3px 0 0; color:#d1fae5; font-size:11px; }.landing-support-head button { width:38px; height:38px; min-height:38px; border:0; border-radius:10px; color:#fff; background:rgba(255,255,255,.14); cursor:pointer; }.landing-support-modal form { display:grid; gap:15px; padding:22px; }.landing-support-modal label { display:grid; gap:7px; color:#52615c; font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }.support-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.landing-support-modal input,.landing-support-modal select,.landing-support-modal textarea { width:100%; border:1px solid #d9e3df; border-radius:11px; padding:12px 13px; color:#17231f; background:#f8faf9; font:600 13px/1.4 Inter,sans-serif; text-transform:none; letter-spacing:0; }.landing-support-modal textarea { resize:vertical; }.landing-support-modal label>small { justify-self:end; color:#87958f; font-size:10px; letter-spacing:0; }.landing-support-note { padding:11px 13px; border-radius:10px; color:#08734d; background:#ecfdf5; font-size:11px; }.landing-support-actions { display:grid; grid-template-columns:1fr 1fr; gap:11px; }.landing-support-actions button { min-height:46px; border:1px solid #d9e3df; border-radius:11px; font-weight:800; cursor:pointer; }.landing-support-actions button:last-child { border-color:#07975f; color:#fff; background:#07975f; }.landing-support-actions button:disabled { opacity:.6; cursor:wait; }
@keyframes supportPop { from { opacity:0; transform:translateY(20px) scale(.97); } to { opacity:1; transform:none; } }
.play-store-modal { position:fixed; z-index:200; inset:0; display:grid; place-items:center; padding:20px; opacity:0; visibility:hidden; background:rgba(0,12,9,.76); backdrop-filter:blur(7px); transition:opacity .25s ease,visibility .25s; }.play-store-modal.is-visible { opacity:1; visibility:visible; }.play-store-modal-card { position:relative; width:min(460px,100%); overflow:hidden; padding:52px 38px 34px; border:1px solid rgba(44,229,145,.4); border-radius:24px; color:#fff; text-align:center; background:radial-gradient(circle at 100% 0,rgba(16,201,119,.24),transparent 43%),#00231c; box-shadow:0 28px 80px rgba(0,0,0,.55); transform:translateY(16px) scale(.97); transition:transform .25s ease; }.play-store-modal.is-visible .play-store-modal-card { transform:none; }.play-store-modal-copy { position:relative; z-index:1; }.play-store-modal-label { display:inline-flex; align-items:center; gap:7px; margin-bottom:12px; color:#74e6af; font-size:11px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }.play-store-modal-copy h2 { margin:0; color:#fff; font-size:clamp(25px,4vw,35px); line-height:1.04; letter-spacing:-.045em; font-weight:900; }.play-store-modal-copy p { max-width:330px; margin:13px auto 18px; color:#c2d8d0; font-size:13px; line-height:1.55; }.play-store-modal-badge { display:block; width:205px; max-width:100%; margin-inline:auto; line-height:0; transition:transform .2s ease,filter .2s ease; }.play-store-modal-badge:hover { filter:brightness(1.1); transform:translateY(-2px); }.play-store-modal-badge img { display:block; width:100%; height:auto; border-radius:7px; }.play-store-modal-close { position:absolute; z-index:2; top:12px; right:12px; display:grid; width:36px; height:36px; place-items:center; border:0; border-radius:10px; color:#d6ece4; background:rgba(255,255,255,.1); cursor:pointer; }.play-store-modal-close:hover { color:#fff; background:rgba(255,255,255,.2); }
@media (max-width:520px) { .play-store-modal { padding:14px; }.play-store-modal-card { padding:48px 22px 26px; border-radius:20px; }.play-store-modal-copy h2 { font-size:25px; }.play-store-modal-copy p { margin:11px auto 15px; font-size:12px; }.play-store-modal-badge { width:180px; } }
@media (prefers-reduced-motion:reduce) { .hero-phone,.mini-phone,.browser-phone,.device-stack { animation:none; }.nav-links a::after { transition:none; } }
@media (max-width: 980px) {
  .nav-links { display:none; }.hero-grid { grid-template-columns:1fr; }.landing-hero { padding-top:125px; }.hero-copy { text-align:center; }.hero-copy>p { margin-inline:auto; }.hero-actions { justify-content:center; }.hero-downloads { align-items:center; }.hero-product { margin-top:15px; }.trust-strip { grid-template-columns:repeat(3,1fr); }.trust-strip>div { border:0; }.showcase-grid { grid-template-columns:1fr; }.showcase-copy { text-align:center; max-width:530px; margin:auto; }.play-store-badge { margin-inline:auto; }.screens-gallery { overflow-x:auto; grid-template-columns:repeat(5,185px); padding-bottom:12px; }.web-card { grid-template-columns:1fr 1.3fr; }.web-entry { display:none; }.browser-phones { overflow-x:auto; justify-content:flex-start; padding:14px 2px; }.browser-phone { width:112px; }.landing-footer>.landing-shell { grid-template-columns:auto 1fr auto; }
}
@media (max-width: 680px) {
  .landing-shell { width:min(100% - 28px,1180px); }.nav-inner { height:70px; }.nav-cta { padding-inline:13px; font-size:11px; }.app-download-menu { margin-left:auto; }.landing-brand { font-size:18px; }.landing-hero { min-height:auto; padding:105px 0 40px; }.hero-copy h1 { font-size:45px; }.hero-copy>p { font-size:15px; }.landing-pill { font-size:10px; }.hero-product { min-height:510px; }.hero-phone { width:250px; }.float-card { width:125px; padding:11px; }.float-income { left:-10px; top:50px; }.float-expense { right:-12px; top:115px; }.float-categories { left:-12px; top:300px; }.float-balance { right:-15px; top:350px; }.trust-strip { grid-template-columns:repeat(2,1fr); gap:8px; padding:16px 10px; }.trust-strip>div { padding:8px; }.trust-strip>div:last-child { grid-column:1/-1; justify-content:center; }.showcase-section { padding:60px 0 80px; }.screens-gallery { margin-right:-14px; grid-template-columns:repeat(5,155px); }.web-card { transform:translateY(-22px); grid-template-columns:1fr; padding:30px 22px; }.browser-phones { height:auto; overflow-x:auto; justify-content:flex-start; padding:15px 2px; }.browser-phone { min-width:145px; }.steps-section>.landing-shell>h2 { font-size:25px; }.steps-grid { grid-template-columns:1fr 1fr; }.steps-grid>div::after { display:none; }.final-card { padding:30px 24px; text-align:center; justify-content:center; }.final-card h2 { font-size:25px; }.final-card .hero-actions { justify-content:center; }.device-stack { display:none; }.landing-footer>.landing-shell { grid-template-columns:1fr; justify-items:center; gap:12px; text-align:center; }.landing-footer small { grid-column:auto; }.support-field-row { grid-template-columns:1fr; }
}

/* En móvil, el bloque web crece en altura: el banner de iPhone continúa debajo sin quedar cubierto. */
@media (max-width:680px) {
  .showcase-copy ul { width:max-content; max-width:100%; margin-inline:auto; text-align:left; }
  .showcase-section-iphone { margin-top:0; padding-top:60px; }
}

/* ── SPA PAGES ── */
.page { display: none !important; }
.page.active { display: block !important; }

/* ── GRADIENTS ── */
.grad { background: linear-gradient(135deg, #064e3b 0%, #059669 60%, #10b981 100%); }
.grad-dark { background: linear-gradient(135deg, #022c22 0%, #064e3b 100%); }
.glass { background: rgba(255,255,255,.12); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.2); }

/* ── ANIMATIONS ── */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn  { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tabForward { from { opacity: .35; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tabBack    { from { opacity: .35; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes spin     { to { transform: rotate(360deg); } }
.anim-up  { animation: fadeUp  .45s ease both; }
.anim-in  { animation: slideIn .30s ease both; }
.tab-slide-forward { animation: tabForward .28s cubic-bezier(.22,.61,.36,1) both; }
.tab-slide-back { animation: tabBack .28s cubic-bezier(.22,.61,.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  .tab-slide-forward, .tab-slide-back { animation: none; }
}

.spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .75s linear infinite;
}

/* ── TOAST ── */
#toast {
    position: fixed;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    opacity: 0;
    transition: all .3s ease;
    z-index: 9999;
    pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* PII: se oculta al imprimir; privacy.js lo enmascara al perder foco. */
.pii-masked { filter: blur(5px); user-select: none; }
@media print {
    [data-private-email] { color: transparent !important; font-size: 0 !important; }
    [data-private-email]::after { content: '***@***'; color: #111827; font-size: 12pt; }
}

/* ── INSTALL FAB ── */

/* ── INPUTS ── */
input:focus, select:focus {
    outline: none;
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, .15) !important;
}

/* ── CATEGORY BUTTONS ── */
.cat-btn { transition: all .18s ease; }
.cat-btn.selected { border-color: #059669 !important; background: #ecfdf5; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #059669; border-radius: 4px; }

/* ── GRADIENT TEXT ── */
.gtext {
    background: linear-gradient(135deg, #6ee7b7, #a7f3d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── FEATURE CARDS ── */
.fcard { transition: transform .25s ease, box-shadow .25s ease; }
.fcard:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,.1); }

/* ── STEP CIRCLES ── */
.step {
    background: #059669; color: #fff;
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 800;
    margin: 0 auto 1rem;
}

/* ── DASHBOARD RESPONSIVE ── */
#sum-income, #sum-expenses {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    letter-spacing: -.035em;
}
.weekly-stat-grid > div { min-width: 0; overflow: hidden; }
.weekly-total-row { flex-direction: column; align-items: center !important; justify-content: center; gap: .55rem !important; text-align: center; }
#weekly-total { line-height: 1.05; }
#weekly-badge { margin: 0 !important; max-width: 100%; text-align: center; line-height: 1.2; }
.weekly-stat-value {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(.68rem, 1.2vw, .82rem) !important;
    letter-spacing: -.055em;
    line-height: 1.25;
    white-space: nowrap;
}

@media (max-width: 520px) {
    #sum-income, #sum-expenses {
        font-size: clamp(.92rem, 4.55vw, 1.18rem) !important;
    }
    #weekly-body { padding-left: 1rem; padding-right: 1rem; }
    .weekly-stat-grid { gap: .45rem !important; }
    .weekly-stat-grid > div { padding-left: .4rem !important; padding-right: .4rem !important; }
}

@media (min-width: 1024px) {
    #page-dashboard .dashboard-header-inner,
    #page-dashboard .dashboard-main { width: calc(100% - 4rem); max-width: none !important; }
    #page-dashboard .dashboard-main { padding-bottom: 3rem; }
    #page-dashboard #tab-resumen:not(.hidden) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        align-items: start;
    }
    #page-dashboard #tab-resumen > * { margin-top: 0 !important; min-width: 0; }
    #page-dashboard #tab-resumen > :first-child { grid-column: 1 / -1; }
    #page-dashboard #bal-card,
    #page-dashboard #tab-resumen > :nth-child(3) { min-height: 132px; }
    #page-dashboard #sum-income,
    #page-dashboard #sum-expenses { font-size: 1.45rem !important; }
    #page-dashboard #tab-agregar,
    #page-dashboard #tab-historial { max-width: 900px; margin-inline: auto; }
}

@media (min-width: 1280px) {
    #page-dashboard #tab-resumen:not(.hidden) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #page-dashboard #bal-card { grid-column: span 2; }
    #page-dashboard #tab-resumen > :nth-child(4) { grid-column: span 2; }
    #page-dashboard #tab-resumen > :nth-child(3) { min-height: 132px; }
    #page-dashboard #tab-resumen > :nth-child(3) #sum-income,
    #page-dashboard #tab-resumen > :nth-child(3) #sum-expenses { font-size: clamp(1.05rem, 1.45vw, 1.4rem) !important; }
}

/* ── BOTTOM NAV ── */
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ── NOTIFICATION SETTINGS ── */
.notification-settings-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1.25rem;
    padding: .9rem 1rem;
}
.notification-settings-card h3 {
    color: #059669;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    margin: 0 0 .35rem;
}
.notification-setting-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 4.25rem;
    padding: .65rem 0;
    border-bottom: 1px solid #f3f4f6;
}
.notification-setting-row:last-child { border-bottom: 0; }
.notification-setting-row > i {
    color: #059669;
    flex: 0 0 1.55rem;
    font-size: 1.05rem;
    text-align: center;
}
.notification-setting-row > span { flex: 1; min-width: 0; }
.notification-setting-row strong {
    color: #1f2937;
    display: block;
    font-size: .9rem;
    line-height: 1.25rem;
}
.notification-setting-row small {
    color: #6b7280;
    display: block;
    font-size: .75rem;
    line-height: 1.15rem;
    margin-top: .12rem;
}
.notification-switch {
    appearance: none;
    -webkit-appearance: none;
    background: #d1d5db;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    flex: 0 0 2.8rem;
    height: 1.55rem;
    padding: 0;
    position: relative;
    transition: background-color .2s ease;
    width: 2.8rem;
}
.notification-switch::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    content: '';
    height: 1.2rem;
    left: .18rem;
    position: absolute;
    top: .175rem;
    transition: transform .2s ease;
    width: 1.2rem;
}
.notification-switch:checked { background: #059669; }
.notification-switch:checked::after { transform: translateX(1.25rem); }
.notification-switch:disabled { cursor: not-allowed; opacity: .4; }
.notification-select {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #d1d5db;
    color: #374151;
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 700;
    max-width: 7rem;
    padding: .4rem .15rem;
}

/* ── TOUCH TARGETS (min 44×44px per Apple HIG) ── */
button, a, [role="button"] { min-height: 44px; }
nav.bottom-nav button { min-height: 56px; }

/* ── FIELDSET RESET (evitar borde y padding del browser) ── */
fieldset { border: 0; padding: 0; margin: 0; min-inline-size: unset; }
legend { padding: 0; }

/* ── DARK MODE ─────────────────────────────────────────────────── */
html.dark { color-scheme: dark; }

/* Backgrounds */
html.dark body                           { background: #0f172a !important; }
html.dark.amoled body                    { background: #000 !important; }
html.dark.amoled .bg-white,
html.dark.amoled nav.bottom-nav,
html.dark.amoled .support-modal          { background-color: #000 !important; }
html.dark.amoled .bg-gray-50             { background-color: #000 !important; }
html.dark.amoled input:not([type="submit"]):not([type="button"]),
html.dark.amoled select,
html.dark.amoled textarea                 { background-color: #000 !important; }
html.dark .bg-white                      { background-color: #1e293b !important; }
html.dark .bg-gray-50                    { background-color: #0f172a !important; }
html.dark .bg-gray-100                   { background-color: #253347 !important; }

/* Active tab: no blanco sino verde oscuro */
html.dark #tbtn-resumen.bg-white,
html.dark #tbtn-agregar.bg-white,
html.dark #tbtn-historial.bg-white       { background-color: #064e3b !important; }

/* Borders */
html.dark .border-gray-100,
html.dark .border-gray-200               { border-color: #334155 !important; }
html.dark nav.bottom-nav                 { border-color: #334155 !important; }

/* Text */
html.dark .text-gray-900                 { color: #f1f5f9 !important; }
html.dark .text-gray-800                 { color: #e2e8f0 !important; }
html.dark .text-gray-700                 { color: #cbd5e1 !important; }
html.dark .text-gray-600                 { color: #94a3b8 !important; }
html.dark .text-gray-500                 { color: #a8b4c4 !important; }
html.dark .text-gray-400                 { color: #94a3b8 !important; }
html.dark .text-gray-300                 { color: #cbd5e1 !important; }

/* Colores de acción con contraste AA sobre superficies nocturnas. */
html.dark .text-emerald-600,
html.dark .text-emerald-700              { color: #6ee7b7 !important; }
html.dark .text-blue-600,
html.dark .text-blue-700                 { color: #93c5fd !important; }
html.dark .text-red-400,
html.dark .text-red-500,
html.dark .text-red-600,
html.dark .text-red-700                  { color: #fca5a5 !important; }
html.dark .text-amber-600,
html.dark .text-amber-700                { color: #fcd34d !important; }
html.dark .text-yellow-700               { color: #fde68a !important; }
html.dark .text-orange-700               { color: #fdba74 !important; }
html.dark .text-sky-700                  { color: #7dd3fc !important; }
html.dark .text-purple-700               { color: #d8b4fe !important; }
html.dark .text-pink-700                 { color: #f9a8d4 !important; }
html.dark .text-cyan-700                 { color: #67e8f9 !important; }
html.dark .text-indigo-700               { color: #a5b4fc !important; }

html.dark .border-emerald-200            { border-color: #34d399 !important; }
html.dark .border-blue-200               { border-color: #60a5fa !important; }
html.dark .border-red-200                { border-color: #f87171 !important; }
html.dark .border-amber-200               { border-color: #f59e0b !important; }

/* Inputs, selects, textareas */
html.dark input:not([type="submit"]):not([type="button"]),
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder          { color: #94a3b8 !important; }

/* Category picker buttons */
html.dark .cat-btn                       { background-color: #1e293b !important; border-color: #334155 !important; }
html.dark .cat-btn.selected              { background-color: #064e3b !important; border-color: #059669 !important; }

/* Category color badges */
html.dark .bg-yellow-50                  { background-color: #422006 !important; }
html.dark .bg-red-50                     { background-color: #450a0a !important; }
html.dark .bg-purple-50                  { background-color: #2e1065 !important; }
html.dark .bg-blue-50                    { background-color: #172554 !important; }
html.dark .bg-emerald-50                 { background-color: #064e3b !important; }

/* Bottom nav */
html.dark nav.bottom-nav                 { background-color: #1e293b !important; }

/* Landing nav (backdrop) */
html.dark #page-landing nav.fixed        { background-color: rgba(15,23,42,.85) !important; border-color: #334155 !important; }
html.dark #page-landing nav .text-gray-900 { color: #f1f5f9 !important; }
html.dark #page-landing nav .text-gray-600 { color: #94a3b8 !important; }

/* Support modal */
html.dark .support-modal                 { background-color: #1e293b !important; }
html.dark .support-modal .bg-gray-50     { background-color: #0f172a !important; }
html.dark .support-modal .border-gray-200 { border-color: #334155 !important; }
html.dark .support-modal .text-gray-800  { color: #f1f5f9 !important; }
html.dark .support-modal .text-gray-500,
html.dark .support-modal .text-gray-600  { color: #94a3b8 !important; }
html.dark .support-modal .text-gray-400  { color: #475569 !important; }
html.dark .support-modal .bg-emerald-50  { background-color: #064e3b !important; }
html.dark .support-modal .text-emerald-700 { color: #6ee7b7 !important; }

/* Dark toggle button highlight */
html.dark #dark-toggle                   { background-color: #1e3a5f !important; color: #fbbf24 !important; }

/* Colores de nuevas categorías DO */
html.dark .bg-orange-50  { background-color: #431407 !important; }
html.dark .bg-sky-50     { background-color: #082f49 !important; }
html.dark .bg-pink-50    { background-color: #500724 !important; }
html.dark .bg-amber-50   { background-color: #451a03 !important; }
html.dark .bg-cyan-50    { background-color: #083344 !important; }
html.dark .bg-indigo-50  { background-color: #1e1b4b !important; }

/* FAB modal */
html.dark #fab-sheet                    { background-color: #1e293b !important; }
html.dark #fab-sheet .text-gray-900     { color: #f1f5f9 !important; }
html.dark #fab-sheet .text-gray-500     { color: #64748b !important; }
html.dark #fab-sheet .bg-gray-100       { background-color: #334155 !important; }
html.dark #fab-sheet .border-gray-200   { border-color: #334155 !important; }
html.dark #fab-sheet input              { background-color: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; }
html.dark .fab-cat-btn                  { background-color: #1e293b !important; border-color: #334155 !important; }
html.dark .fab-cat-btn.selected         { background-color: #064e3b !important; border-color: #059669 !important; }

/* Modal presupuestos */
html.dark #budget-sheet                    { background-color: #1e293b !important; }
html.dark #budget-sheet .border-gray-100   { border-color: #334155 !important; }
html.dark #budget-sheet .border-gray-200   { border-color: #334155 !important; }
html.dark #budget-sheet .text-gray-700     { color: #e2e8f0 !important; }
html.dark #budget-sheet .bg-gray-50        { background-color: #0f172a !important; }
html.dark #budget-sheet .text-gray-600     { color: #94a3b8 !important; }
html.dark #budget-sheet input              { background-color: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; }

/* Panel filtros historial */
html.dark #tab-historial .bg-white         { background-color: #1e293b !important; }
html.dark #tab-historial .border-gray-100  { border-color: #334155 !important; }
html.dark #tab-historial .border-gray-200  { border-color: #334155 !important; }
html.dark #tab-historial .text-gray-500    { color: #a8b4c4 !important; }
html.dark #tab-historial .text-gray-700    { color: #e2e8f0 !important; }
html.dark #tab-historial input,
html.dark #tab-historial select            { background-color: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; }
html.dark #tab-historial .bg-emerald-50    { background-color: #064e3b !important; }
html.dark #tab-historial .bg-blue-50       { background-color: #172554 !important; }
html.dark #tab-historial .text-emerald-700 { color: #6ee7b7 !important; }
html.dark #tab-historial .text-blue-700    { color: #93c5fd !important; }
html.dark #tab-historial .border-emerald-200 { border-color: #34d399 !important; }
html.dark #tab-historial .border-blue-200  { border-color: #60a5fa !important; }

html.dark .notification-settings-card {
    background: #111b16;
    border-color: #3f4c45;
}
html.dark .notification-setting-row { border-color: #26352d; }
html.dark .notification-setting-row strong { color: #f1f5f9; }
html.dark .notification-setting-row small { color: #a3ada7; }
html.dark .notification-select {
    background: transparent !important;
    border-color: #647067 !important;
    color: #f1f5f9 !important;
}

/* Modal Salario 13 */
html.dark #salary13-sheet                     { background-color: #1e293b !important; }
html.dark #salary13-sheet .border-gray-100    { border-color: #334155 !important; }
html.dark #salary13-sheet .border-gray-200    { border-color: #334155 !important; }
html.dark #salary13-sheet .text-gray-600      { color: #94a3b8 !important; }
html.dark #salary13-sheet .text-gray-700      { color: #e2e8f0 !important; }
html.dark #salary13-sheet .text-gray-800      { color: #f1f5f9 !important; }
html.dark #salary13-sheet .bg-gray-50         { background-color: #0f172a !important; }
html.dark #salary13-sheet .bg-gray-100        { background-color: #253347 !important; }
html.dark #salary13-sheet input               { background-color: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; }
html.dark #salary13-sheet .s13-pct-input      { background-color: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; }
html.dark #salary13-sheet .text-gray-400      { color: #475569 !important; }

/* Gastos fijos / recurrentes */
html.dark #tab-resumen #recurring-form-wrap   { background-color: #0f172a !important; border-color: #334155 !important; }
html.dark #tab-resumen #recurring-list .border-gray-100 { border-color: #334155 !important; }
html.dark #tab-resumen #recurring-form-wrap input,
html.dark #tab-resumen #recurring-form-wrap select { background-color: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; }
html.dark #tab-resumen #recurring-form-wrap input::placeholder { color: #475569 !important; }

/* Controles recurrentes: colores explícitos para no depender del CDN. */
.recurring-icon {
    position: relative;
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #047857;
}
.recurring-icon-cycle {
    position: absolute;
    right: -7px;
    bottom: -5px;
    padding: 2px;
    border-radius: 999px;
    background: #ecfdf5;
    font-size: 7px;
}
.recurring-amount { color: #dc2626; }
.recurring-meta { color: #64748b; font-weight: 600; }
.recurring-pending { background: #fef3c7; color: #92400e; }
.recurring-confirm { background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; }
.recurring-toggle { background: #e5e7eb; color: #475569; }
.recurring-toggle.is-active { background: #d1fae5; color: #047857; }
.recurring-delete { color: #6b7280; }
.recurring-delete:hover { background: #fee2e2; color: #dc2626; }

html.dark .recurring-row { border-color: #475569 !important; }
html.dark .recurring-icon {
    background: #064e3b !important;
    border-color: #34d399 !important;
    color: #a7f3d0 !important;
}
html.dark .recurring-icon-cycle { background: #064e3b; color: #f0fdf4; }
html.dark .recurring-title { color: #f8fafc !important; }
html.dark .recurring-amount { color: #fda4af !important; }
html.dark .recurring-meta { color: #cbd5e1 !important; }
html.dark .recurring-pending { background: #78350f !important; color: #fef3c7 !important; }
html.dark .recurring-confirm {
    background: #fbbf24 !important;
    border-color: #fcd34d !important;
    color: #422006 !important;
}
html.dark .recurring-toggle { background: #334155 !important; color: #e2e8f0 !important; }
html.dark .recurring-toggle.is-active { background: #047857 !important; color: #ecfdf5 !important; }
html.dark .recurring-delete { color: #cbd5e1 !important; }
html.dark .recurring-delete:hover { background: #7f1d1d !important; color: #fecaca !important; }

/* Botón recordatorio activado en dark mode */
html.dark #reminder-btn.text-emerald-600      { background-color: #064e3b !important; }

/* ── FAB CATEGORY BUTTONS ─────────────────────────────────────────── */
.fab-cat-btn { transition: all .18s ease; }
.fab-cat-btn.selected { border-color: #059669 !important; background: #ecfdf5; }

/* ── BALANCE VISIBILITY ─────────────────────────────────────────── */
.balance-hidden #bal-amount,
.balance-hidden #sum-income,
.balance-hidden #sum-expenses {
    filter: blur(10px);
    user-select: none;
    pointer-events: none;
    transition: filter .25s ease;
}
#bal-amount, #sum-income, #sum-expenses  { transition: filter .25s ease; }

/* ── OFFLINE — Indicador de gasto pendiente ──────────────────────── */
/* Punto ámbar animado sobre el emoji de categoría */
.pending-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  background: #f59e0b;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: pendingPulse 1.6s ease-in-out infinite;
}
@keyframes pendingPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.8); }
}
html.dark .pending-dot { border-color: #1e293b; }

/* ── INFINITE SCROLL — Spinner de carga (verde) ──────────────────── */
.spinner-scroll {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(5,150,105,.2);
  border-top-color: #059669;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}

/* ── OPCIÓN B — NUEVAS FUNCIONALIDADES FINANCIERAS ────────────────── */

/* Comparativa, Tendencia, Metas — dark mode */
html.dark #comparativa-card,
html.dark #tab-resumen .bg-gray-50 { background-color: #0f172a !important; }

html.dark #goals-list .bg-gray-50  { background-color: #1e293b !important; }
html.dark #goals-list .bg-emerald-50 { background-color: #052e16 !important; }
html.dark #goals-list .border-gray-100 { border-color: #334155 !important; }
html.dark #goals-list .bg-white    { background-color: #0f172a !important; border-color: #334155 !important; }
html.dark #goals-list .text-gray-800 { color: #f1f5f9 !important; }
html.dark #goals-list .text-gray-700 { color: #cbd5e1 !important; }
html.dark #goals-list .text-gray-500 { color: #64748b !important; }
html.dark #goals-list .bg-gray-200  { background-color: #334155 !important; }

/* Modal metas dark */
html.dark #goal-overlay > div,
html.dark #deposit-overlay > div { background-color: #1e293b !important; }
html.dark #goal-overlay input,
html.dark #deposit-overlay input  { background-color: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; }
html.dark #goal-overlay .border-t,
html.dark #deposit-overlay .border-t { border-color: #334155 !important; }
html.dark .goal-emoji-btn { background-color: #1e293b !important; border-color: #334155 !important; }
html.dark .goal-emoji-btn.border-emerald-400 { background-color: #052e16 !important; }

/* Comparativa dark */
html.dark #comparativa-body .text-gray-800 { color: #f1f5f9 !important; }
html.dark #comparativa-body .text-gray-600 { color: #94a3b8 !important; }
html.dark #comparativa-body .bg-gray-100   { background-color: #334155 !important; }

/* ── OPCIÓN C — ENGAGEMENT: ONBOARDING + RESUMEN SEMANAL ─────────── */

/* Dot activo más ancho (efecto "pill") */
.onboard-dot { transition: all .25s ease; }

/* Onboarding dark */
html.dark #onboard-sheet        { background-color: #1e293b !important; }
html.dark #onboard-sheet .text-gray-900 { color: #f1f5f9 !important; }
html.dark #onboard-sheet .text-gray-500 { color: #64748b !important; }
html.dark #onboard-sheet .border-gray-200 { border-color: #334155 !important; }
html.dark #onboard-sheet .bg-gray-50   { background-color: #0f172a !important; }
html.dark #onboard-sheet .text-gray-500.bg-gray-50 { color: #94a3b8 !important; }

/* Resumen semanal dark */
html.dark #weekly-overlay > div  { background-color: #1e293b !important; }
html.dark #weekly-body .bg-gray-50 { background-color: #0f172a !important; }
html.dark #weekly-body .text-gray-800 { color: #f1f5f9 !important; }
html.dark #weekly-body .text-gray-500 { color: #64748b !important; }
html.dark #weekly-body .border-gray-100 { border-color: #334155 !important; }
html.dark #weekly-overlay .border-t { border-color: #334155 !important; }
html.dark #weekly-msg { color: #64748b !important; }