:root {
            --bg-color: #000000; --card-bg: rgba(28,28,30,0.65); --sheet-bg: #111111; --input-bg: rgba(255,255,255,0.08);
            --primary: #FFB68C; --primary-dark: #a855f7; --accent: #3b82f6; --danger: #ef4444;
            /* Importes: color que flipea con el tema (I-16). Oscuro: melocotón/rojo
               sobre tarjeta oscura. Claro: versiones oscuras legibles sobre blanco. */
            --amount-pos: #FFB68C; --amount-neg: #f87171;
            --whatsapp: #25D366; --shein: #f43f5e; --wish: #a855f7; --trips: #f59e0b;
            --text-main: #ffffff; --text-sec: #a1a1aa; --border: rgba(255,255,255,0.1);
            --app-logo: url('/logo.png');
            /* Type scale */
            --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
            --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem;
            /* Spacing */
            --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
            /* Radius */
            --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px;
            /* Shadows */
            --shadow-sm: 0 1px 4px rgba(0,0,0,0.35); --shadow-md: 0 4px 18px rgba(0,0,0,0.45); --shadow-lg: 0 8px 36px rgba(0,0,0,0.55);
        }
        body.light-mode {
            --bg-color: #f2f2f7; --card-bg: rgba(255,255,255,0.90); --input-bg: rgba(0,0,0,0.05);
            --text-main: #1c1c1e; --text-sec: #8e8e93; --border: rgba(0,0,0,0.08);
            --amount-pos: #c2410c; --amount-neg: #dc2626;
            --shadow-md: 0 4px 18px rgba(0,0,0,0.12); --shadow-lg: 0 8px 36px rgba(0,0,0,0.18);
        }
        * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
        h1, h2, h3 { letter-spacing: -0.3px; }
        strong { font-weight: 700; }
        body { background-color: var(--bg-color); color: var(--text-main); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; margin: 0; padding: 0; padding-top: env(safe-area-inset-top); padding-bottom: calc(100px + env(safe-area-inset-bottom)); transition: background-color 0.3s, color 0.3s; overscroll-behavior: none; }

        #loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        #loader.hidden { display: none; }
        #loader .splash-logo { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 18px; animation: splashPop 0.5s cubic-bezier(0.34,1.4,0.64,1) both; }
        #loader .splash-name { font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: -0.5px; animation: splashFade 0.5s ease 0.15s both; }
        #loader .splash-tag { font-size: 0.9rem; color: #8e8e93; margin-top: 6px; animation: splashFade 0.5s ease 0.25s both; }
        #loader .splash-dots { display: flex; gap: 6px; margin-top: 48px; animation: splashFade 0.5s ease 0.35s both; }
        #loader .splash-dots span { width: 6px; height: 6px; border-radius: 50%; background: #FF8FB1; animation: dotPulse 1.2s ease infinite; }
        #loader .splash-dots span:nth-child(2) { animation-delay: 0.2s; }
        #loader .splash-dots span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes splashPop { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
        @keyframes splashFade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
        @keyframes dotPulse { 0%,100% { opacity:0.3; transform:scale(0.8); } 50% { opacity:1; transform:scale(1.2); } }
        @keyframes spin { to { transform: rotate(360deg); } }

        .screen { display: none; padding: 20px; animation: fadeIn 0.3s cubic-bezier(0.16,1,0.3,1); }
        .screen.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
        @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
        @keyframes popIn { 0%{transform:scale(0.8);opacity:0} 60%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
        @keyframes pulseRing { 0%{box-shadow:0 0 0 0 rgba(255,143,177,0.6),0 4px 16px rgba(255,143,177,0.45)} 70%{box-shadow:0 0 0 12px rgba(255,143,177,0),0 4px 16px rgba(255,143,177,0.45)} 100%{box-shadow:0 0 0 0 rgba(255,143,177,0),0 4px 16px rgba(255,143,177,0.45)} }
        @keyframes adPulse { 0%{box-shadow:0 0 0 0 rgba(255,153,0,0.55)} 70%{box-shadow:0 0 0 9px rgba(255,153,0,0)} 100%{box-shadow:0 0 0 0 rgba(255,153,0,0)} }
        @keyframes barShimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
        @keyframes dreamPop { 0%{opacity:0;transform:scale(0.93) translateY(12px)} 60%{transform:scale(1.01) translateY(-2px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
        @keyframes aiSlideUp { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
        @keyframes aiMsgIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
        @keyframes aiPulse { 0%,100%{opacity:0.4;transform:scale(0.85)} 50%{opacity:1;transform:scale(1)} }
        @keyframes aiSparkle { 0%{box-shadow:0 0 0 0 rgba(168,85,247,0.5),0 4px 16px rgba(168,85,247,0.4)} 70%{box-shadow:0 0 0 12px rgba(168,85,247,0),0 4px 16px rgba(168,85,247,0.4)} 100%{box-shadow:0 0 0 0 rgba(168,85,247,0),0 4px 16px rgba(168,85,247,0.4)} }
        #ai-fab { position:fixed; bottom:96px; right:16px; width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#7c3aed,#a855f7); color:white; border:none; font-size:1.3rem; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:99; box-shadow:0 4px 16px rgba(168,85,247,0.4); transition:transform 0.2s; animation:aiSparkle 2s ease-out 3; }
        #ai-fab:active { transform:scale(0.92); }
        #ai-fab.quiet { animation:none; }
        #modal-ai { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; background:var(--bg-color); transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); }
        #modal-ai.active { transform:translateY(0); }
        #ai-messages { flex:1; overflow-y:auto; padding:16px 16px 8px; display:flex; flex-direction:column; gap:10px; }
        .ai-msg-user { align-self:flex-end; background:linear-gradient(135deg,#7c3aed,#a855f7); color:white; border-radius:18px 18px 4px 18px; padding:10px 14px; max-width:80%; font-size:0.9rem; line-height:1.45; animation:aiMsgIn 0.25s ease; }
        .ai-msg-bot { align-self:flex-start; background:var(--card-bg); border:1px solid var(--border); color:var(--text-main); border-radius:18px 18px 18px 4px; padding:10px 14px; max-width:85%; font-size:0.9rem; line-height:1.45; animation:aiMsgIn 0.25s ease; }
        .ai-msg-bot.thinking { display:flex; gap:5px; align-items:center; padding:12px 16px; }
        .ai-dot { width:7px; height:7px; border-radius:50%; background:#a855f7; animation:aiPulse 1.2s ease-in-out infinite; }
        .ai-dot:nth-child(2) { animation-delay:0.2s; }
        .ai-dot:nth-child(3) { animation-delay:0.4s; }
        #ai-chips { display:flex; gap:8px; flex-wrap:wrap; padding:8px 16px; }
        .ai-chip { background:rgba(168,85,247,0.08); border:1px solid rgba(168,85,247,0.2); color:#a855f7; border-radius:20px; padding:7px 14px; font-size:0.78rem; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background 0.15s; }
        .ai-chip:active { background:rgba(168,85,247,0.2); }
        #ai-input-row { display:flex; gap:10px; padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--card-bg); }
        #ai-input { flex:1; background:var(--input-bg); border:1px solid var(--border); border-radius:22px; padding:10px 16px; font-size:0.92rem; color:var(--text-main); outline:none; }
        #ai-send { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#7c3aed,#a855f7); color:white; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; font-size:1rem; transition:transform 0.15s; }
        #ai-send:active { transform:scale(0.9); }
        #ai-send:disabled { opacity:0.4; }
        @keyframes milestonePop { 0%{opacity:0;transform:scale(0.7)} 70%{transform:scale(1.12)} 100%{opacity:1;transform:scale(1)} }
        @keyframes celebrationSlide { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
        .fab-pulse { animation: pulseRing 1.5s ease-out infinite !important; }
        /* ── Mascota Fase 1 — animaciones reutilizadas del sistema de imagen fija
           del prototipo (autonomia/mascotas/prototipo/index.html): respirar y
           aparecer/desaparecer (DEC-087, se descarta el muñeco de capas para v1) ── */
        @keyframes petBreathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }
        .pet-breathe { animation: petBreathe 3.2s ease-in-out infinite; }
        @keyframes petAppear { from{opacity:0;transform:scale(0.85)} to{opacity:1;transform:scale(1)} }
        .pet-appear { animation: petAppear 0.45s cubic-bezier(0.16,1,0.3,1) both; }
        /* Zzz flotante cuando la mascota esta dormida -- para que se note sin leer texto */
        @keyframes petZzzFloat { 0%{opacity:0;transform:translateY(0) scale(0.7)} 15%{opacity:1} 85%{opacity:1} 100%{opacity:0;transform:translateY(-14px) scale(1.1)} }
        .pet-zzz { position:absolute; top:-2px; right:-4px; font-size:1rem; line-height:1; animation: petZzzFloat 2.4s ease-in-out infinite; pointer-events:none; }
        .pet-zzz-lg { top:4px; right:6px; font-size:1.6rem; }
        /* Aura de fuego al acariciar a Chispi cuando esta contenta */
        @keyframes petAuraPulse { 0%{opacity:0;transform:translate(-50%,-50%) scale(0.7)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)} }
        .pet-aura { position:absolute; top:50%; left:50%; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle, rgba(255,159,64,0.55) 0%, rgba(255,94,58,0.35) 45%, transparent 75%); z-index:0; pointer-events:none; animation: petAuraPulse 1.1s ease-out; }
        @keyframes petPetBounce { 0%,100%{transform:scale(1) rotate(0)} 25%{transform:scale(1.12) rotate(-4deg)} 50%{transform:scale(0.96) rotate(3deg)} 75%{transform:scale(1.06) rotate(-2deg)} }
        .pet-petted { animation: petPetBounce 0.6s ease-in-out; }
        /* Empty state home */
        #home-empty-state { display:none; text-align:center; padding:32px 20px 26px; background:rgba(255,143,177,0.04); border-radius:28px; margin-bottom:18px; border:1px solid rgba(255,143,177,0.15); animation: slideInUp 0.4s cubic-bezier(0.16,1,0.3,1) both; position:relative; overflow:hidden; }
        #home-empty-state::before { content:''; position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:160px; height:160px; background:radial-gradient(ellipse,rgba(255,143,177,0.12) 0%,transparent 70%); pointer-events:none; }
        #home-empty-state .empty-icon { width:56px; height:56px; border-radius:18px; background:linear-gradient(135deg,rgba(255,143,177,0.2),rgba(255,143,177,0.08)); border:1px solid rgba(255,143,177,0.25); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:1.6rem; position:relative; }
        #home-empty-state h3 { margin:0 0 8px; font-size:1.15rem; font-weight:800; color:var(--text-main); }
        #home-empty-state p { margin:0 0 22px; font-size:0.875rem; color:var(--text-sec); line-height:1.6; }
        #home-empty-state .btn-first-expense { background:linear-gradient(135deg,#FFB68C,#FF8FB1); color:#2a1810; border:none; padding:16px 20px; border-radius:18px; width:100%; font-weight:800; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 6px 20px rgba(255,143,177,0.35); transition:opacity 0.15s,transform 0.12s; position:relative; }
        #home-empty-state .btn-first-expense:active { opacity:0.85; transform:scale(0.97); }

        .card { animation: slideInUp 0.35s cubic-bezier(0.16,1,0.3,1) both; }
        .card:nth-child(1){animation-delay:0s} .card:nth-child(2){animation-delay:0.04s} .card:nth-child(3){animation-delay:0.08s} .card:nth-child(4){animation-delay:0.12s}
        .balance-hero { animation: scaleIn 0.4s cubic-bezier(0.16,1,0.3,1) both; }
        .chip { transition: all 0.18s cubic-bezier(0.16,1,0.3,1); }
        .chip.selected { animation: popIn 0.22s cubic-bezier(0.16,1,0.3,1); }
        .tab-btn { transition: color 0.2s, transform 0.2s; }
        .tab-btn.active { animation: popIn 0.22s cubic-bezier(0.16,1,0.3,1); }
        .tab-fab-center button { transition: transform 0.2s, background 0.3s, box-shadow 0.3s; }
        .tab-fab-center button:hover { transform: translateY(-22px) scale(1.08); }
        .modal.active { animation: slideUp 0.32s cubic-bezier(0.16,1,0.3,1); }
        .numpad-btn { transition: background 0.1s, transform 0.08s, color 0.1s; }
        .numpad-btn:active { transform: scale(0.90) !important; }
        .btn { transition: opacity 0.15s, transform 0.12s; }
        .btn:active { transform: scale(0.97); }
        .btn-google:active { transform: scale(0.97); }
        .swipe-content { transition: transform 0.28s cubic-bezier(0.16,1,0.3,1); }
        .wish-item { transition: all 0.28s cubic-bezier(0.16,1,0.3,1); }
        #loader .spinner { animation: spin 0.7s linear infinite; }
        /* Skeleton loader para listas */
        .skeleton { background: linear-gradient(90deg, var(--input-bg) 25%, rgba(255,255,255,0.08) 50%, var(--input-bg) 75%); background-size:200% 100%; animation: shimmer 1.4s infinite; border-radius:12px; }
        .skeleton-hero { height: 140px; border-radius: 32px; margin-bottom: 25px; }
        .skeleton-card { height: 80px; border-radius: 28px; margin-bottom: 14px; }
        .skeleton-row { height: 52px; border-radius: 16px; margin-bottom: 10px; }

        .top-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }

        .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 85px; background: rgba(10,10,12,0.82); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-around; align-items: flex-start; padding-top: 10px; padding-bottom: env(safe-area-inset-bottom); z-index: 100; }
        .tab-btn { background: none; border: none; color: var(--text-sec); font-size: 0.7rem; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 52px; transition: all 0.2s; cursor: pointer; flex: 1; }
        .tab-btn.active { transform: translateY(-2px); font-weight: bold; }
        .tab-btn i { font-size: 1.2rem; }
        /* Dock: un color propio por sección, nada de verde compartido (8 sep 2026).
           Iconos emoji — mismo lenguaje visual que el resto de la app — apagados
           en gris cuando la pestaña no está activa, a todo color cuando sí. */
        .tab-ic-wrap { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 12px; transition: background 0.2s; }
        .tab-ic { font-size: 1.28rem; line-height: 1; filter: grayscale(1) opacity(0.55); transition: filter 0.2s; }
        .tab-btn.active .tab-ic { filter: none; }
        .tab-home.active { color: #22d3ee; }
        .tab-home.active .tab-ic-wrap { background: rgba(56,189,248,0.14); }
        .tab-dreams.active { color: #a855f7; }
        .tab-dreams.active .tab-ic-wrap { background: rgba(168,85,247,0.14); }
        .tab-history.active { color: #FF8FB1; }
        .tab-history.active .tab-ic-wrap { background: rgba(255,143,177,0.16); }
        .tab-settings.active { color: #FFC46B; }
        .tab-settings.active .tab-ic-wrap { background: rgba(255,196,107,0.16); }
        .tab-fab-center { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding-top: 0; position: relative; }
        .tab-fab-center button { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #FFB68C, #FF8FB1); color: #2a1810; border: 3px solid var(--bg-color); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 4px 16px rgba(255,143,177,0.4); cursor: pointer; transition: transform 0.2s; margin-top: -20px; }
        .tab-fab-center button:active { transform: scale(0.92); }

        .qa-tile { transition: transform 0.15s; }
        .qa-tile:active { transform: scale(0.97); }
        .qa-round-btn { transition: transform 0.15s; }
        .qa-round-btn:active { transform: scale(0.93); }
        .qa-round-btn::before { content:''; position:absolute; top:0; left:14%; right:14%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent); }

        @keyframes qa-wm-spin { from{ transform:rotate(8deg) scale(1); opacity:0.07; } 40%{ transform:rotate(200deg) scale(1.15); opacity:0.16; } to{ transform:rotate(368deg) scale(1); opacity:0.07; } }
        .qa-tile.qa-anim .qa-wm { animation: qa-wm-spin 0.55s ease-out; }

        /* Moneda de "Suscripciones": gira sola, sin necesidad de tocar. rotateY simula
           el giro de una moneda real (de canto en los 90°/270°); la insignia ↻ no gira
           con ella, como una pegatina fija sobre la moneda. */
        .qa-coin-wrap { perspective: 240px; }
        @keyframes qa-coin-idle-spin { from{ transform:rotateY(0deg); } to{ transform:rotateY(360deg); } }
        .qa-coin-wrap svg { animation: qa-coin-idle-spin 3.4s linear infinite; }
        @media (prefers-reduced-motion: reduce) {
            .qa-tile.qa-anim .qa-wm { animation: none; }
            .qa-coin-wrap svg { animation: none; }
        }

        /* AJUSTES: tarjetas agrupadas desplegables (3 oct 2026). Las tarjetas de dentro
           conservan sus ids y manejadores; solo se aplanan visualmente a "filas". */
        .sg { border-radius: 22px; margin: 0 0 12px; border: 1px solid var(--sg-bc); background: var(--sg-bg); overflow: hidden; }
        .sg-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; background: none; border: none; color: var(--text-main); text-align: left; cursor: pointer; font-family: inherit; border-radius: 0; box-shadow: none; }
        .sg-tile { width: 46px; height: 46px; border-radius: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--sg-tile); color: #fff; font-size: 1.15rem; }
        .sg-txt { flex: 1; min-width: 0; }
        .sg-title { font-weight: 800; font-size: 0.98rem; line-height: 1.25; }
        .sg-sum { font-size: 0.78rem; color: var(--text-sec); margin-top: 2px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .sg-chev { color: var(--text-sec); transition: transform 0.25s; font-size: 0.9rem; flex-shrink: 0; }
        .sg.open .sg-chev { transform: rotate(180deg); }
        .sg-av { display: flex; flex-shrink: 0; }
        .sg-av span { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: #fff; border: 2px solid var(--card-bg); }
        .sg-av span + span { margin-left: -9px; }
        .sg-body { display: none; }
        .sg.open .sg-body { display: block; animation: fadeIn 0.25s; }
        .sg-body > * { margin: 0 !important; border: none !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; backdrop-filter: none !important; animation: none !important; padding: 14px 16px !important; }
        .sg-body > #settings-premium-card > div { border-radius: 16px; }
        .sg-body input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 44px !important; height: 26px !important; border-radius: 13px; background: rgba(128,128,128,0.35); position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.2s; border: none; padding: 0; }
        .sg-body input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
        .sg-body input[type="checkbox"]:checked { background: #0ec47a; }
        .sg-body input[type="checkbox"]:checked::after { left: 21px; }
        .card { background: var(--card-bg); border-radius: 28px; padding: 22px; margin-bottom: 18px; border: 1px solid var(--border); backdrop-filter: blur(16px); box-shadow: var(--shadow-md); transition: background 0.3s, border 0.3s; }
        #home-recent-list.card { box-shadow: var(--shadow-md); }
        #home-recent-list.card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#FFB68C,#FF8FB1); }

        /* ── Racha (streak) — nunca tuvo CSS real (bug preexistente: el único bloque
           con estos nombres vivía muerto dentro de la plantilla de exportar/imprimir,
           sin usarse ahí tampoco). Estilo nuevo aquí, con el mismo acento melocotón→rosa. */
        .streak-widget { background: var(--card-bg); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: var(--shadow-md); animation: slideInUp 0.4s ease; }
        .streak-widget::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#FFB68C,#FF8FB1); }
        .streak-main-row { display: flex; align-items: center; gap: 12px; }
        .streak-fire { font-size: 2rem; animation: fireFlicker 1.5s ease-in-out infinite alternate; flex-shrink: 0; }
        @keyframes fireFlicker { from{ transform:scale(1) rotate(-3deg); } to{ transform:scale(1.1) rotate(3deg); } }
        .streak-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
        .streak-count { font-size: 1.7rem; font-weight: 800; color: #FF8FB1; line-height: 1; }
        .streak-label { font-size: 0.68rem; color: var(--text-sec); margin-left: 4px; font-weight: 600; }
        .streak-this-week { font-size: 0.65rem; color: var(--text-sec); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .streak-points { font-size: 0.78rem; font-weight: 700; color: #FFB68C; background: rgba(255,182,140,0.12); padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,182,140,0.25); white-space: nowrap; flex-shrink: 0; }
        .streak-progress-bar { height: 2px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; margin-top: 12px; }
        .streak-progress-fill { height: 100%; background: linear-gradient(90deg,#FFB68C,#FF8FB1); border-radius: 999px; transition: width 0.6s ease; }
        .balance-hero { background: rgba(18,18,20,0.9); color: white; text-align: left; padding: 24px; border-radius: 32px; margin-bottom: 18px; border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 2px 0 rgba(255,143,177,0.55) inset, 0 0 60px rgba(255,143,177,0.06), var(--shadow-lg); backdrop-filter: blur(20px); position: relative; overflow: hidden; transition: background 0.4s; }
        .balance-hero::before { content:''; position:absolute; top:-30px; right:-30px; width:160px; height:160px; background:radial-gradient(ellipse,rgba(255,143,177,0.12) 0%,transparent 70%); pointer-events:none; }
        .balance-hero h1 { font-size: 3rem; margin: 8px 0 4px; font-weight: 800; letter-spacing: -2px; line-height: 1; color: #fff; position: relative; }
        /* Fondo personalizable de la tarjeta — el overlay oscuro es obligatorio, no decorativo:
           sostiene el contraste del texto blanco sobre CUALQUIER foto, de stock o subida. */
        .balance-hero.has-custom-bg { background-image: linear-gradient(180deg, rgba(10,11,10,0.35) 0%, rgba(8,9,8,0.72) 62%, rgba(6,7,6,0.9) 100%), var(--bh-img); background-size: cover; background-position: center; }
        /* Con foto de fondo, números y botones necesitan resaltar pase lo que pase la foto: */
        .balance-hero.has-custom-bg #home-debt-context,
        .balance-hero.has-custom-bg #total-month-display,
        .balance-hero.has-custom-bg #home-balance-detail { text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 2px 16px rgba(0,0,0,0.5); }
        .balance-hero.has-custom-bg .btn-settle-done,
        .balance-hero.has-custom-bg #home-share-btn button { background: rgba(8,9,8,0.55); border-color: rgba(255,255,255,0.24); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
        .balance-hero.has-custom-bg .btn-settle-pay,
        .balance-hero.has-custom-bg #balance-bg-btn { box-shadow: 0 3px 12px rgba(0,0,0,0.5); }
        .balance-hero.has-custom-bg .sync-status { background: rgba(0,0,0,0.5); }
        .bg-swatch { aspect-ratio:3/2; border-radius:16px; border:2px solid transparent; background-size:cover; background-position:center; cursor:pointer; position:relative; padding:0; font-family:inherit; }
        .bg-swatch.selected { border-color: var(--primary); }
        .bg-swatch .check { position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.65rem; }
        .bg-swatch.locked { display:flex; align-items:center; justify-content:center; background:var(--input-bg); background-size:cover; background-position:center; color:var(--text-sec); font-size:0.62rem; text-align:center; padding:6px; line-height:1.3; }
        .bg-swatch.locked i { font-size:0.95rem; }
        .bg-swatch.locked .locked-label { display:flex; flex-direction:column; align-items:center; gap:4px; }
        .bg-swatch.locked[style*="background-image"] .locked-label { background:rgba(0,0,0,0.55); border-radius:10px; padding:5px 7px; color:#fff; }


        .debt-bar-wrapper { width: 100%; height: 6px; background: rgba(255,255,255,0.06); border-radius: 20px; margin: 12px 0; overflow: hidden; display: flex; position: relative; }
        .debt-bar-left { height: 100%; background: linear-gradient(90deg, var(--primary), #06d6a0); transition: width 0.6s cubic-bezier(0.16,1,0.3,1); border-radius: 20px; }
        .debt-bar-right { height: 100%; background: linear-gradient(90deg, #6366f1, var(--accent)); transition: width 0.6s cubic-bezier(0.16,1,0.3,1); border-radius: 20px; }
        .debt-marker { position: absolute; left: 50%; top: -3px; width: 2px; height: 12px; background: var(--bg-color); opacity: 0.8; }
        .user-balance-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 1.05rem; }
        .user-balance-row:last-child { border-bottom: none; }
        .money-pos { color: var(--primary); font-weight: 700; }
        .money-neg { color: var(--danger); font-weight: 700; }

        /* ── Confirmacion tras guardar un gasto: avatares que chocan (Sincronia) ── */
        #expense-confirm-anim { position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; pointer-events:none; }
        .xc-avatar { position:absolute; top:50%; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden; font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.15rem; color:#fff; transition:all 0.5s cubic-bezier(.34,1.56,.64,1); box-shadow:0 8px 22px rgba(0,0,0,0.35); }
        .xc-avatar img { width:100%; height:100%; object-fit:cover; }
        .xc-avatar.me { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); }
        .xc-avatar.partner { background:linear-gradient(135deg,#3b82f6,#2a63c9); }
        .xc-ring { position:absolute; top:50%; left:50%; width:52px; height:52px; border-radius:50%; border:1.5px solid var(--primary); transform:translate(-50%,-50%) scale(0.4); opacity:0; transition:all 0.45s ease-out; }
        #home-debt-amount { transition: transform 0.25s cubic-bezier(.34,1.56,.64,1); }
        #home-status-card { transition: box-shadow 0.35s ease-out; }

        /* ── FABs — Sistema unificado ─────────────────────────── */
        button.fab { position: fixed; bottom: calc(108px + env(safe-area-inset-bottom)); right: 18px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: 0 8px 22px rgba(255,143,177,0.45); z-index: 99; border: none; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; }
        button.fab:active { transform: scale(0.90); box-shadow: 0 4px 12px rgba(255,143,177,0.3); }
        .fab-affiliate { display: none !important; }

        /* ── FAB Feedback ─────────────────────────────────────── */
        #fab-feedback { display: none; position: fixed; bottom: calc(108px + env(safe-area-inset-bottom)); left: 18px; width: 46px; height: 46px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border); color: var(--text-sec); font-size: 1.3rem; box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 99; cursor: pointer; align-items: center; justify-content: center; transition: transform 0.18s, opacity 0.18s; backdrop-filter: blur(10px); }
        #fab-feedback:active { transform: scale(0.92); }
        /* ── Modal Feedback ───────────────────────────────────── */
        #modal-feedback { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--card-bg); backdrop-filter: blur(20px); border-radius: 28px 28px 0 0; border-top: 1px solid var(--border); padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); z-index: 300; animation: slideUp 0.3s cubic-bezier(0.16,1,0.3,1); }
        #modal-feedback.active { display: block; }
        #modal-feedback h3 { margin: 0 0 16px; font-size: 1.1rem; font-weight: 800; color: var(--text-main); }
        #modal-feedback textarea { background: var(--input-bg); border: 1px solid var(--border); color: var(--text-main); padding: 14px; border-radius: 14px; width: 100%; box-sizing: border-box; font-size: 0.95rem; resize: none; height: 100px; outline: none; font-family: inherit; margin-bottom: 14px; transition: border-color 0.2s; }
        #modal-feedback textarea:focus { border-color: var(--primary); }
        .feedback-chips { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
        .feedback-chip { padding: 8px 14px; background: var(--input-bg); border-radius: 20px; border: 1px solid var(--border); font-size: 0.88rem; cursor: pointer; color: var(--text-main); transition: all 0.18s; }
        .feedback-chip.selected { background: linear-gradient(135deg,#FFB68C,#FF8FB1); color: #2a1810; border-color: transparent; font-weight: 700; }
        .feedback-actions { display: flex; gap: 10px; }
        .feedback-actions .btn { flex: 1; padding: 14px; }

        input, select, textarea { background: var(--input-bg); border: 1px solid var(--border); color: var(--text-main); padding: 16px; border-radius: 16px; width: 100%; box-sizing: border-box; font-size: 1.05rem; margin-bottom: 18px; outline: none; transition: border-color 0.2s; }
        input:focus, select:focus { border-color: var(--primary); }
        select option { background: #1c1c1e; color: #ffffff; }
        body.light-mode select option { background: #ffffff; color: #1c1c1e; }
        .btn { background: var(--primary); color: white; border: none; padding: 18px; border-radius: 18px; width: 100%; font-weight: bold; font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.2s; }
        .btn:active { opacity: 0.8; }
        .btn-outline { background: var(--input-bg); border: 1px solid var(--border); color: var(--text-main); }
        .btn-danger { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: var(--danger); width: auto; padding: 10px 14px; font-size: 0.9rem; border-radius: 12px; cursor: pointer; }
        .btn-sm { padding: 8px 14px; font-size: 0.9rem; width: auto; border-radius: 12px; }

        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(15px); z-index: 200; padding: 25px; padding-top: calc(25px + env(safe-area-inset-top)); box-sizing: border-box; animation: slideUp 0.3s cubic-bezier(0.16,1,0.3,1); overflow-y: auto; }
        body.light-mode .modal { background: rgba(255,255,255,0.7); }
        .modal.active { display: block; }
        @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

        .chip-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
        .chip { padding: 10px 16px; background: var(--input-bg); border-radius: 20px; border: 1px solid var(--border); font-size: 0.9rem; cursor: pointer; display: flex; gap: 6px; align-items: center; transition: all 0.2s; color: var(--text-main); }
        .chip.selected { background: var(--primary); color: #2a1810; border-color: var(--primary); font-weight: bold; }
        .chip-del { margin-left: 5px; background: rgba(0,0,0,0.2); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; }

        .check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
        .check-item { background: var(--input-bg); padding: 14px; border-radius: 16px; border: 1px solid var(--border); display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.95rem; transition: all 0.2s; }
        .check-item.checked { border-color: var(--primary); background: rgba(255,143,177,0.15); font-weight: bold; }
        .sub-split-pct { margin-left: auto; font-size: 0.8rem; font-weight: 800; color: #FF8FB1; }
        .sub-split-pct-input { width: 52px; text-align: right; background: transparent; border: none; color: #FF8FB1; font-weight: 800; font-size: 0.9rem; padding: 0; margin: 0 0 0 auto; }
        .sub-split-pct-input:focus { outline: none; }
        #sub-amount-input { font-size: 3rem; font-weight: 800; color: var(--text-main); text-align: right; background: transparent; border: none; outline: none; width: 55%; max-width: 200px; letter-spacing: -2px; padding: 0; caret-color: #FFC46B; -webkit-tap-highlight-color: transparent; }
        #sub-amount-input::placeholder { color: rgba(255,196,107,0.3); }

        /* ── HISTORIAL — groups, items ──────────────────────────── */
        details { background: var(--card-bg); border-radius: 28px; margin-bottom: 18px; border: 1px solid var(--border); }
        summary { padding: 18px; font-weight: bold; font-size: 1.1rem; cursor: pointer; outline: none; list-style: none; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 10; background: var(--card-bg); border-radius: 28px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 2px 0 var(--primary); }
        summary::-webkit-details-marker { display: none; }
        summary:after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--text-sec); transition: transform 0.3s; }
        details[open] summary:after { transform: rotate(180deg); }
        details[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px solid var(--border); box-shadow: inset 0 2px 0 var(--primary); }

        .swipe-item { position: relative; border-bottom: 1px solid var(--border); overflow: hidden; background: var(--card-bg); }
        .swipe-item:last-child { border-bottom: none; border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; }
        .swipe-content { position: relative; z-index: 2; background: var(--card-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); will-change: transform; }
        .swipe-delete-bg { position: absolute; right: 0; top: 0; bottom: 0; width: 88px; background: linear-gradient(135deg, #ef4444, #dc2626); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: white; cursor: pointer; z-index: 1; }
        .swipe-delete-bg i { font-size: 1.1rem; }
        .swipe-delete-bg span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.3px; }
        .expense-icon-modern { width: 44px; height: 44px; background: linear-gradient(135deg, rgba(255,143,177,0.12), rgba(255,143,177,0.04)); border: 1px solid rgba(255,143,177,0.15); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-right: 14px; font-size: 1.25rem; flex-shrink: 0; }
        .note-badge { background:none;border:none;color:var(--text-sec);font-size:0.78rem;padding:2px 4px;cursor:pointer;flex-shrink:0;vertical-align:1px; }
        .expense-note-box { display:none;margin:4px 0 8px 58px;padding:8px 12px;background:var(--input-bg);border:1px solid var(--border);border-radius:12px;font-size:0.8rem;color:var(--text-sec);line-height:1.5; }
        .expense-note-box.open { display:block; }
        .expense-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border); }
        .expense-row:last-child { border-bottom: none; }

        .wish-item { display: flex; align-items: center; justify-content: space-between; padding: 18px; background: var(--card-bg); border-radius: 20px; margin-bottom: 12px; border: 1px solid var(--border); border-left: 4px solid var(--wish); transition: all 0.3s; }
        .wish-item.bought { opacity: 0.4; border-left-color: var(--primary); filter: grayscale(100%); }
        .math-row { display: flex; justify-content: space-between; font-size: 0.95rem; color: var(--text-sec); padding: 6px 0; }
        .settlement-card { background: rgba(37,211,102,0.1); border: 1px solid var(--whatsapp); border-radius: 20px; padding: 15px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }


        /* ── TECLADO NUMÉRICO PROPIO ────────────────────────────── */
        .numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 18px; }
        .numpad-btn {
            background: rgba(255,255,255,0.06); border: none;
            color: var(--text-main); font-size: 1.6rem; font-weight: 500;
            padding: 18px 0; border-radius: 20px; cursor: pointer;
            transition: background 0.1s, transform 0.08s;
            -webkit-tap-highlight-color: transparent; user-select: none;
        }
        .numpad-btn:active { background: var(--primary); color: #000; transform: scale(0.93); }
        .numpad-btn.numpad-del { font-size: 1.3rem; background: rgba(239,68,68,0.08); color: var(--danger); }
        .numpad-btn.numpad-del:active { background: var(--danger); color: white; }
        .numpad-btn.numpad-zero { grid-column: span 1; }

        /* ── MODAL CONFIRM/ALERT/PROMPT PROPIO ─────────────────── */
        #modal-confirm { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75); backdrop-filter:blur(16px); z-index:9999; display:none; align-items:center; justify-content:center; padding:30px; box-sizing:border-box; }
        #modal-confirm.active { display:flex; animation: fadeIn 0.2s ease; }
        .confirm-box { background:var(--card-bg); border-radius:24px; padding:28px; width:100%; max-width:340px; border:1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
        .confirm-box h3 { margin:0 0 10px; font-size:1.1rem; font-weight:800; color:var(--text-main); }
        .confirm-box p { margin:0 0 22px; color:var(--text-sec); font-size:0.95rem; line-height:1.5; }
        .confirm-actions { display:flex; gap:10px; }
        #confirm-ok-btn { background:linear-gradient(135deg,#FFB68C,#FF8FB1); color:#2a1810; }
        #confirm-prompt-row { margin-bottom:18px; }
        #confirm-prompt-row input { margin:0; }

        /* Banner unificado — Peso 1 (aviso). Flota en el centro, no abajo del todo,
           sobre un velo suave que NO bloquea el tap (a diferencia de Peso 2/3, que
           sí bloquean porque piden una respuesta real). Ver DEC de sesión 11 sep. */
        #toast-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 299; opacity: 0; visibility: hidden; transition: opacity 0.25s; pointer-events: none; }
        #toast-backdrop.show { opacity: 1; visibility: visible; }
        #toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.94); width: calc(100% - 48px); max-width: 300px; box-sizing: border-box; background: var(--card-bg); border: 1px solid var(--border); color: var(--text-main); padding: 16px; border-radius: 20px; opacity: 0; visibility: hidden; transition: opacity 0.22s, transform 0.22s cubic-bezier(0.16,1,0.3,1), visibility 0.22s; z-index: 300; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
        #toast.show { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
        #toast .toast-row { display: flex; align-items: center; gap: 11px; }
        #toast .toast-ic { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 900; flex-shrink: 0; }
        #toast .toast-ic.success { background: linear-gradient(135deg,#FFB68C,#FF8FB1); color: #2a1810; }
        #toast .toast-ic.error { background: rgba(239,68,68,0.16); color: #ef4444; }
        #toast .toast-ic.info { background: rgba(255,255,255,0.1); color: var(--text-sec); }
        #toast-msg { font-weight: 700; font-size: 0.88rem; line-height: 1.35; text-align: left; }
        .btn-undo { margin-top: 12px; width: 100%; color: var(--text-main); background: rgba(255,255,255,0.07); border: 1px solid var(--border); font-weight: 700; cursor: pointer; font-size: 0.84rem; padding: 10px; border-radius: 12px; }

        .sync-status { font-size: 0.8rem; text-align: center; opacity: 0.8; margin-top: 15px; background: rgba(0,0,0,0.2); padding: 6px 15px; border-radius: 20px; display: inline-block; }
        .sync-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #34d399; margin-right: 8px; box-shadow: 0 0 8px #34d399; }
        .sync-dot.offline { background: #ef4444; box-shadow: 0 0 8px #ef4444; }

        /* ── PANTALLA LOGIN ─────────────────────────────────────── */
        #screen-login {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--bg-color); z-index: 1000; display: none;
            flex-direction: column; align-items: center; justify-content: flex-start;
            padding: 0; box-sizing: border-box;
            overflow-y: auto; -webkit-overflow-scrolling: touch;
        }
        #screen-login.active { display: flex; }

        /* Smart banner Android (13 sep 2026): #screen-login y #screen-login-b son
           fixed+inset:0, fuera del flujo normal, asi que un banner sticky insertado
           antes no los empuja -- se queda POR ENCIMA tapando su propia nav. Solo
           afecta a estas dos pantallas (pre-auth); el resto de la app usa flujo
           normal y ya se empuja solo. */
        body.has-android-banner #screen-login,
        body.has-android-banner #screen-login-b {
            top: var(--android-banner-h, 0px);
            height: calc(100% - var(--android-banner-h, 0px));
        }

        /* ── VARIANTE B DEL A/B: "Mismo Número" — reemplaza la nevera (perdio 4 sep 2026, A ganó p<0.001) ── */
        #screen-login-b {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 1000; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: #0a0a0d; color: #fdfcfa; overflow-x: clip; -webkit-font-smoothing: antialiased;
        }
        #screen-login-b.active { display: block; }
        #screen-login-b :is(h1,h2) { text-wrap: balance; }
        #screen-login-b .mn-grad {
            background: linear-gradient(100deg,#f4e9dd 0%,#f2905a 48%,#9a49c6 100%);
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
        }
        #screen-login-b .mn-display { font-family: 'Unbounded', 'DM Sans', sans-serif; }

        /* hero */
        #screen-login-b .mn-hero { min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
        #screen-login-b .mn-hero::before { content:''; position:absolute; top:-8%; left:50%; transform:translateX(-50%); width:900px; height:560px; background:radial-gradient(ellipse 50% 50% at center, rgba(154,73,198,0.16), transparent 70%); pointer-events:none; }
        #screen-login-b .mn-nav { display:flex; align-items:center; justify-content:space-between; padding:22px 20px 0; position:relative; z-index:5; opacity:0; transform:translateY(-16px); animation:mnRise .7s cubic-bezier(.25,.1,.25,1) .1s forwards; }
        #screen-login-b .mn-nav-logo { display:flex; align-items:center; gap:9px; }
        #screen-login-b .mn-nav-logo img { width:28px; height:28px; border-radius:8px; object-fit:contain; }
        #screen-login-b .mn-nav-logo span { font-weight:700; font-size:1rem; letter-spacing:-0.01em; }
        #screen-login-b .mn-nav-links { display:none; gap:clamp(14px,3vw,32px); }
        #screen-login-b .mn-nav-links a { color:#c9d2da; text-decoration:none; font-size:0.82rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; opacity:0.8; transition:opacity .2s; background:none; border:none; cursor:pointer; font-family:inherit; }
        #screen-login-b .mn-nav-links a:hover { opacity:1; }
        #screen-login-b .mn-nav-cta { display:inline-flex; }
        @media (min-width:640px){ #screen-login-b .mn-nav-links{display:flex;} #screen-login-b .mn-nav-cta{display:none;} }
        #screen-login-b .mn-hero-mid { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,3.5vw,26px); padding-block:20px; }
        #screen-login-b .mn-hero-heading { font-weight:900; text-transform:uppercase; letter-spacing:-0.02em; line-height:0.96; text-align:center; font-size:clamp(2.7rem,13.5vw,7.4rem); margin:0; opacity:0; transform:translateY(30px); animation:mnRise .8s cubic-bezier(.25,.1,.25,1) .25s forwards; }
        #screen-login-b .mn-widget { background:linear-gradient(160deg,#14131a,#0b0a10); border:1px solid rgba(255,255,255,0.1); border-radius:24px; padding:24px 26px; width:min(80vw,320px); box-shadow:0 30px 70px rgba(0,0,0,0.55), 0 0 60px rgba(154,73,198,0.1); opacity:0; transform:translateY(24px) scale(0.98); animation:mnRise .8s cubic-bezier(.25,.1,.25,1) .55s forwards; will-change:transform; }
        #screen-login-b .mn-wg-label { font-size:0.66rem; text-transform:uppercase; letter-spacing:0.16em; color:#f2905a; font-weight:700; margin-bottom:6px; }
        #screen-login-b .mn-wg-amount { font-size:2.5rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:12px; font-variant-numeric:tabular-nums; font-family:'Unbounded','DM Sans',sans-serif; color:#fdfcfa; }
        #screen-login-b .mn-wg-row { display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid rgba(255,255,255,0.1); font-size:0.86rem; }
        #screen-login-b .mn-wg-row span:first-child { color:#8b93a0; }
        #screen-login-b .mn-wg-row span:last-child { font-weight:700; font-variant-numeric:tabular-nums; }
        #screen-login-b .mn-wg-row .mn-owe { color:#f2905a; }
        #screen-login-b .mn-wg-row .mn-paid { color:#cb8fe8; }
        #screen-login-b .mn-hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:0 20px clamp(26px,6vw,48px); position:relative; z-index:5; }
        #screen-login-b .mn-hero-tag { color:#c9d2da; font-weight:400; text-transform:uppercase; letter-spacing:0.05em; line-height:1.45; font-size:clamp(0.66rem,1.5vw,0.86rem); max-width:190px; margin:0; opacity:0; transform:translateY(18px); animation:mnRise .7s cubic-bezier(.25,.1,.25,1) .4s forwards; }
        #screen-login-b .mn-hero-tag b { color:#fff; font-weight:700; }
        @keyframes mnRise { to { opacity:1; transform:translateY(0) scale(1); } }
        #screen-login-b .mn-btn { display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:15px 28px; font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; text-decoration:none; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; white-space:nowrap; }
        #screen-login-b .mn-btn.mn-solid { background:linear-gradient(135deg,#FFB68C,#FF8FB1); color:#2a1810; box-shadow:0 4px 22px rgba(255,143,177,0.4), inset 0 0 0 1.5px rgba(255,255,255,0.3); }
        #screen-login-b .mn-btn.mn-ghost { background:transparent; border:1.5px solid #c9d2da; color:#c9d2da; }
        #screen-login-b .mn-btn.mn-ghost:hover { background:rgba(201,210,218,0.1); }
        /* 3 oct 2026: el banner de cookies (fijo abajo) tapaba el CTA del hero en movil; se reserva su alto mientras esta visible */
        body.cookie-open #screen-login-b .mn-hero-bottom { padding-bottom:calc(clamp(26px,6vw,48px) + var(--cookie-h,100px)); }
        #screen-login-b .mn-hero-cta { opacity:0; transform:translateY(18px); animation:mnRise .7s cubic-bezier(.25,.1,.25,1) .48s forwards; }
        #screen-login-b button:focus-visible, #screen-login-b a:focus-visible { outline:2px solid #f2905a; outline-offset:3px; }

        /* marquee */
        #screen-login-b .mn-marquee { background:#0a0a0d; padding-block:clamp(56px,9vw,96px) clamp(36px,5vw,54px); overflow:hidden; }
        #screen-login-b .mn-mq-row { display:flex; gap:12px; will-change:transform; margin-bottom:12px; }
        #screen-login-b .mn-mq-tile { flex-shrink:0; width:134px; height:100px; border-radius:18px; background:linear-gradient(150deg,#14131a,#0b0a10); border:1px solid rgba(255,255,255,0.1); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
        #screen-login-b .mn-mq-tile .mn-emo { font-size:1.7rem; }
        #screen-login-b .mn-mq-tile .mn-lbl { font-size:0.66rem; color:#8b93a0; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }

        /* el patron */
        #screen-login-b .mn-about { min-height:88vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(64px,9vw,110px) 20px; position:relative; gap:clamp(34px,6vw,52px); }
        #screen-login-b .mn-deco { position:absolute; width:clamp(58px,10vw,96px); height:clamp(58px,10vw,96px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(1.4rem,3vw,2.2rem); background:radial-gradient(circle at 30% 30%, rgba(154,73,198,0.2), rgba(255,255,255,0.03)); border:1px solid rgba(255,255,255,0.1); }
        #screen-login-b .mn-deco.mn-tl{top:5%;left:3%;} #screen-login-b .mn-deco.mn-bl{bottom:9%;left:5%;} #screen-login-b .mn-deco.mn-tr{top:5%;right:3%;} #screen-login-b .mn-deco.mn-br{bottom:9%;right:5%;}
        #screen-login-b .mn-about h2 { font-weight:900; text-transform:uppercase; letter-spacing:-0.02em; line-height:0.98; font-size:clamp(2.4rem,9vw,5.6rem); margin:0; }
        #screen-login-b .mn-about-p { color:#c9d2da; font-weight:500; max-width:560px; line-height:1.6; font-size:clamp(0.95rem,2vw,1.24rem); margin:0; }
        #screen-login-b .mn-about-p .mn-ch { opacity:0.22; }

        /* beneficios (insercion clara) */
        #screen-login-b .mn-svc { background:#f2ecdf; color:#0a0a0d; border-radius:40px 40px 0 0; padding:clamp(60px,9vw,100px) 20px; }
        #screen-login-b .mn-svc h2 { font-family:'Unbounded','DM Sans',sans-serif; font-weight:800; text-transform:uppercase; text-align:center; letter-spacing:-0.01em; line-height:1; font-size:clamp(2.1rem,7.5vw,4rem); margin:0 0 clamp(44px,7vw,72px); }
        #screen-login-b .mn-svc-list { max-width:600px; margin:0 auto; }
        #screen-login-b .mn-svc-item { display:flex; gap:clamp(16px,4vw,30px); align-items:flex-start; padding:clamp(24px,4vw,36px) 0; border-top:1px solid rgba(10,10,13,0.14); }
        #screen-login-b .mn-svc-item:first-child { border-top:none; }
        #screen-login-b .mn-svc-tag { width:clamp(80px,17vw,120px); flex-shrink:0; font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:#4c4356; opacity:0.7; line-height:1.4; padding-top:3px; overflow-wrap:break-word; }
        #screen-login-b .mn-svc-name { font-weight:700; letter-spacing:-0.01em; font-size:clamp(1rem,2.4vw,1.3rem); margin-bottom:5px; }
        #screen-login-b .mn-svc-desc { font-weight:400; line-height:1.55; font-size:clamp(0.82rem,1.6vw,0.96rem); opacity:0.66; max-width:420px; margin:0; }

        /* proceso (sticky stack) */
        #screen-login-b .mn-proceso { background:#0a0a0d; border-radius:40px 40px 0 0; margin-top:-26px; position:relative; z-index:2; padding:clamp(64px,9vw,110px) 20px clamp(36px,5vw,54px); }
        #screen-login-b .mn-proceso h2 { font-weight:900; text-transform:uppercase; text-align:center; letter-spacing:-0.02em; line-height:0.98; font-size:clamp(2.2rem,8.5vw,5.2rem); margin:0 0 clamp(34px,5vw,52px); }
        #screen-login-b .mn-stack { max-width:640px; margin:0 auto; }
        #screen-login-b .mn-stack-holder { height:66vh; position:relative; }
        #screen-login-b .mn-stack-card { position:sticky; border-radius:28px; border:1.5px solid rgba(255,255,255,0.1); background:#14131a; padding:clamp(20px,4vw,30px); will-change:transform; transform-origin:top center; }
        #screen-login-b .mn-stack-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
        #screen-login-b .mn-stack-num { font-family:'Unbounded','DM Sans',sans-serif; font-weight:800; font-size:clamp(2rem,6vw,3rem); line-height:1; color:rgba(255,255,255,0.92); }
        #screen-login-b .mn-stack-cat { font-size:0.64rem; text-transform:uppercase; letter-spacing:0.14em; color:#f2905a; font-weight:700; margin-bottom:4px; }
        #screen-login-b .mn-stack-name { font-weight:800; font-size:clamp(1.02rem,2.4vw,1.4rem); text-transform:uppercase; letter-spacing:-0.01em; }
        #screen-login-b .mn-stack-body { display:flex; gap:16px; align-items:flex-start; }
        #screen-login-b .mn-stack-visual { width:50px; height:50px; flex-shrink:0; border-radius:14px; background:linear-gradient(160deg,#221826,#160c1e); border:1px solid rgba(154,73,198,0.32); display:flex; align-items:center; justify-content:center; font-size:1.35rem; }
        #screen-login-b .mn-stack-desc { color:#c9d2da; font-size:0.88rem; line-height:1.55; margin:0; }

        /* opiniones */
        #screen-login-b .mn-testi { padding:clamp(56px,8vw,90px) 20px; max-width:560px; margin:0 auto; }
        #screen-login-b .mn-testi h2 { font-weight:900; text-transform:uppercase; text-align:center; line-height:1.02; font-size:clamp(1.9rem,6.5vw,3rem); margin:0 0 10px; letter-spacing:-0.02em; }
        #screen-login-b .mn-testi-sub { text-align:center; color:#8b93a0; margin:0 0 28px; font-size:0.9rem; }
        #screen-login-b .mn-testi-card { background:#14131a; border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:20px; margin-bottom:12px; }
        #screen-login-b .mn-testi-stars { color:#e4e0d8; font-size:0.8rem; letter-spacing:2px; margin-bottom:9px; }
        #screen-login-b .mn-testi-text { font-style:italic; color:#dcdcdc; font-size:0.9rem; line-height:1.55; margin:0 0 13px; }
        #screen-login-b .mn-testi-author { display:flex; align-items:center; gap:10px; }
        #screen-login-b .mn-testi-avatar { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; }
        #screen-login-b .mn-testi-name { font-weight:700; font-size:0.83rem; }
        #screen-login-b .mn-testi-meta { font-size:0.72rem; color:#8b93a0; }
        #screen-login-b .mn-testi-disc { text-align:center; font-size:0.66rem; color:#5c5a63; margin-top:4px; }

        /* cta final + footer */
        #screen-login-b .mn-final { text-align:center; padding:clamp(56px,9vw,100px) 20px; background:radial-gradient(ellipse 100% 60% at 50% 0%, rgba(154,73,198,0.13), transparent 70%); }
        #screen-login-b .mn-final h2 { font-weight:900; text-transform:uppercase; line-height:1; font-size:clamp(2rem,7.5vw,3.6rem); margin:0 0 14px; letter-spacing:-0.02em; }
        #screen-login-b .mn-final p { color:#8b93a0; max-width:360px; margin:0 auto 26px; font-size:0.92rem; line-height:1.5; }
        #screen-login-b .mn-footer { padding:30px 20px calc(26px + env(safe-area-inset-bottom)); text-align:center; border-top:1px solid rgba(255,255,255,0.1); }
        #screen-login-b .mn-footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; margin-bottom:12px; }
        #screen-login-b .mn-footer nav a { color:#8b93a0; text-decoration:none; font-size:0.8rem; font-weight:500; }
        #screen-login-b .mn-footer p { color:#5c5a63; font-size:0.72rem; margin:0; }

        @media (prefers-reduced-motion: reduce) {
            #screen-login-b .mn-nav, #screen-login-b .mn-hero-heading, #screen-login-b .mn-widget, #screen-login-b .mn-hero-tag, #screen-login-b .mn-hero-cta { animation:none!important; opacity:1!important; transform:none!important; }
        }
        .app-logo-img { width:28px; height:28px; border-radius:7px; object-fit:contain; flex-shrink:0; }
        .login-logo { font-size: 4rem; margin-bottom: 16px; }
        .login-title { font-size: 2.5rem; font-weight: 800; color: #fff; margin: 0 0 8px 0; letter-spacing: -1px; }
        .login-sub { color: #a1a1aa; font-size: 1rem; margin: 0 0 60px 0; text-align: center; }
        .btn-google { background: #fff; color: #1c1c1e; border: none; padding: 18px 28px; border-radius: 18px; width: 100%; font-weight: 700; font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; transition: opacity 0.2s; max-width: 340px; }
        .btn-google:active { opacity: 0.8; }
        .btn-google img { width: 22px; height: 22px; }
        .login-footer { color: #8e8e93; font-size: 0.8rem; margin-top: 30px; text-align: center; }

        /* ── AVATAR USUARIO (esquina ajustes) ───────────────────── */
        .user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); }
        .user-avatar-placeholder { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; color: white; }
        .founder-badge { display: inline-flex; align-items: center; gap: 3px; background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); color: #fff; font-size: 0.57rem; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; line-height: 1.5; white-space: nowrap; box-shadow: 0 1px 6px rgba(245,158,11,0.4); }

        /* ── LIQUIDACIÓN EXPRESS ─────────────────────────────────── */
        #express-settle-btn { margin-top: 14px; display: none; }
        .btn-express-settle { background: linear-gradient(135deg, #FF8FB1, #3b82f6); color: white; border: none; padding: 16px; border-radius: 18px; width: 100%; font-weight: 800; font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 6px 20px rgba(255,143,177,0.35); transition: opacity 0.15s, transform 0.12s; }
        .btn-express-settle:active { opacity: 0.85; transform: scale(0.97); }
        .btn-settle-pay { background: linear-gradient(135deg, #FF8FB1 0%, #3b82f6 100%); color: #fff; border: none; padding: 13px 10px; border-radius: 14px; width: 100%; font-weight: 700; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; box-shadow: 0 4px 14px rgba(255,143,177,0.28); transition: opacity 0.15s, transform 0.12s; letter-spacing: -0.1px; }
        .btn-settle-pay:active { opacity: 0.85; transform: scale(0.97); }
        .btn-settle-done { background: rgba(255,255,255,0.07); color: var(--text-main); border: 1px solid rgba(255,255,255,0.13); padding: 13px 10px; border-radius: 14px; width: 100%; font-weight: 700; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: opacity 0.15s, transform 0.12s; letter-spacing: -0.1px; }
        .btn-settle-done:active { opacity: 0.8; transform: scale(0.97); }
        /* Segmented control */
        .seg-control { display: flex; background: var(--input-bg); border-radius: 14px; padding: 3px; gap: 3px; border: 1px solid var(--border); }
        .seg-btn { flex: 1; padding: 9px 12px; border: none; border-radius: 11px; background: transparent; color: var(--text-sec); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.18s cubic-bezier(0.16,1,0.3,1); white-space: nowrap; }
        .seg-btn.active { background: var(--primary); color: #2a1810; font-weight: 800; box-shadow: 0 2px 8px rgba(255,143,177,0.28); }
        /* Category grid */
        .cat-icon-grid .chip { border-radius: 14px; }
        /* Expense date btn */
        .exp-date-pill { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 5px 12px; font-size: 0.75rem; font-weight: 700; color: var(--text-sec); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all 0.15s; }
        .exp-date-pill:active { opacity: 0.7; }
        /* Section mini-label */
        .field-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-sec); display: block; margin-bottom: 8px; }
        /* Native amount input */
        #expense-amount-input { font-size: 3.5rem; font-weight: 800; color: #FF8FB1; text-align: right; background: transparent; border: none; outline: none; width: 55%; max-width: 220px; letter-spacing: -2px; padding: 0; caret-color: #FF8FB1; -webkit-tap-highlight-color: transparent; }
        #expense-amount-input::placeholder { color: rgba(255,143,177,0.28); }
        /* Modal Nuevo Gasto — paleta premium (peach/pink del logo) en vez del verde genérico */
        #modal-expense .chip.selected { background: linear-gradient(135deg,#FFB68C,#FF8FB1); color: #2a1810; border-color: transparent; }
        #modal-expense .check-item.checked { border-color: #FF8FB1; background: rgba(255,143,177,0.13); }
        /* El selector (3 botones) medía 280px + la etiqueta y se salía de 375px: ahora ocupa lo que queda (3 oct 2026) */
        #seg-split { max-width: none !important; flex: 1; min-width: 0; }
        #seg-split .seg-btn { padding: 9px 6px; font-size: 0.78rem; }
        #seg-split .seg-btn.active { background: linear-gradient(135deg,#FFB68C,#FF8FB1); color: #2a1810; box-shadow: 0 2px 8px rgba(255,143,177,0.3); }
        #btn-save-expense { background: linear-gradient(135deg,#FFB68C,#FF8FB1); color: #2a1810; }
        /* Modales Pedido/Idea — misma paleta premium en vez del verde genérico */
        #modal-new-order .chip.selected, #modal-manage-order .chip.selected, #modal-new-idea .chip.selected { background: linear-gradient(135deg,#FFB68C,#FF8FB1); color: #2a1810; border-color: transparent; }
        /* Modal Sueño — acento morado propio de la sección, sin verde */
        #modal-new-dream .chip.selected { background: linear-gradient(135deg,#FF8FB1,#a855f7); color: white; border-color: transparent; }
        #dream-target-input, #dream-name-input { caret-color: #a855f7; }
        /* Premium / Tip / Nueva categoría — sin verde */
        #modal-premium-upsell .chip.selected, #modal-tip .chip.selected { background: linear-gradient(135deg,#FF8FB1,#a855f7); color: white; border-color: transparent; }
        #modal-new-cat .chip.selected { background: linear-gradient(135deg,#FFB68C,#FF8FB1); color: #2a1810; border-color: transparent; }

        #modal-express-settle { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 500; display: none; }
        #modal-express-settle.active { display: block; animation: slideUp 0.32s cubic-bezier(0.16,1,0.3,1); }
        #modal-express-settle .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); z-index: -1; }
        #modal-express-settle .sheet-body { background: var(--card-bg); border-radius: 28px 28px 0 0; border: 1px solid var(--border); border-bottom: none; padding: 24px 22px calc(24px + env(safe-area-inset-bottom)); }
        .sheet-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 20px; }
        #modal-balance-bg { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 500; display: none; }
        #modal-balance-bg.active { display: block; animation: slideUp 0.32s cubic-bezier(0.16,1,0.3,1); }
        #modal-balance-bg .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); z-index: -1; }
        #modal-balance-bg .sheet-body { background: var(--card-bg); border-radius: 28px 28px 0 0; border: 1px solid var(--border); border-bottom: none; padding: 24px 22px calc(24px + env(safe-area-inset-bottom)); max-width: 440px; margin: 0 auto; max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
        #modal-balance-bg-editor { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 501; display: none; }
        #modal-balance-bg-editor.active { display: block; animation: slideUp 0.32s cubic-bezier(0.16,1,0.3,1); }
        #modal-balance-bg-editor .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); z-index: -1; }
        #modal-balance-bg-editor .sheet-body { background: var(--card-bg); border-radius: 28px 28px 0 0; border: 1px solid var(--border); border-bottom: none; padding: 24px 22px calc(24px + env(safe-area-inset-bottom)); max-width: 480px; margin: 0 auto; }
        .sheet-amount { text-align: center; font-size: 2.6rem; font-weight: 800; letter-spacing: -1px; color: var(--danger); margin: 4px 0 6px; }
        .sheet-subtitle { text-align: center; font-size: 0.9rem; color: var(--text-sec); margin-bottom: 22px; }
        .sheet-pay-options { display: flex; flex-direction: column; gap: 12px; }
        .sheet-pay-btn { border: none; padding: 17px 20px; border-radius: 18px; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 100%; transition: opacity 0.15s, transform 0.12s; color: white; }
        .sheet-pay-btn:active { opacity: 0.85; transform: scale(0.97); }
        .sheet-pay-btn-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
        .sheet-pay-btn-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
        .sheet-pay-btn-title { font-size: 1rem; font-weight: 800; }
        .sheet-pay-btn-desc { font-size: 0.78rem; opacity: 0.8; font-weight: 400; }
        .btn-pay-bizum { background: linear-gradient(135deg, #0070f3, #0050c8); }
        .btn-pay-revolut { background: linear-gradient(135deg, #191c2a, #2f3563); }
        .btn-pay-cash { background: linear-gradient(135deg, #FFB68C, #FF8FB1); }
        .sheet-cancel-btn { margin-top: 10px; background: none; border: none; color: var(--text-sec); font-size: 0.95rem; width: 100%; padding: 12px; cursor: pointer; font-weight: 600; }

        /* ── INTRO SLIDES (pre-onboarding) ─────────────────────── */
        .intro-slides { width:100%; overflow:hidden; position:relative; }
        .intro-track { display:flex; transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); will-change:transform; }
        .intro-slide { min-width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 4px; box-sizing:border-box; }
        .intro-dots { display:flex; gap:8px; margin-top:28px; }
        .intro-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.2); transition:all 0.3s; }
        .intro-dot.active { background:#FF8FB1; width:24px; border-radius:4px; }

        /* ── ONBOARDING STEPPER ─────────────────────────────────── */
        .onb-stepper { display:flex; align-items:center; gap:0; margin-bottom:32px; width:100%; max-width:280px; }
        .onb-step { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:800; flex-shrink:0; transition:all 0.3s; }
        .onb-step.active { background:var(--primary,#FFB68C); color:white; }
        .onb-step.done { background:rgba(255,143,177,0.3); color:var(--primary,#FFB68C); }
        .onb-step.pending { background:rgba(255,255,255,0.1); color:#6b7280; }
        .onb-line { flex:1; height:2px; background:rgba(255,255,255,0.1); }
        .onb-line.done { background:rgba(255,143,177,0.4); }
        /* ── WIDGET BLOG HOME — artículo semana ───────────────── */
        .blog-week-banner { display:flex; flex-direction:column; gap:10px; background:linear-gradient(135deg,rgba(168,85,247,0.10) 0%,rgba(168,85,247,0.03) 100%); border:1px solid rgba(168,85,247,0.28); border-radius:20px; padding:18px 20px; text-decoration:none; color:var(--text-main); position:relative; overflow:hidden; transition:transform 0.18s, box-shadow 0.18s; }
        .blog-week-banner:active { transform:scale(0.985); box-shadow:0 8px 28px rgba(168,85,247,0.15); }
        .blog-week-label { display:inline-flex; align-items:center; gap:6px; font-size:0.68rem; font-weight:800; color:#a855f7; text-transform:uppercase; letter-spacing:1px; }
        .blog-week-label::before { content:''; width:6px; height:6px; border-radius:50%; background:#a855f7; box-shadow:0 0 6px #a855f7; animation:pulse 2s infinite; flex-shrink:0; }
        .blog-week-title { font-size:1.05rem; font-weight:800; line-height:1.3; color:#fff; }
        .blog-week-desc { font-size:0.82rem; color:var(--text-sec); line-height:1.5; }
        .blog-week-footer { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
        .blog-week-tag { font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius:20px; }
        .blog-week-cta { font-size:0.8rem; font-weight:700; color:#a855f7; display:flex; align-items:center; gap:4px; }

        /* ── LANDING PAGE — hero + secciones SEO (pre-auth) · rediseño taste 17 oct 2026 ──── */
        /* Un solo acento de marca (melocotón + rosa). Nada de morado/naranja legacy, nada de glass. */
        .login-hero-area { width:100%; display:flex; flex-direction:column; align-items:center; padding:calc(52px + env(safe-area-inset-top)) 24px 52px; box-sizing:border-box; min-height:90vh; justify-content:center; position:relative; overflow:hidden; }
        .login-hero-area::before { content:''; position:absolute; top:-120px; left:50%; transform:translateX(-50%); width:560px; height:440px; background:radial-gradient(ellipse 50% 50% at center, rgba(255,143,177,0.16), transparent 66%); pointer-events:none; }
        .login-hero-area::after { content:''; position:absolute; bottom:18px; left:50%; width:18px; height:18px; border-right:2px solid rgba(255,255,255,0.22); border-bottom:2px solid rgba(255,255,255,0.22); transform:translateX(-50%) rotate(45deg); }
        .hero-pill { display:inline-flex; align-items:center; gap:8px; background:rgba(255,143,177,0.07); border:1px solid rgba(255,143,177,0.26); border-radius:999px; padding:7px 15px; font-size:0.72rem; font-weight:700; color:#FFB68C; letter-spacing:0.2px; margin-bottom:24px; position:relative; }
        .hero-pill::before { content:''; width:7px; height:7px; border-radius:50%; background:#FF8FB1; box-shadow:0 0 8px #FF8FB1; animation:pulse 2s infinite; flex-shrink:0; }
        .hero-title { font-family:'Fraunces',Georgia,serif; font-size:2.65rem; font-weight:400; color:#fff; margin:0 0 18px; letter-spacing:-0.025em; line-height:1.05; text-align:center; max-width:340px; position:relative; }
        .hero-title em { font-style:italic; font-weight:600; background:linear-gradient(115deg,#FFB68C 0%,#FF8FB1 60%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
        .hero-sub { color:#c4c4cc; font-size:0.97rem; text-align:center; line-height:1.6; margin:0 0 30px; max-width:300px; font-weight:500; position:relative; }
        /* Mini balance widget — vivo */
        .hero-widget { background:linear-gradient(160deg,#13151a,#0b0d10); border:1px solid rgba(255,255,255,0.09); border-radius:22px; padding:18px 20px; width:100%; max-width:300px; margin-bottom:30px; box-shadow:0 0 50px rgba(255,143,177,0.1), 0 20px 50px rgba(0,0,0,0.65); position:relative; transition:border-color 0.4s, box-shadow 0.4s; }
        .hero-widget.hw-flash { border-color:rgba(255,143,177,0.5); box-shadow:0 0 60px rgba(255,143,177,0.22), 0 20px 50px rgba(0,0,0,0.65); }
        .hero-widget-label { font-size:0.68rem; letter-spacing:0.2px; color:#FFB68C; font-weight:700; margin-bottom:5px; min-height:14px; transition:opacity 0.25s; }
        .hero-widget-amount { font-size:2.4rem; font-weight:800; color:#fff; letter-spacing:-2px; line-height:1; margin-bottom:12px; font-variant-numeric:tabular-nums; }
        .hero-widget-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid rgba(255,255,255,0.06); font-size:0.85rem; }
        .hero-widget-name { color:#a1a1aa; font-weight:500; }
        .hero-widget-debt { font-weight:800; font-variant-numeric:tabular-nums; }
        .hero-widget-debt.owe { color:#f87171; }
        .hero-widget-debt.paid { color:#cb8fe8; }
        .btn-start-landing { background:linear-gradient(135deg,#FFB68C,#FF8FB1); color:#2a1810; border:none; padding:17px 40px; border-radius:14px; font-weight:800; font-size:1rem; cursor:pointer; box-shadow:0 6px 20px rgba(255,143,177,0.26); width:100%; max-width:300px; transition:transform 0.18s, box-shadow 0.18s, opacity 0.15s; font-family:inherit; position:relative; }
        .btn-start-landing:hover { transform:translateY(-2px); box-shadow:0 14px 44px rgba(255,143,177,0.5); }
        .btn-start-landing:active { transform:scale(0.97); opacity:0.9; }
        /* Login modal (bottom sheet) — premium */
        #login-modal { position:fixed; bottom:0; left:0; width:100%; z-index:9999; display:none; }
        #login-modal.active { display:block; }
        #login-modal .lm-backdrop { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); z-index:-1; }
        #login-modal .lm-sheet { background:linear-gradient(170deg,#170f1c 0%,#0c0e11 38%,#0b0c0f 100%); border-radius:30px 30px 0 0; border:1px solid rgba(255,143,177,0.24); border-bottom:none; padding:8px 28px calc(28px + env(safe-area-inset-bottom)); max-height:88vh; overflow-y:auto; animation:slideUp 0.32s cubic-bezier(0.16,1,0.3,1); display:flex; flex-direction:column; align-items:center; box-shadow:0 -20px 70px rgba(255,143,177,0.12); }
        .lm-handle { width:40px; height:4px; background:rgba(255,255,255,0.18); border-radius:2px; margin:0 auto 20px; }
        .lm-title { font-family:'Fraunces',Georgia,serif; font-size:1.55rem; font-weight:600; color:var(--text-main); margin:0 0 6px; letter-spacing:-0.01em; }
        .lm-social-proof { display:flex; align-items:center; gap:7px; color:#9d9da6; font-size:0.8rem; font-weight:600; margin:0 0 22px; }
        .lm-social-proof::before { content:''; width:6px; height:6px; border-radius:50%; background:#FF8FB1; box-shadow:0 0 6px #FF8FB1; flex-shrink:0; }
        #login-panel-email input { transition:border-color 0.2s, box-shadow 0.2s; }
        #login-panel-email input:focus { border-color:rgba(255,143,177,0.55) !important; box-shadow:0 0 0 3px rgba(255,143,177,0.14); }
        .btn-google { transition:transform 0.15s, box-shadow 0.15s; }
        .btn-google:hover { transform:translateY(-1px); box-shadow:0 8px 26px rgba(255,255,255,0.12); }
        /* Sticky CTA */
        .login-sticky-cta { position:sticky; bottom:0; width:100%; padding:12px 24px calc(16px + env(safe-area-inset-bottom)); box-sizing:border-box; background:linear-gradient(to top, #000 60%, transparent); pointer-events:none; z-index:10; }
        .login-sticky-cta button { width:100%; max-width:400px; display:block; margin:0 auto; background:linear-gradient(135deg,#FFB68C,#FF8FB1); color:#2a1810; border:none; padding:17px; border-radius:14px; font-weight:800; font-size:1rem; cursor:pointer; pointer-events:all; box-shadow:0 6px 18px rgba(255,143,177,0.24); }
        .landing-section { padding:44px 24px; width:100%; max-width:560px; margin:0 auto; box-sizing:border-box; }
        .landing-section + .landing-section { border-top:1px solid rgba(255,255,255,0.08); }
        .landing-section h2 { font-family:'Fraunces',Georgia,serif; font-size:1.65rem; font-weight:600; color:#fff; margin:0 0 10px; letter-spacing:-0.01em; line-height:1.18; }
        .landing-section > p { color:#a1a1aa; font-size:0.93rem; line-height:1.7; margin:0 0 24px; }
        .landing-steps { display:flex; flex-direction:column; gap:14px; }
        .landing-step { background:rgba(22,24,28,0.7); border:1px solid rgba(255,255,255,0.08); border-radius:20px; padding:20px; transition:border-color 0.25s, transform 0.25s; }
        .landing-step:hover { border-color:rgba(255,143,177,0.28); transform:translateY(-2px); }
        .step-num { width:26px; height:3px; background:linear-gradient(90deg,#FFB68C,#FF8FB1); border-radius:999px; display:block; margin-bottom:14px; font-size:0; overflow:hidden; }
        .landing-step h3 { font-size:0.98rem; font-weight:700; color:#fff; margin:0 0 5px; }
        .landing-step p { font-size:0.87rem; color:#a1a1aa; line-height:1.6; margin:0; }
        .landing-features { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
        .landing-feature { background:rgba(18,18,20,0.8); border:1px solid rgba(255,255,255,0.07); border-radius:18px; padding:18px 14px; transition:border-color 0.2s; }
        .landing-feature:hover { border-color:rgba(255,143,177,0.2); }
        .feature-icon { width:36px; height:36px; border-radius:10px; background:rgba(255,143,177,0.1); border:1px solid rgba(255,143,177,0.2); display:flex; align-items:center; justify-content:center; font-size:1rem; margin-bottom:12px; }
        .landing-feature h3 { font-size:0.875rem; font-weight:700; color:#fff; margin:0 0 5px; }
        .landing-feature p { font-size:0.78rem; color:#8e8e93; line-height:1.55; margin:0; }
        .faq-item { background:rgba(28,28,30,0.65); border:1px solid rgba(255,255,255,0.08); border-radius:16px; margin-bottom:10px; overflow:hidden; }
        .faq-item > summary { padding:16px 18px; font-weight:700; font-size:0.9rem; color:#fff; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; position:static !important; backdrop-filter:none !important; background:transparent !important; top:auto !important; }
        .faq-item > summary::-webkit-details-marker { display:none; }
        .faq-item > summary::after { content:'+'; color:#FFB68C; font-size:1.2rem; font-weight:400; flex-shrink:0; margin-left:12px; }
        .faq-item[open] > summary::after { content:'−'; }
        .faq-item[open] > summary { border-bottom:1px solid rgba(255,255,255,0.07); }
        .faq-item > p { padding:0 18px 16px; color:#a1a1aa; font-size:0.85rem; line-height:1.65; margin:0; }
        .faq-item > p a { color:#FFB68C; }
        .landing-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
        .stat-item { background:rgba(255,143,177,0.07); border:1px solid rgba(255,143,177,0.18); border-radius:16px; padding:20px 14px; text-align:center; }
        .stat-number { display:block; font-family:'Fraunces',Georgia,serif; font-size:2.1rem; font-weight:600; color:#FFB68C; letter-spacing:-0.01em; }
        .stat-label { display:block; font-size:0.75rem; color:#a1a1aa; margin-top:4px; }
        #landing-footer-section { padding:28px 24px calc(32px + env(safe-area-inset-bottom)); text-align:center; border-top:1px solid rgba(255,255,255,0.08); width:100%; box-sizing:border-box; }
        #landing-footer-section nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; margin-bottom:14px; }
        #landing-footer-section nav a { color:#a1a1aa; text-decoration:none; font-size:0.82rem; font-weight:500; }
        #landing-footer-section nav a:hover { color:#FFB68C; }
        #landing-footer-section p { color:#8e8e93; font-size:0.75rem; line-height:1.5; margin:0 0 4px; }
        /* ── PHONE MOCKUP ── */
        .hero-phone-wrap { display:flex; justify-content:center; width:100%; margin:28px 0 32px; }
        .hero-phone { width:210px; background:linear-gradient(160deg,#141618,#0e1012); border:1.5px solid rgba(255,255,255,0.13); border-radius:38px; padding:20px 12px 18px; position:relative; box-shadow:0 0 0 6px rgba(255,255,255,0.03), 0 40px 80px rgba(0,0,0,0.7), 0 0 60px rgba(255,143,177,0.09); }
        .hero-phone-notch { width:52px; height:9px; background:#000; border-radius:5px; margin:0 auto 14px; }
        .hero-phone-screen { border-radius:16px; overflow:hidden; background:#09090b; padding:14px; }
        .hps-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
        .hps-couple { display:flex; }
        .hps-av { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.62rem; font-weight:800; color:#2a1810; border:1.5px solid #09090b; }
        .hps-av.a { background:#FFB68C; }
        .hps-av.b { background:#FF8FB1; margin-left:-8px; }
        .hps-live { display:inline-flex; align-items:center; gap:5px; }
        .hps-live i { width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 7px #4ade80; animation:pulse 2s infinite; }
        .hps-balance-card { border-radius:14px; padding:13px 14px 15px; margin-bottom:10px; background:#111016; background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0); background-size:9px 9px; border:1px solid rgba(255,255,255,0.06); }
        .hps-bc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
        .hps-label { font-size:0.56rem; letter-spacing:0.6px; text-transform:uppercase; color:#8e8e93; font-weight:700; margin-bottom:3px; }
        .hps-amount { font-size:1.9rem; font-weight:800; color:#fff; letter-spacing:-1.5px; line-height:1; margin-bottom:10px; }
        .hps-amount.pos { color:#34d399; }
        .hps-budget { margin-bottom:12px; }
        .hps-budget-track { height:5px; border-radius:99px; background:rgba(255,255,255,0.08); overflow:hidden; }
        .hps-budget-fill { height:100%; width:47%; border-radius:99px; background:linear-gradient(90deg,#FFB68C,#FF8FB1); }
        .hps-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-top:1px solid rgba(255,255,255,0.07); font-size:0.74rem; }
        .hps-name { color:#a1a1aa; }
        .hps-debt { font-weight:800; }
        .hps-debt.red { color:#f87171; }
        .hps-debt.green { color:#cb8fe8; }
        .hps-expense { display:flex; align-items:center; gap:9px; padding:8px 0; border-top:1px solid rgba(255,255,255,0.06); }
        .hps-exp-icon { width:28px; height:28px; flex-shrink:0; border-radius:9px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center; font-size:0.82rem; }
        .hps-exp-info { flex:1; }
        .hps-exp-desc { font-size:0.68rem; color:#d4d4d8; font-weight:600; }
        .hps-exp-who { font-size:0.6rem; color:#8e8e93; }
        .hps-exp-amt { font-size:0.72rem; color:#FFB68C; font-weight:700; }
        /* ── PATRÓN SECTION ── */
        .landing-pattern { padding:40px 24px; width:100%; max-width:560px; margin:0 auto; box-sizing:border-box; border-top:1px solid rgba(255,255,255,0.08); }
        .landing-pattern p { color:#a1a1aa; font-size:0.97rem; line-height:1.8; margin:0 0 16px; }
        .landing-pattern p:last-child { margin:0; }
        .landing-pattern strong { color:#e4e4e7; }
        /* ── FEATURE NARRATIVA ── */
        .landing-feat-narrative { color:#a1a1aa; font-size:0.95rem; line-height:1.8; margin:0 0 24px; }
        .landing-feat-checks { display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; }
        .landing-feat-checks li { display:flex; align-items:flex-start; gap:10px; font-size:0.88rem; color:#d4d4d8; line-height:1.55; }
        .landing-feat-checks li::before { content:'✓'; color:#FFB68C; font-weight:800; flex-shrink:0; margin-top:1px; }
        /* ── TESTIMONIOS ── */
        .landing-testimonials { display:flex; flex-direction:column; gap:12px; }
        .testimonial-card { background:rgba(22,24,28,0.7); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:18px; }
        .testimonial-stars { color:#FFB68C; font-size:0.8rem; letter-spacing:1px; margin-bottom:8px; }
        .testimonial-text { color:#d4d4d8; font-size:0.88rem; line-height:1.6; margin:0 0 12px; font-style:italic; }
        .testimonial-author { display:flex; align-items:center; gap:10px; }
        .testimonial-avatar { width:34px; height:34px; border-radius:50%; background:rgba(255,143,177,0.14); border:1px solid rgba(255,143,177,0.28); display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; color:#FFB68C; flex-shrink:0; }
        .testimonial-name { font-size:0.8rem; font-weight:700; color:#fff; }
        .testimonial-meta { font-size:0.72rem; color:#8e8e93; }
        /* ── FOUNDER LINE ── */
        .landing-founder-line { padding:28px 24px; width:100%; max-width:560px; margin:0 auto; box-sizing:border-box; text-align:center; border-top:1px solid rgba(255,255,255,0.08); }
        .landing-founder-line p { color:#8e8e93; font-size:0.82rem; line-height:1.6; margin:0; }

/* 15 oct 2026 — incidencias de los documentos (A2, D4, D7) */
textarea { font-family: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
@media (max-width: 430px) {
  #screen-login nav > div:last-child { gap: 6px !important; }
  #screen-login nav select { padding: 6px 4px !important; font-size: 0.75rem !important; }
  #screen-login nav .nav-btn { padding: 8px 10px !important; font-size: 0.78rem !important; white-space: nowrap; }
}
/* A2 — quien pide "reducir movimiento" no recibe animaciones ni transiciones largas */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── Historial en secciones plegables (como Ajustes) — 22 oct 2026 ── */
.hist-sec { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; margin-bottom: 12px; overflow: hidden; }
.hist-sec > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; gap: 13px; color: var(--text-main); user-select: none; -webkit-user-select: none; }
.hist-sec > summary::-webkit-details-marker { display: none; }
.hist-sec > summary::after { content: '\2304'; font-size: 1.2rem; line-height: 1; color: var(--text-sec); transition: transform 0.2s ease; flex-shrink: 0; }
.hist-sec[open] > summary::after { transform: rotate(180deg); }
.hist-sec[open] > summary { border-bottom: 1px solid var(--border); }
/* Badge de icono con color propio por sección (como Ajustes) */
.hist-ic { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
.hist-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hist-ttl b { font-weight: 800; font-size: 0.95rem; line-height: 1.2; }
.hist-ttl small { font-weight: 600; font-size: 0.73rem; color: var(--text-sec); line-height: 1.2; }
.hist-sec > .hist-sec-body { padding: 14px 16px 16px; }
.hist-sec > .hist-sec-body > *:last-child { margin-bottom: 0; }
.hist-sec-sub { font-size: 0.63rem; font-weight: 700; letter-spacing: 1.8px; color: var(--text-sec); text-transform: uppercase; margin: 4px 0 12px; }