:root{ --bg:#f2f2f7; --card:#ffffff; --sep:rgba(60,60,67,.13); --label:#1c1c1e; --label2:rgba(60,60,67,.6); --label3:rgba(60,60,67,.32); --tint:#0a9d8f; --tint-d:#077e72; --tint-l:#e4f5f2; --gold:#cf9a1b; --gold-l:#fbf2da; --red:#ff3b30; --orange:#ff9500; --green:#34c759; --r:13px; --rl:20px; --bar:rgba(249,249,249,.82); /* --tint-d se usa como FONDO (con texto blanco encima) y también como texto. Se separa --tint-t para poder aclararlo en modo oscuro sin estropear los botones de fondo oscuro. */ --tint-t:#077e72; /* Pares fondo/texto de las etiquetas de estado. Antes iban escritos a fuego (#fff3e0 con #c97a30, etc.) y en modo oscuro habrían quedado como parches claros ilegibles. */ --warn-bg:#fff3e0; --warn-fg:#c97a30; /* naranja: pendiente / aviso */ --danger-bg:#fdecec; --danger-fg:#b3261e; /* rojo: error / cancelar */ --ok-bg:#e3f6ea; --ok-fg:#1f9d55; /* verde: correcto / pagado */ --gold-bg:#fff8e6; --gold-fg:#7a5e0a; /* dorado: destacado */ --soft:#f0f0f3; /* fondos suaves neutros */ --press:#e9e9ec; /* estado :active de una fila */ --shadow:rgba(0,0,0,.12); --hair:rgba(60,60,67,.18); /* se usaba var(--hair,#ddd) sin definirla */ } /* ===== MODO OSCURO ===== Se activa solo si el móvil lo pide, o a mano desde Perfil → Aspecto (data-theme en manda sobre la preferencia del sistema). */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#000000; --card:#1c1c1e; --sep:rgba(255,255,255,.15); --label:#f2f2f7; --label2:rgba(235,235,245,.62); --label3:rgba(235,235,245,.34); --tint:#0a9d8f; --tint-t:#5fd8c8; --tint-l:rgba(10,157,143,.20); --gold:#e0b040; --gold-l:rgba(224,176,64,.18); --bar:rgba(28,28,30,.86); --warn-bg:rgba(255,149,0,.20); --warn-fg:#ffb45c; --danger-bg:rgba(255,59,48,.20); --danger-fg:#ff8a80; --ok-bg:rgba(52,199,89,.20); --ok-fg:#5ede84; --gold-bg:rgba(224,176,64,.18); --gold-fg:#f0cd7a; --soft:#2c2c2e; --press:#2c2c2e; --shadow:rgba(0,0,0,.5); --hair:rgba(255,255,255,.20); color-scheme:dark; } } :root[data-theme="dark"]{ --bg:#000000; --card:#1c1c1e; --sep:rgba(255,255,255,.15); --label:#f2f2f7; --label2:rgba(235,235,245,.62); --label3:rgba(235,235,245,.34); --tint:#0a9d8f; --tint-t:#5fd8c8; --tint-l:rgba(10,157,143,.20); --gold:#e0b040; --gold-l:rgba(224,176,64,.18); --bar:rgba(28,28,30,.86); --warn-bg:rgba(255,149,0,.20); --warn-fg:#ffb45c; --danger-bg:rgba(255,59,48,.20); --danger-fg:#ff8a80; --ok-bg:rgba(52,199,89,.20); --ok-fg:#5ede84; --gold-bg:rgba(224,176,64,.18); --gold-fg:#f0cd7a; --soft:#2c2c2e; --press:#2c2c2e; --shadow:rgba(0,0,0,.5); --hair:rgba(255,255,255,.20); color-scheme:dark; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased} html,body{margin:0;padding:0} body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,sans-serif; background:var(--bg);color:var(--label);min-height:100vh} body:has(#phone.dark){background:#000} /* ===== Responsive: la app llena CUALQUIER pantalla (móvil, tableta, plegable). En tabletas (≥600px) el contenido se centra a un ancho cómodo, con fondo continuo (sin marco). El "marco de iPhone" queda SOLO para escritorio con ratón en navegador (previsualización) — ver bloque al final de Tab bar. ===== */ .phone{position:relative;width:100%;max-width:none;height:100vh;height:100dvh;background:var(--bg);overflow:hidden;color:var(--label);margin:0 auto} @media(min-width:600px){.phone{max-width:680px}} .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:118px;height:33px; background:#000;border-radius:20px;z-index:200;pointer-events:none;display:none} /* ===== Status bar ===== */ .status{position:absolute;top:0;left:0;right:0;height:54px;z-index:120;display:flex;align-items:center; justify-content:space-between;padding:16px 30px 0;font-size:15px;font-weight:600;color:var(--label);pointer-events:none} .status .r{display:flex;align-items:center;gap:6px} .status svg{display:block} .status{height:0;padding-top:0} .status #clock,.status .r{display:none} /* ===== Screens ===== */ .app{position:absolute;inset:0} .tabpage{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch; padding-top:54px;padding-bottom:96px;display:none} .tabpage.on{display:block;animation:fade .25s ease} @keyframes fade{from{opacity:0}to{opacity:1}} .tabpage{padding-top:10px} .detail{position:absolute;inset:0;background:var(--bg);overflow-y:auto;z-index:100; transform:translateX(100%);transition:transform .36s cubic-bezier(.32,.72,0,1); padding-top:0;padding-bottom:40px} .detail.open{transform:translateX(0);box-shadow:-8px 0 24px rgba(0,0,0,.12)} /* ===== Nav bars ===== */ .navlg{padding:6px 20px 4px} .navlg h1{font-size:34px;font-weight:800;letter-spacing:-.5px;margin:4px 0 2px} .navlg .sub{font-size:15px;color:var(--label2);margin-bottom:4px} .navbar{position:sticky;top:0;z-index:30;height:48px;display:flex;align-items:center;justify-content:center; background:var(--bar);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:.5px solid var(--sep);font-size:17px;font-weight:600;padding-top:0} .navbar.clear{background:transparent;border:0;position:absolute;left:0;right:0;top:0} .navbar .back{position:absolute;left:8px;display:flex;align-items:center;gap:3px;color:var(--tint); font-size:17px;font-weight:400;background:none;border:0;cursor:pointer;padding:8px} .navbar .back svg{width:12px;height:20px} .navbar.clear .back{background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border-radius:50%; width:34px;height:34px;justify-content:center;padding:0;left:14px;top:8px} /* ===== Inset grouped list ===== */ .group{background:var(--card);margin:0 16px 22px;border-radius:var(--r);overflow:hidden} .group.first{margin-top:8px} .glabel{font-size:13px;color:var(--label2);text-transform:uppercase;letter-spacing:.3px; margin:22px 32px 7px;font-weight:500} .cell{display:flex;align-items:center;gap:12px;padding:12px 16px;position:relative;cursor:pointer; background:var(--card);transition:background .15s} .cell:active{background:var(--press)} /* Esqueleto de carga: da forma a la espera en vez de un "Cargando…" suelto. Con la latencia de Malabo, ver la silueta del contenido hace que la espera se perciba mucho más corta. */ @keyframes bpShine{0%{background-position:-340px 0}100%{background-position:340px 0}} .sk{background:linear-gradient(90deg, rgba(60,60,67,.07) 25%, rgba(60,60,67,.14) 37%, rgba(60,60,67,.07) 63%); background-size:680px 100%; animation:bpShine 1.3s linear infinite; border-radius:7px} .sk-ic{width:36px;height:36px;border-radius:10px;flex:none} @media (prefers-reduced-motion:reduce){ .sk{animation:none} } .cell + .cell::before{content:"";position:absolute;top:0;left:60px;right:0;height:.5px;background:var(--sep)} .cell .ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center; font-size:16px;flex-shrink:0;background:var(--tint-l)} .cell .ic.gold{background:var(--gold-l)} .cell .ic.gray{background:var(--soft)} .cell .tx{flex:1;min-width:0} .cell .tt{font-size:16px;font-weight:500;letter-spacing:-.2px} .cell .dd{font-size:13px;color:var(--label2);margin-top:1px} .cell .rr{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--label2);font-size:15px;flex-shrink:0} .chev{color:var(--label3)} .chev svg{width:8px;height:13px;display:block} .amt{font-weight:600;font-size:16px} .amt.p{color:var(--green)} .amt.m{color:var(--label2)} /* ===== Loyalty card ===== */ .wallet{margin:8px 16px 4px} .lcard{border-radius:var(--rl);padding:20px;color:#fff;position:relative;overflow:hidden; background:linear-gradient(140deg,#0fb3a3 0%,#0a9d8f 45%,#07746a 100%); box-shadow:0 12px 30px rgba(10,120,110,.35)} .lcard::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%; background:rgba(255,255,255,.08);top:-70px;right:-50px} .lcard .brand{font-size:13px;font-weight:700;letter-spacing:1.5px;opacity:.9;text-transform:uppercase} .lcard .lbl{font-size:12px;opacity:.85;margin-top:14px;text-transform:uppercase;letter-spacing:.5px} .lcard .pts{font-size:42px;font-weight:800;line-height:1;letter-spacing:-1px;margin-top:2px} .lcard .pts small{font-size:17px;font-weight:600;opacity:.85} .lcard .tier{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13px;font-weight:600} .lcard .bar{flex:1;height:7px;background:rgba(255,255,255,.25);border-radius:99px;overflow:hidden} .lcard .bar>i{display:block;height:100%;width:62%;background:var(--gold);border-radius:99px} .qrcard{background:var(--card);margin:14px 16px 4px;border-radius:var(--rl);padding:20px; display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,.05)} .qrcard svg.qr{width:172px;height:172px} .qrcard .hint{font-size:13px;color:var(--label2);margin-top:12px;display:flex;align-items:center;gap:7px} .dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;animation:pulse 1.4s infinite} @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}} /* ===== Search + segmented ===== */ .searchbar{margin:6px 16px 4px;display:flex;align-items:center;gap:7px;background:var(--soft); border-radius:11px;padding:9px 12px;color:var(--label2);font-size:17px} .segmented{display:flex;background:var(--soft);border-radius:10px;padding:2px;margin:12px 16px 4px} .segmented button{flex:1;border:0;background:none;font-size:14px;font-weight:600;color:var(--label); padding:7px;border-radius:8px;cursor:pointer;transition:.2s} .segmented button.on{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.14)} /* ===== Map ===== */ .mapwrap{margin:10px 16px;border-radius:var(--rl);overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.08); position:relative;height:430px} .leaflet-container{background:var(--soft);font:inherit} .leaflet-tile-pane{filter:saturate(.85) brightness(1.02)} .leaflet-control-attribution{font-size:9px;opacity:.6} .pin{width:34px;height:34px;border-radius:50% 50% 50% 2px;transform:rotate(45deg); background:var(--tint);border:2.5px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.3); display:flex;align-items:center;justify-content:center} .pin span{transform:rotate(-45deg);font-size:15px} .pin.gold{background:var(--gold)} .pin.me{background:#007aff;border-radius:50%;width:22px;height:22px} .mapcard{position:absolute;left:12px;right:12px;bottom:12px;z-index:500;background:var(--card);border-radius:16px; padding:12px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 6px 20px rgba(0,0,0,.18)} .mapcard .ic{width:42px;height:42px;border-radius:11px;background:var(--tint-l);display:flex; align-items:center;justify-content:center;font-size:20px} .minimap{height:150px;border-radius:14px;overflow:hidden;margin-top:4px} /* ===== Ficha ===== */ .hero{height:230px;position:relative;display:flex;align-items:flex-end; background:linear-gradient(150deg,#0fb3a3,#0a7d72);color:#fff;padding:18px 20px} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.35),transparent 55%)} .hero .info{position:relative;z-index:2} .hero .cat{font-size:13px;font-weight:600;background:rgba(255,255,255,.22);backdrop-filter:blur(8px); padding:4px 11px;border-radius:99px;display:inline-block;margin-bottom:8px} .hero h1{margin:0;font-size:28px;font-weight:800;letter-spacing:-.5px;text-shadow:0 2px 8px rgba(0,0,0,.3)} .hero .meta{font-size:14px;margin-top:3px;opacity:.95} .promo{margin:14px 16px 0;background:var(--gold-l);border-radius:var(--r);padding:14px; display:flex;align-items:center;gap:13px} .promo .big{font-size:26px;font-weight:800;color:var(--gold)} /* ===== Buttons ===== */ .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 32px);margin:14px 16px 0; background:var(--tint);color:#fff;border:0;border-radius:14px;padding:15px;font-size:17px; font-weight:600;cursor:pointer;transition:transform .1s,filter .1s} .btn:active{transform:scale(.975);filter:brightness(.95)} .btn.gold{background:var(--gold)} .btn.ghost{background:var(--tint-l);color:var(--tint-t)} .btn.dark{background:#1c1c1e} /* ===== Prizes ===== */ .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:6px 16px} .prize{background:var(--card);border-radius:18px;overflow:hidden;cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.06);transition:transform .12s} .prize:active{transform:scale(.97)} .prize .ph{height:92px;display:flex;align-items:center;justify-content:center;font-size:38px;background:var(--tint-l);position:relative;overflow:hidden} .prize .ph.g{background:var(--gold-l)} .prize .bd{padding:12px 13px 14px} .prize .nm{font-size:14px;font-weight:600;letter-spacing:-.2px;line-height:1.25} .prize .co{display:flex;align-items:center;justify-content:space-between;margin-top:9px} .prize .pc{font-size:15px;font-weight:800;color:var(--tint-t)} .pill{font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--tint-l);color:var(--tint-t)} .pill.gold{background:var(--gold-l);color:var(--gold)} .pill.lock{background:var(--soft);color:var(--label2)} /* ===== Profile ===== */ .phead{display:flex;flex-direction:column;align-items:center;padding:6px 20px 10px;text-align:center} .avatar{width:78px;height:78px;border-radius:50%;background:linear-gradient(140deg,#0fb3a3,#07746a); color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700; box-shadow:0 8px 20px rgba(10,120,110,.3)} .phead h2{margin:12px 0 2px;font-size:22px;font-weight:700} .phead .p{font-size:14px;color:var(--label2)} .progress{background:var(--card);margin:8px 16px 0;border-radius:var(--rl);padding:16px} .progress .top{display:flex;justify-content:space-between;align-items:center} .progress .pct{font-size:22px;font-weight:800;color:var(--gold)} .progress .track{height:9px;background:var(--soft);border-radius:99px;margin-top:12px;overflow:hidden} .progress .track>i{display:block;height:100%;width:62%;background:var(--gold);border-radius:99px} .badges{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;padding:6px 16px} .bdg{background:var(--card);border-radius:15px;padding:14px 4px;text-align:center;font-size:28px; box-shadow:0 3px 10px rgba(0,0,0,.05)} .bdg small{display:block;font-size:10.5px;color:var(--label2);margin-top:5px;font-weight:600} .bdg.off{opacity:.3} /* ===== Tab bar ===== */ .tabbar{position:absolute;bottom:0;left:0;right:0;z-index:60;padding-bottom:22px; background:var(--bar);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px); border-top:.5px solid var(--sep);display:flex} .tabbar{padding-bottom:8px} .tabbar button{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px; padding:8px 0 2px;color:var(--label3);font-size:10px;font-weight:500;cursor:pointer} .tabbar button svg{width:26px;height:26px} /* ===== Orientación: la app es VERTICAL. En móviles apaisados (pantalla baja), aviso a pantalla completa pidiendo girar. Tabletas no se bloquean. ===== */ #rotateOverlay{display:none;position:fixed;inset:0;z-index:9999;background:var(--tint-d);color:#fff; flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:10px} @media (orientation:landscape) and (max-height:520px){ #rotateOverlay{display:flex} } /* ===== Marco de iPhone SOLO en escritorio con ratón (previsualización en navegador) ===== */ @media(min-width:1024px) and (hover:hover) and (pointer:fine) and (display-mode:browser){ body{background:var(--bg);padding:22px 0;display:flex;justify-content:center;align-items:center} body:has(#phone.dark){background:var(--bg)} .phone{max-width:400px;height:860px;max-height:94vh;border-radius:52px;border:13px solid #0a0a0c; box-shadow:0 30px 70px rgba(0,0,0,.4),0 4px 10px rgba(0,0,0,.3)} .island{display:block} .status{height:54px;padding:16px 30px 0} .status #clock{display:inline} .status .r{display:flex} .tabpage{padding-top:54px} .tabbar{padding-bottom:22px} } .tabbar button.on{color:var(--tint)} /* ===== Success ===== */ .success{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 28px 0} .check{width:96px;height:96px;border-radius:50%;background:var(--green);color:#fff;display:flex; align-items:center;justify-content:center;margin-bottom:20px;animation:pop .45s cubic-bezier(.2,1.4,.5,1)} .check svg{width:48px;height:48px} @keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}} .success h2{margin:0 0 5px;font-size:25px;font-weight:800;letter-spacing:-.4px} .success .sub{color:var(--label2);font-size:15px} .bigpts{font-size:36px;font-weight:800;color:var(--tint-t);margin:16px 0;letter-spacing:-1px} .note{font-size:12.5px;color:var(--label3);text-align:center;margin:18px 24px 0} /* ===== Commerce keypad ===== */ .cam{height:320px;margin:14px 16px;border-radius:var(--rl);background:#0c0f0e;position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center} .cam .frame{width:210px;height:210px;border-radius:24px;position:relative; box-shadow:0 0 0 2000px rgba(0,0,0,.45)} .cam .frame i{position:absolute;width:30px;height:30px;border:3px solid var(--gold)} .cam .frame i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0;border-radius:14px 0 0 0} .cam .frame i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0;border-radius:0 14px 0 0} .cam .frame i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0;border-radius:0 0 0 14px} .cam .frame i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0;border-radius:0 0 14px 0} .cam .scan{position:absolute;left:0;right:0;height:2px;background:var(--gold);box-shadow:0 0 16px 2px var(--gold); animation:sc 2.4s infinite ease-in-out} @keyframes sc{0%,100%{top:6%}50%{top:94%}} .cam .hint{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#d8efe c;font-size:13px;color:#cfe8e3} .display{background:var(--card);margin:8px 16px 0;border-radius:16px;padding:20px;text-align:right; font-size:34px;font-weight:800;letter-spacing:-1px} .display small{font-size:15px;color:var(--label2);font-weight:600} .keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:14px 16px 0} .key{background:var(--card);border:0;border-radius:14px;padding:17px;font-size:24px;font-weight:600; cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08)} .key:active{background:var(--press)} .calc{text-align:center;margin-top:13px;color:var(--label2);font-size:15px} .stat{background:var(--card);border-radius:16px;padding:14px 15px} .stat .k{font-size:13px;color:var(--label2)} .stat .v{font-size:26px;font-weight:800;letter-spacing:-.5px;margin-top:2px} .ribbon{background:var(--gold-l);color:var(--gold);font-size:12.5px;font-weight:600;text-align:center;padding:8px} .demoswitch{position:absolute;bottom:120px;right:14px;z-index:90;background:rgba(28,28,30,.82); backdrop-filter:blur(10px);color:#fff;border:0;border-radius:99px;padding:9px 14px; font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)} .switch{position:relative;display:inline-block;width:46px;height:28px;flex-shrink:0} .switch input{opacity:0;width:0;height:0} .switch .slider{position:absolute;inset:0;background:var(--label3);border-radius:28px;transition:.2s;cursor:pointer} .switch .slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;background:var(--card);border-radius:50%;transition:.2s} .switch input:checked+.slider{background:var(--tint,var(--tint))} .switch input:checked+.slider:before{transform:translateX(18px)} /* ===== Celebración estilo Duolingo ===== */ #celebrate{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;flex-direction:column;pointer-events:none} #celebrate.on{display:flex} #celebrate .cele-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%, rgba(10,157,143,.32), rgba(0,0,0,.42));animation:bpFadeIn .25s ease-out} #celebrate .cele-logo{width:118px;height:118px;object-fit:cover;border-radius:50%;position:relative;animation:bpPop .55s cubic-bezier(.2,1.3,.4,1), bpWiggle .6s ease-in-out .55s 1;box-shadow:0 8px 26px rgba(0,0,0,.4)} #celebrate .cele-pts{position:relative;margin-top:16px;font-size:42px;font-weight:900;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.45);animation:bpPop .5s cubic-bezier(.2,1.3,.4,1) .15s both} #celebrate .cele-sub{position:relative;margin-top:4px;font-size:15px;font-weight:700;color:#ffe9a8;animation:bpPop .5s ease-out .28s both} .confetti{position:absolute;top:-16px;width:10px;height:14px;border-radius:2px;will-change:transform;animation:bpFall linear forwards} @keyframes bpPop{0%{transform:scale(.2);opacity:0}55%{transform:scale(1.18);opacity:1}75%{transform:scale(.94)}100%{transform:scale(1);opacity:1}} @keyframes bpWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}} @keyframes bpFall{to{transform:translateY(112vh) rotate(720deg);opacity:.15}} @keyframes bpFadeIn{from{opacity:0}to{opacity:1}} /* ===== Fotos reales ===== */ .ph img,.thumb img,.heroimg,.ic-as img,.feature>img,.ai img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .em{position:relative;z-index:0} /* tarjeta destacada estilo App Store */ .feature{margin:10px 16px 6px;border-radius:22px;overflow:hidden;position:relative;height:400px;cursor:pointer; box-shadow:0 10px 28px rgba(0,0,0,.16)} .feature .grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,.04) 56%);z-index:1} .feature .cap{position:absolute;left:18px;right:18px;bottom:76px;color:#fff;z-index:3} .feature .kick{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:.95} .feature .ftt{font-size:28px;font-weight:800;letter-spacing:-.5px;margin-top:5px;line-height:1.08;text-shadow:0 2px 12px rgba(0,0,0,.35)} .feature .fbar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:11px; padding:12px 14px;background:rgba(255,255,255,.16);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .feature .ai{width:42px;height:42px;border-radius:11px;overflow:hidden;position:relative;background:var(--gold-l); display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0} .feature .fm{flex:1;color:#fff;min-width:0} .feature .fm b{display:block;font-size:15px;font-weight:600} .feature .fm span{font-size:13px;opacity:.9} .openbtn{background:rgba(255,255,255,.92);color:var(--tint-t);border:0;border-radius:99px;padding:7px 18px; font-size:15px;font-weight:700;cursor:pointer;flex-shrink:0} .openbtn.sm{padding:5px 14px;font-size:13px;background:var(--soft)} /* tarjeta-promo estilo App Store */ .promo-as{margin:14px 16px 4px;background:var(--card);border-radius:18px;padding:12px 14px;display:flex; align-items:center;gap:13px;box-shadow:0 4px 14px rgba(0,0,0,.06);cursor:pointer} .promo-as .ic-as{width:54px;height:54px;border-radius:13px;overflow:hidden;position:relative;display:flex; align-items:center;justify-content:center;font-size:26px;background:var(--tint-l);flex-shrink:0} .promo-as .m{flex:1;min-width:0} .promo-as .m b{font-size:16px;font-weight:600} .promo-as .m span{display:block;font-size:13px;color:var(--label2)} /* miniaturas en Descubrir */ .cell.big{padding:11px 16px} .cell.big .thumb{width:54px;height:54px;border-radius:13px;overflow:hidden;position:relative;flex-shrink:0; display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--tint-l)} .cell.big + .cell.big::before{left:84px} /* ===== Catálogo: tarjeta de producto / servicio (cliente y comercio) ===== */ .catwrap{padding:2px 16px 6px} .catwrap .glabel{padding:14px 0 8px 2px} .prod{display:flex;gap:13px;align-items:center;background:var(--card);border:.5px solid var(--sep); border-radius:16px;padding:9px;margin-bottom:11px;position:relative;cursor:pointer; box-shadow:0 2px 11px rgba(0,0,0,.05);transition:transform .12s ease,box-shadow .12s ease} .prod:active{transform:scale(.985);box-shadow:0 1px 5px rgba(0,0,0,.07)} .prod .pimg{width:84px;height:84px;border-radius:13px;overflow:hidden;flex-shrink:0;position:relative; background:linear-gradient(135deg,var(--tint-l),var(--gold-l));display:flex;align-items:center;justify-content:center} .prod .pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .prod .pimg .emoji{font-size:33px} .prod .pbody{flex:1;min-width:0} .prod .pname{font-size:15.5px;font-weight:650;letter-spacing:-.2px;line-height:1.25;color:var(--label)} .prod .pdesc{font-size:12.5px;color:var(--label2);margin-top:3px;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .prod .pfoot{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap} .prod .price{font-size:14.5px;font-weight:800;color:var(--tint-t);letter-spacing:-.3px} .prod .price .cur{font-size:11px;font-weight:700;opacity:.7;margin-left:1px} .prod .badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--gold-l); color:#a97d16;display:inline-flex;align-items:center;gap:3px;white-space:nowrap} .prod .badge.tint{background:var(--tint-l);color:var(--tint-t)} .prod .pchev{align-self:center;margin-left:2px;color:var(--label3);font-size:20px;font-weight:400;flex-shrink:0} .prod .padd{align-self:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;border:none;background:var(--tint); color:#fff;font-size:20px;font-weight:600;line-height:1;cursor:pointer;box-shadow:0 3px 9px rgba(10,157,143,.35)} .prod .padd:active{transform:scale(.88)} .qbtn{width:29px;height:29px;border-radius:50%;border:1px solid var(--sep);background:var(--bg); color:var(--tint-t);font-size:16px;font-weight:700;cursor:pointer;line-height:1} /* distintivo rojo en pestañas (pedidos sin leer / pendientes) */ .tbadge{display:none;position:absolute;top:-2px;left:calc(50% + 4px);background:var(--red);color:#fff; font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:9px; align-items:center;justify-content:center;padding:0 4px;line-height:1;z-index:2; box-shadow:0 1px 4px rgba(0,0,0,.25)} .hero .heroimg{z-index:0}.hero .info{z-index:2} /* ===== Editorial App Store (kicker + título + carrusel) ===== */ .skick{font-size:13px;font-weight:700;color:var(--label2);text-transform:uppercase;letter-spacing:.4px;margin:24px 16px 0} .stitle{font-size:23px;font-weight:800;letter-spacing:-.5px;margin:1px 16px 10px;line-height:1.1} .hscroll{display:flex;gap:13px;overflow-x:auto;padding:0 16px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .hscroll::-webkit-scrollbar{display:none} .hcard{flex:0 0 152px;cursor:pointer} .hcard .ph2{height:118px;border-radius:16px;overflow:hidden;position:relative;background:var(--tint-l); display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:0 4px 13px rgba(0,0,0,.07)} .hcard .ph2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hcard .b2{position:absolute;top:8px;left:8px;z-index:2;background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px} .hcard .nm{font-size:14.5px;font-weight:600;margin-top:8px;letter-spacing:-.2px;line-height:1.2} .hcard .sb{font-size:12.5px;color:var(--label2);margin-top:1px} /* iconos de categoría estilo línea (como el menú del comercio) */ .thumb svg{width:30px;height:30px;color:var(--tint-t)} .hcard .ph2 svg{width:42px;height:42px;color:var(--tint-t)} .cell .ic svg{width:20px;height:20px;color:var(--tint-t)} .cell .ic.gold svg{color:var(--gold)} .cell .ic.gray svg{color:var(--label2)} .cell .ic[style*="fdecec"] svg{color:#d4543f} .cell .ic[style*="fff3e0"] svg{color:var(--warn-fg)} .bdg svg{width:30px;height:30px;color:var(--tint-t);display:block;margin:0 auto 3px} .bdg.tg svg{color:var(--gold)} .bdg.off svg{color:var(--label2)} .ob-inp{width:100%;height:52px;border:1px solid var(--sep);border-radius:13px;padding:0 16px;font-size:16px;background:var(--card);color:var(--label);box-sizing:border-box;margin-top:2px} .ob-inp:focus{outline:none;border-color:var(--tint)} .qcode{text-align:center;font-weight:800;font-size:21px;letter-spacing:4px;color:var(--label);margin:10px 0 2px;font-variant-numeric:tabular-nums} .scan-manual{display:flex;gap:8px;margin:18px 16px 10px} .hgchip{padding:7px 12px;border-radius:20px;border:1px solid var(--sep);font-size:13.5px;font-weight:600;cursor:pointer;user-select:none;background:var(--bg);color:var(--label)} .hgchip.on{background:var(--tint);border-color:var(--tint);color:#fff} /* El campo acepta el código (8) y también un TELÉFONO (9+): con letter-spacing 2px y 17px los últimos dígitos se salían de la parte visible. Más ajustado para que un número completo quepa entero, sin perder legibilidad. */ .scan-manual input{flex:1;min-width:0;height:50px;border:1px solid var(--sep);border-radius:13px;padding:0 12px;font-size:16px;letter-spacing:.5px;text-transform:uppercase;background:var(--card);color:var(--label);box-sizing:border-box} .scan-manual input:focus{outline:none;border-color:var(--tint)} /* ===== Tarjeta simple (puntos + QR grandes) ===== */ .simple{margin:20px 16px;background:var(--card);border-radius:26px;padding:30px 20px 24px;text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.08)} .simple .lbl{font-size:13px;color:var(--label2);text-transform:uppercase;letter-spacing:.8px;font-weight:700} .simple .bignum{font-size:64px;font-weight:800;letter-spacing:-2.5px;line-height:1;margin:6px 0 4px;color:var(--tint-t)} .simple .bignum small{font-size:22px;font-weight:600;color:var(--label2);letter-spacing:0} .simple .tier2{font-size:14.5px;color:var(--label2);font-weight:600;margin-bottom:22px} .simple .tier2 b{color:var(--gold)} .qrbig{width:100%;max-width:290px;margin:0 auto;padding:16px;background:var(--card);border:1px solid var(--sep);border-radius:20px} .qrbig svg{width:100%;height:auto;display:block} .hint2{font-size:13px;color:var(--label2);margin-top:18px;display:flex;align-items:center;justify-content:center;gap:7px} /* botón localizar en el mapa */ .locbtn{position:absolute;right:12px;top:12px;z-index:500;width:44px;height:44px;border-radius:13px;background:var(--card);border:0; box-shadow:0 3px 12px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tint)} .locbtn svg{width:23px;height:23px} /* ===== Tarjeta: puntos en color + QR distinguible ===== */ .ptscard{margin:18px 16px 14px;border-radius:24px;padding:24px 22px;color:#fff;position:relative;overflow:hidden; background:linear-gradient(140deg,#12b9a7 0%,#0a9d8f 52%,#076e64 100%);box-shadow:0 14px 34px rgba(10,120,110,.34)} .ptscard::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.09);top:-95px;right:-65px} .ptscard .brandline{font-size:16px;font-weight:800;letter-spacing:.3px;position:relative;z-index:1;margin-bottom:14px} .ptscard .brandline .bk{color:#fff} .ptscard .brandline .ps{color:#ffd97a} .ptscard .pl{font-size:13px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;opacity:.9;position:relative;z-index:1} .ptscard .pn{font-size:62px;font-weight:800;letter-spacing:-2.5px;line-height:1;margin:5px 0;position:relative;z-index:1} .ptscard .pn small{font-size:22px;font-weight:600;opacity:.85;letter-spacing:0} .ptscard .pt{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;margin-top:8px;position:relative;z-index:1} .ptscard .pb{flex:1;height:8px;background:rgba(255,255,255,.25);border-radius:99px;overflow:hidden} .ptscard .pb>i{display:block;height:100%;width:62%;background:var(--gold);border-radius:99px} .qrwrap2{margin:0 16px;background:var(--card);border-radius:24px;padding:20px;text-align:center;box-shadow:0 8px 26px rgba(0,0,0,.07)} .qrwrap2 .qt{font-size:12.5px;color:var(--label2);text-transform:uppercase;letter-spacing:.8px;font-weight:700;margin-bottom:14px} /* ===== Perfil con color ===== */ .profcard{margin:10px 16px 4px;border-radius:24px;padding:20px;display:flex;align-items:center;gap:16px;color:#fff; position:relative;overflow:hidden;background:linear-gradient(135deg,#12b9a7,#0a8d80 58%,#0a6d79);box-shadow:0 12px 30px rgba(10,120,110,.3)} .profcard::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.1);top:-80px;right:-50px} .profcard .pav{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.55); display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:700;flex-shrink:0;position:relative;z-index:1} .profcard .pi{position:relative;z-index:1} .profcard h2{margin:0;font-size:21px;font-weight:700} .profcard .ps{font-size:13.5px;opacity:.92;margin-top:2px} .progress2{margin:8px 16px 0;background:var(--gold-l);border:1px solid #f0dca6;border-radius:20px;padding:16px} .progress2 .top{display:flex;justify-content:space-between;align-items:center} .progress2 .pct{font-size:22px;font-weight:800;color:var(--gold)} .progress2 .track{height:9px;background:var(--card);border-radius:99px;margin-top:12px;overflow:hidden} .progress2 .track>i{display:block;height:100%;width:62%;background:var(--gold);border-radius:99px} .bdg.tt{background:var(--tint-l)} .bdg.tt small{color:var(--tint-t)} .bdg.tg{background:var(--gold-l)} .bdg.tg small{color:var(--gold)} /* ===== Onboarding / registro ===== */ #onboarding{position:absolute;inset:0;z-index:110;background:var(--bg);display:none} #onboarding.show{display:block} .ob{position:absolute;inset:0;display:none;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch} .ob.on{display:flex;animation:fade .3s ease} .ob-pad{padding:104px 26px 28px;display:flex;flex-direction:column;flex:1} .ob-back{position:absolute;top:58px;left:18px;z-index:5;width:38px;height:38px;border-radius:50%;border:0; background:rgba(0,0,0,.06);color:var(--label);font-size:22px;cursor:pointer;line-height:1} .ob h1{font-size:27px;font-weight:800;letter-spacing:-.6px;margin:0 0 8px} .ob-sub{font-size:15px;color:var(--label2);margin:0 0 20px;line-height:1.5} .ob-hero{height:45%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center} .ob-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ob-hero .g{position:absolute;inset:0;background:linear-gradient(160deg,rgba(10,157,143,.5),rgba(7,110,100,.82))} .ob-logo{position:relative;z-index:2;font-size:36px;font-weight:800;letter-spacing:.5px} .ob-logo .bk{color:#fff}.ob-logo .ps{color:#ffd97a} .ob-body{flex:1;padding:26px 26px 30px;display:flex;flex-direction:column} .ob-welcome .ob-body h1,.ob-welcome .ob-body .ob-sub{text-align:center} .ob-feats{display:flex;flex-direction:column;gap:13px;margin:4px 0 auto} .ob-feat{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500} .ob-feat .fi{width:38px;height:38px;border-radius:11px;background:var(--tint-l);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0} .ob-feat .fi svg{width:21px;height:21px;color:var(--tint-t)} .ob-label{font-size:13px;font-weight:700;color:var(--label2);text-transform:uppercase;letter-spacing:.4px;margin:16px 2px 8px} .ob-phone{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--sep);border-radius:13px;padding:0 14px} .ob-phone .cc{font-size:16px;font-weight:600;white-space:nowrap} .ob-phone input{flex:1;border:0;outline:none;font-size:17px;padding:14px 0;background:none} .ob-seg{margin:0} .ob-legal{font-size:12px;color:var(--label3);text-align:center;margin:14px 6px 12px;line-height:1.4} .ob-check{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--label2);line-height:1.45;margin:6px 2px 14px} .ob-check input{width:22px;height:22px;flex-shrink:0;accent-color:var(--tint);margin-top:1px;cursor:pointer} .ob-check a{color:var(--tint);font-weight:600;text-decoration:underline;cursor:pointer} .btn.disabled{opacity:.45;pointer-events:none} .ob-terms-pad{overflow-y:auto;-webkit-overflow-scrolling:touch} .ob-terms-pad h3{font-size:16px;font-weight:700;margin:18px 0 5px;color:var(--label)} .ob-terms-pad p{font-size:13.5px;color:var(--label2);line-height:1.55;margin:0 0 8px} .ob-terms-pad .tc-note{background:var(--tint-l);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--tint-t);margin:10px 0 8px;line-height:1.5} .ob-link{background:none;border:0;color:var(--tint);font-size:15px;font-weight:600;cursor:pointer;margin-top:16px;align-self:flex-start} .ob-otp{display:flex;gap:12px;justify-content:center;margin:8px 0} .ob-otp input{width:54px;height:64px;border:1.5px solid var(--sep);border-radius:14px;text-align:center;font-size:26px;font-weight:700;outline:none;background:var(--card)} .ob-otp input:focus{border-color:var(--tint)} .ob-success{align-items:center;justify-content:center;text-align:center;padding:30px} .ob-emoji{font-size:62px;margin-bottom:4px} .bico{width:18px;height:18px;flex:0 0 auto;vertical-align:-3px} .glabel .bico,.note .bico{width:16px;height:16px;vertical-align:-3px;margin-right:4px} .ob-ico{width:62px;height:62px;margin:0 0 6px;color:var(--tint)} .ob-ico svg{width:100%;height:100%;display:block} .ob-success .ob-ico{margin:0 auto 6px} .ob-bonus{font-size:42px;font-weight:800;color:var(--tint-t);letter-spacing:-1px;margin:14px 0 8px} .ob .btn{margin-left:0;margin-right:0;width:100%} /* prefijo teléfono (selector abierto) */ .ob-phone .cc-sel{border:0;background:none;font-size:16px;font-weight:600;padding:14px 2px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;color:var(--label)} .ob-phone .cc-div{width:1px;height:24px;background:var(--sep);flex-shrink:0} .ob-wa{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ok-fg);font-weight:600;margin:10px 2px 0} /* bienvenida dinámica */ @keyframes obZoom{0%{transform:scale(1.05)}100%{transform:scale(1.18)}} @keyframes obUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} .ob-welcome.on .ob-hero img{animation:obZoom 13s ease-in-out infinite alternate} .ob-welcome.on .ob-logo{opacity:0;animation:obUp .6s ease .1s forwards} .ob-welcome.on .ob-body>*{opacity:0;animation:obUp .55s ease forwards} .ob-welcome.on .ob-body>*:nth-child(1){animation-delay:.15s} .ob-welcome.on .ob-body>*:nth-child(2){animation-delay:.25s} .ob-welcome.on .ob-body>*:nth-child(3){animation-delay:.35s} .ob-welcome.on .ob-body>*:nth-child(4){animation-delay:.5s} .ob-welcome.on .ob-body>*:nth-child(5){animation-delay:.6s} /* confeti animado */ .confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .confetti i{position:absolute;top:-14px;width:9px;height:15px;opacity:.95;animation:confFall linear forwards} @keyframes confFall{0%{transform:translateY(-10px) rotate(0)}100%{transform:translateY(940px) rotate(680deg)}} .ob-success>*:not(.confetti){position:relative;z-index:1} /* Tarjeta: todo en una sola vista, sin scroll */ .tabpage.tcard.on{display:flex;flex-direction:column;overflow:hidden} .tcard-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:0;padding-bottom:6px} .tcard .ptscard{margin:0 16px;padding:20px 22px} .tcard .ptscard .brandline{margin-bottom:10px;font-size:15px} .tcard .ptscard .pn{font-size:54px;margin:3px 0} .tcard .qrwrap2{margin:0 16px;padding:16px} .tcard .qrwrap2 .qt{margin-bottom:10px} .tcard .qrbig{max-width:226px;padding:14px} .tcard .hint2{margin-top:11px;font-size:12.5px} /* buscador funcional + chips */ .searchbar input{flex:1;border:0;background:none;outline:none;font-size:17px;color:var(--label);min-width:0;padding:0} .searchbar input::placeholder{color:var(--label2)} .chips{display:flex;gap:8px;overflow-x:auto;padding:10px 16px 2px;scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .fil{flex-shrink:0;border:1px solid var(--sep);background:var(--card);color:var(--label);font-size:13.5px;font-weight:600; padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:.15s} .fil.on{background:var(--tint);color:#fff;border-color:var(--tint)} /* panel del comercio: configuración */ .cfg-head{display:flex;justify-content:space-between;align-items:baseline;margin:22px 16px 7px} .cfg-head .lbl{font-size:13px;color:var(--label2);text-transform:uppercase;letter-spacing:.3px;font-weight:500} .cfg-head .add{font-size:14px;color:var(--tint);font-weight:600;background:none;border:0;cursor:pointer;padding:0} .promo-st{font-size:12.5px;font-weight:600;border:0;background:none;cursor:pointer;color:var(--green)} .promo-st.off{color:var(--label3)} /* alta de comercios */ .ob-field{background:var(--card);border:1px solid var(--sep);border-radius:13px;padding:0 14px;margin-bottom:2px} .ob-field input,.ob-field select{width:100%;border:0;outline:none;font-size:17px;padding:14px 0;background:none;color:var(--label);-webkit-appearance:none;appearance:none} .ob-bizlink{background:none;border:0;color:var(--tint);font-size:14px;font-weight:600;cursor:pointer;margin-top:16px;width:100%;text-align:center} .planc{border:1.5px solid var(--sep);border-radius:16px;padding:14px 16px;margin-bottom:10px;cursor:pointer;display:flex;align-items:center;gap:12px;background:var(--card)} .planc.sel{border-color:var(--tint);background:var(--tint-l)} .planc .pname{font-weight:700;font-size:16px} .planc .pprice{font-size:13px;color:var(--label2);margin-top:2px} .planc .pbadge{font-size:11px;font-weight:700;color:var(--tint-t);background:var(--card);padding:2px 8px;border-radius:99px;margin-left:6px} .planc .pradio{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--sep);flex-shrink:0} .planc.sel .pradio{border-color:var(--tint);background:var(--tint);box-shadow:inset 0 0 0 3px #fff} /* medallón de logo en bienvenida + slot de logo en la tarjeta */ .ob-badge{width:150px;height:150px;border-radius:50%;background:#000;overflow:hidden;border:5px solid var(--tint); display:flex;align-items:center;justify-content:center;align-self:center; margin:-96px 0 14px;position:relative;z-index:3} .ob-badge img{width:100%;height:100%;object-fit:cover} .ob-badge.white{background:var(--card)} .ptscard .pts-row{display:flex;align-items:center;justify-content:space-between;gap:12px} .ptscard .card-logo{flex-shrink:0;z-index:2; width:64px;height:64px;border-radius:50%;background:#000;overflow:hidden;border:3px solid var(--tint); display:flex;align-items:center;justify-content:center} .ptscard .card-logo img{width:100%;height:100%;object-fit:cover} /* pantalla de inicio con fondo negro */ #ob-welcome .ob-body{background:#000;color:#fff} #ob-welcome .ob-body .ob-sub{color:rgba(235,235,245,.62)} #ob-welcome .btn.ghost{background:rgba(255,255,255,.12);color:#fff} /* ===== PWA instalada en iOS: pantalla completa + áreas seguras ===== */ @media (display-mode: standalone){ .island{display:none} .status #clock,.status .r{visibility:hidden} .status{height:env(safe-area-inset-top)} .tabpage{padding-top:calc(44px + env(safe-area-inset-top))} .detail .navbar{padding-top:env(safe-area-inset-top);height:calc(48px + env(safe-area-inset-top))} .navbar.clear .back{top:calc(8px + env(safe-area-inset-top))} .tabbar{padding-bottom:calc(10px + env(safe-area-inset-bottom))} } /* interruptor iOS */ .iswitch{width:48px;height:29px;border-radius:99px;background:var(--label3);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0} .iswitch::after{content:"";position:absolute;top:2px;left:2px;width:25px;height:25px;border-radius:50%;background:var(--card);transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)} .iswitch.on{background:var(--tint)} .iswitch.on::after{left:21px} /* ===== MODO OSCURO ===== */ #phone.dark{ --bg:#000000; --card:#1c1c1e; --sep:rgba(255,255,255,.14); --label:#ffffff; --label2:rgba(235,235,245,.62); --label3:rgba(235,235,245,.34); --tint:#19b9a9; --tint-d:#8fe7db; --tint-l:#10312c; --gold:#e6bd4a; --gold-l:#3a2f12; --bar:rgba(28,28,30,.82); } #phone.dark .searchbar{background:#2c2c2e} #phone.dark .segmented{background:#2c2c2e} #phone.dark .segmented button.on{background:#48484a} #phone.dark .fil{background:#1c1c1e} #phone.dark .planc{background:#1c1c1e} #phone.dark .ob-field,#phone.dark .ob-phone{background:#1c1c1e} #phone.dark .cell:active{background:#2c2c2e} #phone.dark .key:active{background:#2c2c2e} #phone.dark .status svg [fill]:not([fill="none"]){fill:#fff} #phone.dark .status svg [stroke]{stroke:#fff}