*{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;height:100vh;height:100dvh;z-index:50;perspective:1600px;overflow:hidden;--k:min(16vw,8.2dvh,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-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:9px;height:18px;align-items:center}
.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.pu-sacude .pu-zona{animation:pu-sacude .4s}
.pu.abre{pointer-events:none}
.pu.abre .pu.abre .pu-zona,.pu.abre .pu-cabeza,.pu.abre .pu-msg,.pu.abre .pu-enlace{animation:pu-fuera .5s ease forwards}
@keyframes pu-gira{to{transform:rotate(-210deg)}}
@keyframes pu-fuera{to{opacity:0;transform:translateY(12px)}}
@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}
.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:relative;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;width:auto;margin:0;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}

/* DOS puertas (diseño 4b): dos hojas con su manija roja de tres brazos cada una, junta en el medio y el contenido al centro */
.pu-c5{--p1:#050b1f;--p2:#12307a;--p3:#2a5fd0;--p4:#143a8f;--p5:#071435;--ac:#9cc0ff;--ac2:#e6f0ff;--k1:#e6f0ff;--k2:#9cc0ff;--k3:#335fb0;--kt:#0a1a3d}
.pu-hoja{position:absolute;top:0;bottom:0;width:50%;will-change:transform;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 2px rgba(0,0,0,.7),inset 0 0 70px rgba(0,0,0,.55)}
.pu-hoja.izq{left:0;transform-origin:0 50%;border-right:1px solid #000;box-shadow:inset 3px 0 0 var(--ac),inset 0 0 0 2px rgba(0,0,0,.7),inset 0 0 70px rgba(0,0,0,.55)}
.pu-hoja.der{right:0;transform-origin:100% 50%;border-left:1px solid #000;box-shadow:inset -3px 0 0 var(--ac),inset 0 0 0 2px rgba(0,0,0,.7),inset 0 0 70px 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:12px 10px;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-junta{position:absolute;left:calc(50% - 3px);width:6px;top:0;bottom:0;background:linear-gradient(90deg,#000,#1c1c22 50%,#000);z-index:3}
.pu-perno{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--ac) 55%,#000);box-shadow:0 1px 2px #000}
.pu-hoja.izq .pu-perno.a{left:18px;top:18px}.pu-hoja.izq .pu-perno.b{left:18px;bottom:18px}.pu-hoja.der .pu-perno.a{right:18px;top:18px}.pu-hoja.der .pu-perno.b{right:18px;bottom:18px}
.pu-bis{position:absolute;width:14px;height:54px;background:linear-gradient(90deg,#0c0c0f,#4b4c55 45%,#15151a);box-shadow:0 2px 5px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.pu-hoja.izq .pu-bis{left:0;border-radius:0 4px 4px 0}.pu-hoja.der .pu-bis{right:0;border-radius:4px 0 0 4px}.pu-bis.a{top:9%}.pu-bis.b{bottom:9%}
.pu-centro{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:max(18px,env(safe-area-inset-top)) 18px calc(var(--mh) + max(14px,env(safe-area-inset-bottom)) + 22px);pointer-events:none}
.pu-centro>*{pointer-events:auto}
.pu{--mh:min(40vw,18dvh,160px)}
.pu-manija{position:absolute;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 28px);width:var(--mh);aspect-ratio:1;margin:0!important;padding:0!important;background:none!important;filter:drop-shadow(5px 8px 6px rgba(0,0,0,.65));z-index:5}
.pu-manija.izq,.pu-manija.der{left:50%;transform:translateX(-50%)}
.pu-manija svg{width:100%;height:100%;display:block}
.pu.entra{animation:pu-entra 1s cubic-bezier(.2,.75,.2,1) both}
.pu.abre .pu-hoja.izq{animation:pu-abre-i 1.15s cubic-bezier(.6,0,.3,1) .95s forwards}.pu.abre .pu-hoja.der{animation:pu-abre-d 1.15s cubic-bezier(.6,0,.3,1) .95s forwards}.pu.abre .pu-junta{animation:pu-fuera .4s ease .9s forwards}
.pu.abre .pu-manija{animation:pu-fuera .4s ease 1s forwards}
@keyframes pu-entra{from{transform:rotate(-540deg) scale(.1);opacity:0}to{transform:none;opacity:1}}
@keyframes pu-abre-i{to{transform:rotateY(-108deg)}}@keyframes pu-abre-d{to{transform:rotateY(108deg)}}
.pu-puntos{gap:9px}@media (max-height:720px){.pu{--k:min(14vw,7dvh,52px);--mh:min(34vw,15dvh,120px)}.pu-centro{padding-top:max(10px,env(safe-area-inset-top));gap:4px}.pu-emblema{width:min(16vw,52px)}.pu-cabeza{padding:4px 22px 6px}.pu-zona{gap:5px;padding:8px 12px}.pu-msg{min-height:18px;font-size:14px}.pu button.pu-enlace{padding:4px 12px}}

/* Teclado de botones rojos y ✓ verde (el que le gusta a Nerio) en TODAS las pantallas de PIN */
.pu-teclado{display:flex;flex-direction:column;align-items:center;gap:8px}
.pu-teclas{display:grid;grid-template-columns:repeat(3,var(--k));gap:min(2dvh,12px) min(5vw,20px);justify-content:center}
.pu button.pu-tecla{width:var(--k);height:var(--k);margin:0;padding:0;border-radius:50%;font-size:calc(var(--k) * .42);font-weight:700;color:var(--kt);border:1px solid rgba(0,0,0,.7);background:radial-gradient(circle at 35% 28%,var(--k1),var(--k2) 55%,var(--k3));box-shadow:0 3px 5px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.5);touch-action:manipulation;display:flex;align-items:center;justify-content:center}
.pu button.pu-tecla:active{transform:translateY(2px);box-shadow:0 1px 2px #000}
.pu button.pu-tecla.ok{background:radial-gradient(circle at 35% 28%,#9af0c0,#35d07f 55%,#10653b);color:#03210f}
.pu-puntos span{width:11px;height:11px;border-radius:50%;border:2px solid var(--ac);background:transparent}.pu-puntos span.on{background:var(--ac2);box-shadow:0 0 8px var(--ac)}
/* el enlace va DENTRO de la puerta, en el flujo, nunca pegado al borde de abajo (en Safari se cortaba) */
.pu-centro .pu-enlace{position:static;transform:none;margin-top:2px}

.pu button.pu-ojo{width:auto;background:none;border:0;color:var(--ac2);font-size:14px;padding:2px 8px;margin:0;text-decoration:underline}
.pu button.pu-reenviar{margin:0}
.pu-zona input{-webkit-user-select:text;user-select:text;touch-action:manipulation;position:relative;z-index:6;pointer-events:auto}
.pu:not(.entra):not(.abre){perspective:none}.pu:not(.entra):not(.abre) .pu-hoja{will-change:auto}
select{width:100%;padding:12px;margin:6px 0;border-radius:10px;border:1px solid #7a2a30;background:#2c0d10;color:#fff;font-size:16px}
.mp-tabs{flex-wrap:wrap}.mp-orden{cursor:pointer}.mp-mensajes{max-height:240px;overflow:auto}.mp-mensajes p{margin:4px 0;word-break:break-word}.mp-msg-mio{text-align:right}.mp-recibo{max-width:100%;border-radius:10px}.mp-esc{font-family:monospace;font-size:13px}

/* Paleta B en TODAS las pantallas (Nerio, 10/10/2026): oro con negro metálico. Datos arriba, botones abajo (.abajo la pone ui.js). Solo aspecto. */
body{background:#0d0d10}
body:has(.cab) .cab{background:#0d0d10;border-bottom:1px solid #3a3320}
body:has(.cab) .cab h2{background:linear-gradient(180deg,#f7dc7a,#c8962a 60%,#8a6410);-webkit-background-clip:text;background-clip:text;color:transparent}
body:has(.cab) .cab nav .tab.on{background:#26262c;color:#f2c94c}
main:has(.cab){display:flex;flex-direction:column;min-height:100dvh}
main .aviso{background:#17171b;border-left:4px solid #c8962a;color:#c9c5b8;font-size:15px}
main .card{background:linear-gradient(180deg,#5a5a62 0,#3a3a41 14%,#17171b 52%,#232329 100%);border:1px solid #070709;border-radius:20px;padding:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 14px rgba(0,0,0,.65);color:#c9c5b8}
main .card b{background:linear-gradient(180deg,#f7dc7a,#d9a92e 60%,#a9791a);-webkit-background-clip:text;background-clip:text;color:transparent}
main .idid{background:linear-gradient(180deg,#f7dc7a,#d9a92e 60%,#a9791a);-webkit-background-clip:text;background-clip:text;color:transparent}
main .saldo{background:linear-gradient(180deg,#f7dc7a,#d9a92e 60%,#a9791a);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:34px}
main .idcard{align-items:flex-start}main .idcard .qr{width:128px;border-radius:10px}
main .redes{margin-top:6px}
main .chip{background:linear-gradient(180deg,#44444b,#16161a);color:#f2dd9a;border:1px solid #070709;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
main .chip.on{background:linear-gradient(180deg,#f7dc7a,#c8962a 55%,#8a6410);color:#2b1c02}
main .card .sec{background:linear-gradient(180deg,#4a4a52,#121215);color:#f2dd9a;border:1px solid #070709;border-radius:14px;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
main .ver-hist{color:#c8962a}
main>.sec{background:#26262c;color:#c9c5b8}
main .rapidos{margin-top:auto;padding-top:16px;display:flex;gap:10px}
main .rapidos button{flex:1;margin:0;padding:22px 4px;border-radius:20px;border:1px solid #6b4a0c;font-weight:800;font-size:19px;color:#2b1c02;background:linear-gradient(180deg,#f9e08a 0,#e2b74a 35%,#b9861c 70%,#8a6410 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 16px rgba(242,201,76,.35),0 5px 10px rgba(0,0,0,.6)}
main .card{padding:12px;margin:8px 0}main .saldo{font-size:28px}main .cabmoneda small{font-size:14px}main .rapidos button{padding:18px 4px}
main button.sec{background:linear-gradient(180deg,#3a3a41,#17171b);color:#c9c5b8;border:1px solid #070709}

/* ---- resto de pantallas (Mariela, aarka_interior_*) ---- */
.cab .tab{color:#e2b94a}.cab .tab.on{color:#f7dc7a}
main h2,main h3,main h1{color:#f2c94c}
main .abajo{margin-top:auto}main .abajo~*{margin-top:0}
main input,main textarea,main select{background:#050507;border:1px solid #6b4a0c;color:#f4efe0}
main input:focus,main textarea:focus,main select:focus{outline:2px solid #c8962a}
main input::placeholder{color:#8d8670}
main .principal{border:1px solid #6b4a0c;font-weight:800;color:#2b1c02;background:linear-gradient(180deg,#f9e08a 0,#e2b74a 35%,#b9861c 70%,#8a6410 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 12px rgba(242,201,76,.28),0 4px 8px rgba(0,0,0,.6)}
main .sec{background:linear-gradient(180deg,#3a3a41,#17171b);color:#f2dd9a;border:1px solid #070709;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
main .aviso{background:#17171b;border-left:4px solid #c8962a;color:#c9c5b8}
main .msg.mal{background:#2a0b10;border:1px solid #8e101b;color:#ffb3a8}
main .card{background:linear-gradient(180deg,#5a5a62 0,#3a3a41 14%,#17171b 52%,#232329 100%);border:1px solid #070709;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 14px rgba(0,0,0,.65);color:#c9c5b8}
main .saldo,main .idid{background:linear-gradient(180deg,#f7dc7a,#d9a92e 60%,#a9791a);-webkit-background-clip:text;background-clip:text;color:transparent}
main .dir{background:#050507;border:1px solid #3a3320;color:#f2dd9a}
main mark,main mark.ext{background:#f2c94c;color:#1a1204}
main .frase{background:#17171b;border:1px solid #6b4a0c;color:#f2dd9a}
main details{background:#17171b;border:1px solid #3a3320;color:#c9c5b8}main details summary{color:#f2dd9a}
main a{color:#f2c94c}
main .quien{border:2px solid #c8962a}
main .pestana{background:linear-gradient(180deg,#44444b,#16161a);color:#f2dd9a;border:2px solid #070709}
main .pestana.on{background:linear-gradient(180deg,#f7dc7a,#c8962a 55%,#8a6410);border-color:#f2c94c;color:#2b1c02}
main .chip{background:linear-gradient(180deg,#44444b,#16161a);color:#f2dd9a;border:1px solid #070709;font-weight:700}
main .chip.on{background:linear-gradient(180deg,#f7dc7a,#c8962a 55%,#8a6410);color:#2b1c02}
main .mov{border-bottom:1px solid #2a2a30}main .hist{border-top:1px solid #2a2a30}
main .mp-orden{background:#17171b}
.modal{background:rgba(5,5,7,.9)}.caja{background:linear-gradient(180deg,#3a3a41,#17171b 40%);border:2px solid #c8962a;color:#e9e3cf}.caja h3{color:#f2c94c}
.caja button.principal{border:1px solid #6b4a0c;font-weight:800;color:#2b1c02;background:linear-gradient(180deg,#f9e08a 0,#e2b74a 35%,#b9861c 70%,#8a6410 100%)}
.caja button.sec{background:linear-gradient(180deg,#3a3a41,#17171b);color:#f2dd9a;border:1px solid #070709}
.caja input,.caja textarea{background:#050507;border:1px solid #6b4a0c;color:#f4efe0}
main button.peligro,main .principal.peligro{background:linear-gradient(180deg,#ff6a6a,#d9272e 55%,#7a0a14);color:#fff;border:1px solid #3a0508}
main .quien b{display:block}
.pu.pu-c1 button.pu-pill{background:linear-gradient(180deg,#f9e08a 0,#e2b74a 35%,#b9861c 70%,#8a6410 100%);color:#2b1c02;border:1px solid #6b4a0c;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 12px rgba(242,201,76,.28),0 4px 8px rgba(0,0,0,.6)}
.cab.larga{flex-wrap:wrap;gap:2px 10px}.cab.larga h2{flex:1 0 100%;max-width:100%;font-size:22px}.cab.larga nav{flex:1 0 100%}

/* ===== Llaves Kling (Nerio aprobó la maqueta aarka_llaves_kling.jpg, 10/10/2026) =====
   Fondo: la bóveda de Kling partida en dos hojas (las hojas se abren con la animación de siempre). UNA llave por ventana.
   Piezas en public/kling/*.webp (se generan con disenos_llaves/piezas_app.py). El logo vive en src/logo.js. */
.pu{--iw:max(100vw,calc(100dvh * .589));--oro:#e8be46;--oro-t:linear-gradient(180deg,#f7dc7a,#c8962a 55%,#8a6410);--ac:#e8be46;--ac2:#f5e3a0;background:#0d0d10}
.pu .pu-hoja{background:url(kling_boveda.webp) no-repeat 0 50%/var(--iw) auto;box-shadow:none;border:0}
.pu .pu-hoja.izq{background-position:calc((100vw - var(--iw)) / 2) 50%}
.pu .pu-hoja.der{background-position:calc((100vw - var(--iw)) / 2 - 50vw) 50%}
.pu .pu-hoja:before{background:rgba(0,0,0,.27)}.pu .pu-hoja:after,.pu .pu-junta,.pu .pu-manija{display:none}
.pu-centro{padding:max(18px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))}
.pu-cabeza{background:rgba(26,18,8,.96);border:2px solid #d6242e;border-radius:26px}
.pu-zona{margin-top:auto;width:min(88vw,360px);max-width:none;padding:14px 18px 18px;border:3px solid transparent;border-radius:34px;box-shadow:0 18px 34px rgba(0,0,0,.65);background:linear-gradient(#0a0a0c,#0a0a0c) padding-box,linear-gradient(180deg,#f7dc7a,#c8962a 55%,#8a6410) border-box}
.pu-msg{margin-bottom:auto;max-width:min(88vw,360px)}.pu-msg:has(p){background:rgba(8,6,4,.82);border-radius:14px;padding:4px 10px}
.pu-titulo{margin:0;font-size:26px;font-weight:700;background:var(--oro-t);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 2px #000)}
.pu-rotulo{color:var(--ac2)}
.pu-zona input{width:100%;box-sizing:border-box;height:46px;margin:0;padding:0 18px;border-radius:999px;border:1px solid #8a7440;background:rgba(0,0,0,.6);color:#ebe1c8;font-size:17px}
.pu-puntos{gap:11px}.pu-puntos span{width:18px;height:18px;border:2px solid var(--oro)}.pu-puntos span.on{background:var(--oro);box-shadow:0 0 8px rgba(232,190,70,.7)}
/* teclas rojas de Kling, números blancos */
.pu button.pu-tecla,.pu button.pu-tecla:active{border:0;border-radius:0;background:url(kling_tecla.webp) center/100% 100% no-repeat;box-shadow:none;color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.7);font-size:calc(var(--k) * .46)}
.pu button.pu-tecla:active{transform:scale(.94)}
/* botones dorados de Kling: ABRIR, Siguiente, Pedir código */
.pu .pu-zona button.pu-abrir,.pu .pu-zona button.pu-pill{display:block;width:min(74%,260px);aspect-ratio:640/274;height:auto;margin:6px auto 0;padding:0;border:0;border-radius:0;background:url(kling_boton.webp) center/100% 100% no-repeat;box-shadow:none;color:#28180a;font-weight:800;font-size:20px;letter-spacing:.04em;text-shadow:none;touch-action:manipulation}
.pu .pu-zona button.pu-abrir{text-transform:uppercase;letter-spacing:.25em;font-size:22px;width:min(66%,240px)}
.pu .pu-zona button.pu-pill:active,.pu .pu-zona button.pu-abrir:active{filter:brightness(.88)}
.pu-teclado{gap:10px;width:100%}
/* Llave 1: el panel de Kling con correo y clave encima (fracciones medidas sobre la pieza, como en la maqueta) */
.pu-zona.kp{position:relative;display:block;width:min(94vw,420px);aspect-ratio:900/607;padding:0;border:0;border-radius:0;background:url(kling_panel1.webp) center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 18px 20px rgba(0,0,0,.6))}
.pu-zona.kp>*{position:absolute;margin:0}
.pu-zona.kp .pu-titulo{left:0;right:0;top:9.5%;transform:translateY(-50%);text-align:center;font-size:clamp(22px,7vw,34px)}
.pu-zona.kp .pu-rotulo{display:none}
.pu-zona.kp input{left:20.5%;width:61.5%;height:15.5%;padding:0 6% 0 5%;border:0;background:transparent;font-size:16px;box-shadow:none}
.pu-zona.kp input[autocomplete=email]{top:17.3%}.pu-zona.kp input[autocomplete=current-password]{top:44.5%;padding-right:14%}
.pu-zona.kp .pu-ojo{left:72%;width:9%;top:44.5%;height:15.5%;font-size:0;text-decoration:none;color:transparent;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 30'%3E%3Cellipse cx='28' cy='15' rx='25' ry='12' fill='none' stroke='%23e8be46' stroke-width='4'/%3E%3Ccircle cx='28' cy='15' r='8' fill='%23e8be46'/%3E%3C/svg%3E") center/100% auto no-repeat;padding:0;border:0}
.pu-zona.kp .pu-ojo.visto{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 30'%3E%3Cellipse cx='28' cy='15' rx='25' ry='12' fill='none' stroke='%23e8be46' stroke-width='4'/%3E%3Ccircle cx='28' cy='15' r='8' fill='%23e8be46'/%3E%3Cpath d='M6 28L50 2' stroke='%23e8be46' stroke-width='4'/%3E%3C/svg%3E")}
.pu .pu-zona.kp button.pu-pill{left:25%;width:52%;top:68.5%;margin:0;aspect-ratio:auto;height:17%;font-size:clamp(15px,4.6vw,20px)}
/* pasos del código y de repetir la clave: panel simple; la casilla de correo y la clave se esconden (siguen en su sitio) */
.pu-zona:not(.kp) input[autocomplete=email],.pu-zona:not(.kp) input[autocomplete=current-password]{display:none}
.pu-zona[data-paso=codigo]:not(.kp) .pu-ojo{display:none}
.pu-zona:not(.kp) .pu-ojo{font-size:15px;color:var(--ac2)}
@media (max-height:720px){.pu-titulo{font-size:22px}.pu-zona{padding:8px 14px 12px}.pu-zona input{height:40px}.pu-teclado{gap:6px}}
.pu-zona.kp input,.pu-zona.kp input:focus{border:0;outline:none;box-shadow:none;background:transparent;text-overflow:ellipsis}
.pu-zona.kp input::placeholder{font-size:14px;color:#a89c80}
.pu-zona input:focus{border-color:var(--oro);outline:none}
.pu .pu-zona button.pu-pill{width:min(84%,300px);font-size:clamp(14px,4.4vw,18px);white-space:nowrap}