*{box-sizing:border-box}body{margin:0;background:#1a0508;color:#fff1e6;font:18px/1.4 system-ui,sans-serif}
main{max-width:480px;margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 16px 24px}h1,h2{color:#ffc627}h3{color:#ffc627}
input,textarea{width:100%;padding:14px;margin:6px 0;border-radius:10px;border:1px solid #7a2a30;background:#2c0d10;color:#fff;font-size:18px}
button{font-size:18px;border-radius:12px;border:0;padding:14px;margin:8px 0;width:100%;cursor:pointer}
.principal{background:#d9272e;color:#fff;font-weight:700}.sec{background:#4a1a1e;color:#fff1e6}
.aviso{background:#4a1a1e;border-left:4px solid #ffc627;padding:10px;border-radius:8px}
.msg.mal{background:#5c1020;padding:10px;border-radius:8px}
.card{background:#2c0d10;border-radius:14px;padding:14px;margin:10px 0}.saldo{font-size:28px;color:#ffc627;font-weight:700}
.dir{display:block;word-break:break-all;background:#120305;padding:10px;border-radius:8px;margin:8px 0;font-size:16px}mark{background:#ffc627;color:#1a0508}
.frase{columns:2;font-size:22px;background:#2c0d10;border-radius:12px;padding:16px 16px 16px 40px}
.qr{background:#fff;width:240px;margin:10px auto;border-radius:12px;padding:6px}.qr svg{width:100%;height:auto;display:block}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:#120305;max-width:480px;margin:0 auto}
.tab{flex:1;background:none;color:#e0b8ae;margin:0;border-radius:0;font-size:14px;padding:16px 4px}.tab.on{color:#ffc627;font-weight:700}
.redes{display:flex;gap:8px}.chip{background:#4a1a1e;color:#fff1e6;font-size:14px}.chip.on{background:#ffc627;color:#1a0508;font-weight:700}
.ult{font-size:20px}details{background:#2c0d10;border-radius:10px;padding:10px;margin:8px 0}a{color:#ffc627}
.modal{position:fixed;inset:0;background:rgba(14,2,4,.88);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}.caja{background:#2c0d10;border:2px solid #ffc627;border-radius:16px;padding:20px;max-width:440px}.caja label{display:block;margin:14px 0}button[disabled]{opacity:.4;cursor:not-allowed}.wrap{flex-wrap:wrap}input[type=checkbox]{width:auto;margin-right:8px}


/* Puertas de la bóveda: cada una es una caja fuerte distinta a pantalla completa, una detrás de otra, con UNA sola cosa. */
.pu{position:fixed;inset:0;z-index:50;perspective:1600px;overflow:hidden;--k:min(16vw,8.2vh,64px)}
.pu-c1{--p1:#3d2a04;--p2:#a97a10;--p3:#f2c94c;--p4:#b8860b;--p5:#4a3405;--ac:#e0302f;--ac2:#ff9a9a;--k1:#ff9a9a;--k2:#d9272e;--k3:#7a0a14;--kt:#fff}
.pu-c2{--p1:#2a0307;--p2:#7e0d17;--p3:#c4202b;--p4:#8e101b;--p5:#2e0409;--ac:#ffc627;--ac2:#fff3c4;--k1:#fff3c4;--k2:#ffc627;--k3:#9a7012;--kt:#2b1a02}
.pu-c3{--p1:#0b0b0e;--p2:#26262d;--p3:#4d4d58;--p4:#2e2e36;--p5:#101014;--ac:#c9ccd6;--ac2:#fff;--k1:#fff;--k2:#c9ccd6;--k3:#5a5d68;--kt:#14141a}
.pu-c4{--p1:#03160d;--p2:#0c4a2d;--p3:#1f8a55;--p4:#0f5535;--p5:#04200f;--ac:#ffc627;--ac2:#fff3c4;--k1:#fff3c4;--k2:#ffc627;--k3:#9a7012;--kt:#2b1a02}
.pu-hoja{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;padding:max(22px,env(safe-area-inset-top)) 22px max(16px,env(safe-area-inset-bottom));transform-origin:0 50%;will-change:transform;color:#fff1e6;
 background:linear-gradient(112deg,var(--p1) 0,var(--p2) 22%,var(--p3) 44%,var(--p4) 62%,var(--p5) 100%);
 box-shadow:inset 0 0 0 3px rgba(0,0,0,.7),inset 0 0 0 5px var(--ac),inset 0 0 90px rgba(0,0,0,.55)}
.pu-hoja:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.04) 1px 3px),linear-gradient(135deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.18) 38%,rgba(255,255,255,0) 58%)}
.pu-hoja:after{content:"";position:absolute;inset:13px;border:2px solid rgba(0,0,0,.45);border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 rgba(255,255,255,.12);pointer-events:none}
.pu-hoja>*{position:relative;z-index:2}
.pu-perno{position:absolute!important;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--ac) 55%,#000);box-shadow:0 1px 2px #000;z-index:1!important}
.pu-perno.a{left:20px;top:20px}.pu-perno.b{right:20px;top:20px}.pu-perno.c{left:20px;bottom:20px}.pu-perno.d{right:20px;bottom:20px}
.pu-bis{position:absolute!important;left:0;width:16px;height:60px;border-radius:0 5px 5px 0;background:linear-gradient(90deg,#0c0c0f,#4b4c55 45%,#15151a);box-shadow:2px 2px 6px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.25);z-index:1!important}
.pu-bis.a{top:9%}.pu-bis.b{bottom:9%}
.pu-cabeza{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 26px 8px;border-radius:18px;background:rgba(8,5,8,.8);border:1px solid var(--ac);box-shadow:0 6px 18px rgba(0,0,0,.6)}
.pu-emblema{width:min(22vw,80px);aspect-ratio:1}.pu-emblema svg{width:100%;height:100%;display:block}
.pu h1{margin:0;color:#ff3b3b;font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.38em;padding-left:.38em;text-shadow:0 0 8px rgba(255,59,59,.45)}
.pu-zona{width:100%;max-width:330px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 14px;border-radius:18px;background:linear-gradient(180deg,#0b0b10,#1b1b22);border:1px solid var(--ac);box-shadow:inset 0 0 18px #000,0 8px 20px rgba(0,0,0,.6)}
.pu-rotulo{margin:0;font-size:15px;color:var(--ac2);text-align:center;min-height:21px}
.pu-puntos{display:flex;gap:12px;height:18px;align-items:center}
.pu-puntos span{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:transparent}.pu-puntos span.on{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.9)}
.pu-manija{width:min(52vw,23vh,210px);aspect-ratio:1;margin:0!important;padding:0!important;background:none!important;filter:drop-shadow(5px 8px 6px rgba(0,0,0,.65))}
.pu-manija svg{width:100%;height:100%;display:block}
.pu-msg{min-height:22px;width:100%;max-width:330px;font-size:15px;text-align:center}.pu-msg p{margin:2px 0}
.pu-zona input{background:#05050a;border:1px solid var(--ac);color:#f4f4f8;margin:2px 0;padding:12px 14px;font-size:17px;text-align:center}
.pu-zona input::placeholder{color:#9a98a0}.pu-zona input:focus{outline:2px solid var(--ac2)}
.pu-correo{margin:2px 0;font-size:16px;color:#fff;overflow-wrap:anywhere;text-align:center}
.pu button.pu-pill{background:var(--k2);color:var(--kt);font-weight:700;border:1px solid #000;margin:4px 0;font-size:16px}
.pu button.pu-ok{width:var(--k);height:var(--k);padding:0;margin:4px 0;border-radius:50%;font-size:calc(var(--k) * .5);font-weight:700;border:1px solid #000;background:radial-gradient(circle at 35% 28%,#9af0c0,#35d07f 55%,#10653b);color:#03210f}
.pu-google{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#3c4043;font-weight:600;font-size:16px;border:2px solid var(--ac)}
.pu-google i{font:700 20px/1 Arial,sans-serif;font-style:normal;background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.pu-o{text-align:center;color:var(--ac2);font-size:14px;margin:0}
.pu button.pu-enlace{background:none;color:var(--ac2);font-size:15px;width:auto;margin:0;padding:8px 14px;text-decoration:underline;border:0}
.pu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pu.entra .pu-hoja{transform-origin:50% 50%;animation:pu-entra 1s cubic-bezier(.2,.75,.2,1) both}
.pu.pu-sacude .pu-zona{animation:pu-sacude .4s}
.pu.abre{pointer-events:none}
.pu.abre .pu-manija svg{animation:pu-gira .95s cubic-bezier(.5,0,.3,1) forwards}
.pu.abre .pu-zona,.pu.abre .pu-cabeza,.pu.abre .pu-msg,.pu.abre .pu-enlace{animation:pu-fuera .5s ease forwards}
.pu.abre .pu-hoja{transform-origin:0 50%;animation:pu-abre 1.15s cubic-bezier(.6,0,.3,1) .95s forwards}
@keyframes pu-entra{from{transform:rotate(-540deg) scale(.1);opacity:0}to{transform:none;opacity:1}}
@keyframes pu-gira{to{transform:rotate(-210deg)}}
@keyframes pu-fuera{to{opacity:0;transform:translateY(12px)}}
@keyframes pu-abre{to{transform:rotateY(-108deg)}}
@keyframes pu-sacude{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){.pu,.pu *{animation:none!important;transition:none!important}}
.puerta-fila{display:flex;align-items:center;gap:10px;justify-content:space-between}.puerta-fila button{width:auto;margin:0;padding:10px 16px;font-size:16px}
.ok-txt{color:#7be0a4}
@media (max-height:720px){.pu{--k:min(14vw,7vh,52px)}.pu-hoja{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));gap:4px}.pu-emblema{width:min(16vw,52px)}.pu-cabeza{padding:4px 22px 6px}.pu-zona{gap:5px;padding:8px 12px}.pu-manija{width:min(40vw,17vh,150px)}.pu button.pu-enlace{padding:4px 12px}.pu-msg{min-height:18px;font-size:14px}}

/* Teclado real de caja fuerte (IMG_4037) */
.pu{--tw:min(21vw,13vh,84px)}
.pu-teclado{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 16px 14px;border-radius:20px;background:linear-gradient(160deg,#a6a9b0,#7c7f87 55%,#92959c);border:3px solid #eceef2;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 0 2px 8px rgba(255,255,255,.45),0 6px 14px rgba(0,0,0,.7)}
.pu-leds{display:flex;gap:56px}.pu-leds i{width:10px;height:5px;border-radius:3px;background:#5d6067;box-shadow:inset 0 1px 1px #000}
.pu-leds i:first-child{background:#35d07f;box-shadow:0 0 6px #35d07f}.pu.pu-sacude .pu-leds i:last-child{background:#ff3b3b;box-shadow:0 0 6px #ff3b3b}
.pu-teclas{display:grid;grid-template-columns:repeat(3,var(--tw));gap:min(1.4vh,9px) 10px;justify-content:center}
.pu button.pu-tecla{width:var(--tw);height:calc(var(--tw) * .52);margin:0;padding:0;border-radius:999px;font-size:calc(var(--tw) * .26);font-weight:600;color:#fff;border:2px solid rgba(255,255,255,.92);background:rgba(255,255,255,.06);box-shadow:inset 0 1px 3px rgba(0,0,0,.4);touch-action:manipulation;display:flex;align-items:center;justify-content:center}
.pu button.pu-tecla.ok{font-size:calc(var(--tw) * .17);letter-spacing:.02em}.pu button.pu-tecla:active{background:rgba(255,255,255,.35)}
.pu button.pu-tecla svg{width:calc(var(--tw) * .36);height:auto}
@media (max-height:720px){.pu{--tw:min(19vw,11.5vh,70px)}}
.libreta-fila{display:flex;align-items:center;gap:8px;justify-content:space-between}.libreta-fila button{width:auto;margin:0;padding:8px 12px;font-size:15px}.libreta-fila b{overflow:hidden;text-overflow:ellipsis}
.menu-enviar button{display:flex;align-items:center;gap:12px;text-align:left}.menu-enviar button span{font-size:22px;width:30px;text-align:center}
.idcard{display:flex;gap:14px;align-items:center}.idcard .qr{width:130px;margin:0;flex:none}.idid{font:700 22px/1.1 ui-monospace,monospace;letter-spacing:.06em;color:#ffc627}
.visor{width:100%;aspect-ratio:1;max-width:320px;margin:10px auto;border-radius:14px;background:#000;object-fit:cover;display:block}
.quien{border:2px solid #ffc627}.quien b{font-size:22px}
mark.ext{background:#ffc627;color:#1a0508;font-weight:700}
.bloque{display:block;padding:12px;border-radius:12px;text-align:center}

/* Barra ARRIBA: título y pestañas en una fila fija; se desliza a los lados si no cabe */
.cab{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;margin:0 -16px 8px;padding:6px 16px;background:#1a0508;border-bottom:1px solid #4a1a1e}
.cab h2{margin:0;font-size:18px;flex:none;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab nav{position:static;display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:none;background:none;gap:2px}.cab nav::-webkit-scrollbar{display:none}
.cab .tab{flex:none;white-space:nowrap;padding:10px 9px;font-size:14px;border-radius:10px}.cab .tab.on{background:#4a1a1e}
.cabmoneda{display:block;width:100%;text-align:left;background:none;color:inherit;padding:0;margin:0;border-radius:0;font-size:inherit}.cabmoneda small{display:block}.ver-hist{color:#ffc627;margin-top:4px}
.hist{display:none;margin-top:10px;border-top:1px solid #4a1a1e;padding-top:8px}.hist.abierto{display:block}
.mov{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid #3a1418}.mov.entra b{color:#7be0a4}.mov.sale b{color:#ffb3a8}.mov small,.mov a{font-size:14px}
.pestanas{display:flex;gap:8px;margin:6px 0}.pestana{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;padding:12px 8px;margin:0;background:#2c0d10;color:#fff1e6;border:2px solid #4a1a1e;touch-action:manipulation}.pestana.on{background:#d9272e;border-color:#ffc627;color:#fff}.pestana b{font-size:20px}.pestana small{font-size:13px}