:root{
  /* ---- acentos vivos, iguales de día o de noche ---- */
  --rosa:#ff2fd4;
  --rosa-fuerte:#c400a3;
  --rosa-suave:#ffe1fa;
  --lavanda:#8b5cf6;
  --lavanda-fuerte:#7c3aed;
  --celeste:#22d3ee;
  --celeste-fuerte:#0090c2;
  --menta:#00e676;
  --dorado:#ffce00;
  --crema:#eef1ff;
  --texto-suave:#8a93bd;

  /* ---- chrome de la app — valores de arranque, aplicarTemaHorario() los cambia según la hora ---- */
  --fondo-app:#0b0f22;
  --panel:#141a35;
  --panel-claro:#1b2347;
  --borde-panel:#262f5c;
  --navbar:#0d1230;

  /* ---- capa de tema por hora del día — la cambia aplicarTemaHorario() ---- */
  --tema-glow-1:#6d3fc9;
  --tema-glow-2:#0090c2;
  --tema-acento:#22d3ee;

  --font-display:'Baloo 2', sans-serif;
  --font-body:'Baloo 2', sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font-body);
  font-weight:600;
  background:transparent;
  color:var(--crema);
  height:100vh; height:100dvh;
  width:100vw;
  overflow:hidden;
  position:relative;
}
.particula{ position:absolute; bottom:-30px; pointer-events:none; user-select:none; animation:subir linear infinite; z-index:1; }
.particula.burbuja{ border-radius:50%; background:rgba(0,195,255,0.14); border:2px solid rgba(0,195,255,0.35); }
@keyframes subir{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:.9;}
  100%{ transform:translateY(-110vh) translateX(18px) rotate(20deg); opacity:0;}
}

#app{
  position:relative; z-index:2;
  max-width:480px; margin:0 auto; height:100%; min-height:100%; min-height:100dvh;
  display:flex; flex-direction:column;
  border-left:1px solid rgba(0,0,0,0.06);
  border-right:1px solid rgba(0,0,0,0.06);
  background:var(--fondo-app); /* respaldo — si por lo que sea queda un pixel de más abajo, que se vea de este color y no el fondo del océano */
}

#zona-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; }
/* la landing pre-login debe quedar fija, sin scroll — antes #pantalla-hero tenía min-height:100vh
   (podía crecer más que la pantalla y forzaba scroll en #zona-scroll, el contenedor compartido de
   TODAS las pantallas). Acá se apaga el scroll de ese contenedor solo mientras la landing esté activa. */
#zona-scroll:has(> #pantalla-hero.activa){ overflow:hidden; }
.pantalla{ display:none; flex-direction:column; padding:18px 16px 24px; position:relative; }
.pantalla.activa{ display:flex; }
.pantalla-landing{ padding:0 !important; overflow:hidden; }
.pantalla-landing.activa{ height:100%; }
#hero-capa-burbujas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:hidden; pointer-events:none; }
#landing-pez-grande{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }

h1,h2,h3{ font-family:var(--font-display); font-weight:700; margin:0 0 10px; line-height:1.6; }
h1{ font-size:15px; color:var(--rosa-fuerte); }
h2{ font-size:12px; color:var(--rosa-fuerte); }
p,label,span,div{ font-size:17px; }
.eyebrow{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--lavanda); letter-spacing:1px; margin-bottom:6px;}

.topbar{
  flex:0 0 auto;
  padding:6px 16px; display:flex; align-items:center; justify-content:space-between;
  background:var(--navbar);
}
.logo{ display:inline-block; }
.logo img{ display:block; height:48px; width:auto; }
.logo.grande img{ height:64px; }

#loader-inicial{
  position:fixed; inset:0; z-index:9999; background:#0a0820;
  display:flex; align-items:center; justify-content:center; transition:opacity .5s ease;
}
#loader-inicial.oculto{ opacity:0; pointer-events:none; }
.loader-anillo{ position:relative; width:120px; height:120px; }
.loader-anillo svg{ position:absolute; inset:0; width:100%; height:100%; animation:girar-loader 1.3s linear infinite; transform-origin:50% 50%; }
.loader-anillo img{ position:absolute; inset:0; margin:auto; width:68px; height:68px; object-fit:contain; border-radius:50%; }
#loader-circulo{ stroke-dasharray:250; stroke-dashoffset:180; }
@keyframes girar-loader{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.logo span{ color:var(--rosa); text-shadow:0 0 10px rgba(255,47,212,0.6); }
.saldo-mini{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--dorado); background:#000; border:2px solid var(--dorado); padding:6px 8px; border-radius:10px; box-shadow:0 0 10px rgba(255,206,0,0.5);}

.btn{
  font-family:var(--font-display); font-weight:700; font-size:13px; color:#ffffff;
  padding:13px 10px; border:none; border-radius:16px; cursor:pointer; text-align:center;
  background:linear-gradient(135deg, var(--lavanda) 0%, var(--lavanda-fuerte) 100%);
  box-shadow: 0 4px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(139,92,246,0.35);
  transition:transform .08s ease;
}
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,0.25);}
.btn.celeste{ background:linear-gradient(135deg,var(--celeste),var(--celeste-fuerte)); box-shadow:0 4px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(34,211,238,0.35);}
.btn.dorado{ background:linear-gradient(135deg,#ffdd45,#e0a800); color:#3d2b00; box-shadow:0 4px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(255,206,0,0.35);}
.btn.rosa{ background:linear-gradient(135deg,var(--rosa),var(--rosa-fuerte)); box-shadow:0 4px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(255,47,212,0.35);}
.btn.lavanda{ background:linear-gradient(135deg,var(--lavanda),var(--lavanda-fuerte)); box-shadow:0 4px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(139,92,246,0.35);}
.btn:disabled{ opacity:.35; cursor:default; box-shadow:none; transform:none;}
.btn-full{ width:100%; }

.tarjeta-blanca{
  background:var(--panel); border:1px solid var(--borde-panel); border-radius:20px; padding:14px;
  box-shadow:0 4px 20px rgba(0,0,0,0.25);
}

.dispositivo{
  margin:8px auto 0; width:100%; max-width:270px;
  background:var(--panel);
  border:2px solid var(--borde-panel); border-radius:22px;
  padding:14px; box-shadow:0 0 0 4px rgba(139,92,246,0.12), 0 10px 30px rgba(0,0,0,0.35);
}
.pantallita{
  background:var(--fondo-app); border:2px solid var(--lavanda); border-radius:12px;
  padding:10px 8px; margin-bottom:10px; text-align:center;
}
.pantallita .valor{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--celeste); letter-spacing:1.5px; min-height:18px; word-break:break-all;}
.pin-display{ display:flex; justify-content:center; gap:7px; margin-top:6px; }
.pin-dot{ width:12px; height:12px; border:2px solid var(--rosa); border-radius:50%; background:transparent; }
.pin-dot.lleno{ background:var(--rosa); box-shadow:0 0 6px var(--rosa);}

.tabs-login{ display:flex; gap:6px; margin-bottom:10px; }
.tab-login{
  flex:1; font-family:var(--font-display); font-weight:700; font-size:10px; text-align:center; padding:8px 4px;
  border:2px solid var(--lavanda); background:transparent; color:var(--lavanda); border-radius:12px; cursor:pointer;
}
.tab-login.activo{ background:linear-gradient(135deg,var(--lavanda),var(--lavanda-fuerte)); color:#fff; border-color:transparent; }
.paso-atras{ text-align:center; font-size:13px; color:var(--texto-suave); margin:-2px 0 8px; cursor:pointer; text-decoration:underline;}

.teclado{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:4px; }
.tecla{
  font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--crema);
  background:var(--panel-claro);
  border:2px solid var(--borde-panel); border-radius:50%; cursor:pointer;
  width:46px; height:46px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 3px 0 #0a0e20, 0 4px 10px rgba(0,0,0,0.3);
}
.tecla:active{ transform:translateY(2px); box-shadow:none; }
.tecla.especial{ font-size:11px; background:var(--panel-claro); border:2px solid var(--menta); color:var(--menta); border-radius:14px; width:auto; min-width:96px; height:38px; padding:0 6px;}
.tecla.accion{ font-size:11px; background:linear-gradient(135deg,var(--lavanda),var(--lavanda-fuerte)); border:2px solid transparent; color:#fff; border-radius:14px; width:auto; min-width:96px; height:38px; padding:0 6px;}

/* ---- hero de bienvenida ---- */
#pantalla-hero{ padding:0; position:relative; height:100%; overflow:hidden; }
.logo-con-burbujas{ position:relative; display:inline-block; line-height:0; }
.logo-con-burbujas img{ height:62px; width:auto; display:block; }
.burbujas-logo{ position:absolute; left:0; right:0; bottom:0; height:100%; overflow:hidden; pointer-events:none; }
.burbuja-logo-mini{
  position:absolute; bottom:2px; border-radius:50%; background:rgba(180,235,255,0.85);
  box-shadow:0 0 2px rgba(255,255,255,0.9); animation:subir-burbuja-logo linear forwards;
}
@keyframes subir-burbuja-logo{
  0%{ transform:translateY(0) scale(1); opacity:0.9; }
  100%{ transform:translateY(-15px) scale(0.4); opacity:0; }
}
/* ---- logo animado por capas (landing): el texto queda fijo, el pececito de arriba
   parpadea, guiña y se mece suave como si nadara, con un resplandor giratorio del
   color del tema detrás. Todas las capas son imágenes del mismo tamaño superpuestas
   exactas — por eso todas van position:absolute;inset:0 salvo la que fija el tamaño. ---- */
.logo-animado{ position:relative; height:96px; width:162px; isolation:isolate; }
.logo-animado-chico{ height:62px; width:105px; }
.logo-animado img{ position:absolute; inset:0; height:100%; width:100%; display:block; object-fit:contain; }
.logo-animado .logo-capa-aletas{ animation:logo-aleteo-suave 2.3s ease-in-out infinite; transform-origin:50% 55%; }
.logo-animado .logo-capa-nado{ animation:logo-nado-suave 4.2s ease-in-out infinite; transform-origin:50% 82%; }
.logo-animado .logo-capa-parpadeo{ opacity:0; animation:logo-nado-suave 4.2s ease-in-out infinite, logo-parpadeo 5.5s ease-in-out infinite; }
.logo-animado .logo-capa-guino{ opacity:0; animation:logo-nado-suave 4.2s ease-in-out infinite, logo-guino 10s ease-in-out infinite; }
.logo-animado .logo-resplandor{
  position:absolute; inset:-14px; z-index:-1; border-radius:50%; filter:blur(22px);
  background:radial-gradient(circle, var(--dorado) 0%, transparent 68%);
  animation:logo-resplandor-pulso 3.4s ease-in-out infinite alternate;
}
@keyframes logo-nado-suave{ 0%,100%{ transform:rotate(-1.4deg); } 50%{ transform:rotate(1.4deg); } }
@keyframes logo-aleteo-suave{ 0%,100%{ transform:rotate(-3.5deg); } 50%{ transform:rotate(3.5deg); } }
@keyframes logo-parpadeo{ 0%,90%,100%{ opacity:0; } 93%,96%{ opacity:1; } }
@keyframes logo-guino{ 0%,87%,100%{ opacity:0; } 88%,92%{ opacity:1; } 93%{ opacity:0; } }
@keyframes logo-resplandor-pulso{ 0%{ opacity:0.3; transform:scale(0.93); } 100%{ opacity:0.6; transform:scale(1.06); } }
/* ---- landing simple: logo + título + texto + accesos ---- */
.landing-simple{
  position:relative; z-index:2; height:100%; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:32px 28px; gap:2px;
}
.landing-simple-logo{ margin-bottom:34px; }
.landing-simple-titulo{
  font-family:var(--font-display); font-weight:800; font-size:26px; line-height:1.3; margin:0 0 14px;
  background:linear-gradient(135deg,var(--celeste),var(--dorado) 55%,var(--rosa));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.landing-simple-texto{ color:var(--texto-suave); font-size:14.5px; line-height:1.65; max-width:320px; margin:0 0 24px; }
.landing-simple-acciones{ width:100%; max-width:360px; display:flex; flex-direction:row; gap:10px; margin-bottom:24px; }
.landing-simple-acciones > *{ flex:1; min-width:0; }
.landing-simple-btn-link{ text-decoration:none; display:flex; align-items:center; justify-content:center; }
.landing-simple-redes{ display:flex; gap:12px; margin-bottom:18px; }
.landing-simple-redes a{
  width:38px; height:38px; border-radius:50%; background:var(--panel-claro); border:1px solid var(--borde-panel);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.landing-simple-redes img{ width:18px !important; height:18px !important; object-fit:contain !important; }
.landing-simple-btn-idioma{
  position:absolute; top:16px; right:16px; z-index:3;
  background:var(--panel-claro); border:1px solid var(--borde-panel); color:var(--crema);
  border-radius:10px; padding:6px 10px; font-family:var(--font-display); font-weight:700; font-size:11px; cursor:pointer;
}

.hero-copyright{ text-align:center; color:var(--texto-suave); font-size:10.5px; margin:8px 0 0; }

/* ---- login a pantalla completa, estilo billetera ---- */
#pantalla-login-full{
  position:fixed; inset:0; z-index:300; background:var(--fondo-app);
  display:none; flex-direction:column; padding:18px 22px 30px;
}
#pantalla-login-full.visible{ display:flex; }
.login-back{
  width:38px; height:38px; border-radius:50%; background:var(--panel-claro); border:none;
  color:var(--crema); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.login-toggle{ text-align:center; margin-top:22px; font-family:var(--font-display); font-weight:600; font-size:13px; }
.login-toggle span{ color:var(--texto-suave); cursor:pointer; padding:4px 6px; }
.login-toggle span.activo{ color:var(--crema); border-bottom:2px solid var(--rosa); }
.login-titulo{ text-align:center; font-family:var(--font-display); font-weight:700; font-size:22px; margin:22px 0 0; color:var(--crema); }
.login-instruccion{ text-align:center; color:var(--texto-suave); font-size:14px; margin-top:10px; }
.login-medio{ flex:1; display:flex; align-items:center; justify-content:center; }
#visor-telefono-full{ font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:2px; color:var(--crema); text-align:center; min-height:40px; }
.login-pin-dots{ display:flex; justify-content:center; gap:16px; }
.login-dot{ width:13px; height:13px; border-radius:50%; background:var(--borde-panel); transition:background .15s ease, transform .15s ease; }
.login-dot.lleno{ background:var(--rosa); transform:scale(1.15); }
.login-teclado-plano{ display:grid; grid-template-columns:repeat(3,1fr); align-items:center; }
.tecla-plana{
  background:none; border:none; text-align:center; font-family:var(--font-body); font-weight:600;
  font-size:32px; color:var(--crema); padding:16px 0; cursor:pointer;
}
.tecla-plana:active{ opacity:0.45; }
.tecla-plana.vacia{ cursor:default; }
.tecla-continuar{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--menta); }
.tecla-continuar.deshabilitado{ opacity:0.3; pointer-events:none; }

#pantalla-pin-personalizado{
  position:fixed; inset:0; z-index:400; background:var(--fondo-app);
  display:none; flex-direction:column; padding:18px 22px 30px;
}
#pantalla-pin-personalizado.visible{ display:flex; }

.acciones-p2p-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.acciones-p2p-grid button{
  font-family:var(--font-display); font-weight:700; font-size:9px; color:var(--crema);
  background:var(--panel-claro); border:1px solid var(--borde-panel); border-radius:12px;
  padding:12px 4px; cursor:pointer; text-align:center; line-height:1.3;
}
.acciones-p2p-grid button.op-pagar{ background:linear-gradient(135deg,var(--celeste),var(--celeste-fuerte)); color:#fff; border:none; }
.acciones-p2p-grid button.op-confirmar{ background:linear-gradient(135deg,#ffdd45,#e0a800); color:#3d2b00; border:none; }
.acciones-p2p-grid button.op-problema{ background:#e0004f; color:#fff; border:none; }

/* ---- tienda ---- */
.grid-tienda{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px;}
.carta-pez{
  background:var(--panel); border:2px solid var(--rosa); border-radius:14px; padding:8px 4px; text-align:center;
  cursor:pointer; transition:transform .18s ease; position:relative; z-index:1;
  box-shadow:0 3px 12px rgba(255,47,212,0.12);
}
.carta-pez:active{ transform:scale(0.95); }
.carta-pez:hover, .carta-pez.lupa{ transform:scale(1.15); z-index:5; box-shadow:0 8px 24px rgba(255,47,212,0.3); }
.carta-pez canvas{ margin-bottom:2px; max-width:100%; height:auto; }
.carta-pez .nombre{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--rosa); margin:5px 0 2px; line-height:1.3;}
.carta-pez .precio{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--menta);}
.carta-pez .stats-pez{ color:var(--texto-suave); font-size:11px; margin-top:2px; line-height:1.3;}
.carta-baul{
  display:flex; align-items:center; gap:12px; text-align:left;
  background:linear-gradient(135deg,var(--panel-claro),var(--panel));
  border:2px solid var(--dorado); border-radius:16px; padding:12px; cursor:pointer;
  box-shadow:0 4px 16px rgba(255,206,0,0.2);
}
.carta-baul .emoji{ font-size:34px; }
.carta-baul .nombre{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--dorado);}
.carta-baul .precio{ color:var(--texto-suave); font-size:13px; margin-top:4px;}
.grid-2col-tienda{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.grid-2col-tienda.una-columna{ grid-template-columns:1fr; }

/* ---- SOLO tienda: tarjetas de peces con imagen real, degradado, nado sutil y burbujas ---- */
.carta-pez-tienda{
  background:linear-gradient(160deg, var(--panel-claro) 0%, var(--panel) 100%);
  border:2px solid var(--rosa); border-radius:14px; padding:8px 4px; text-align:center;
  cursor:pointer; transition:transform .18s ease; position:relative; z-index:1; overflow:hidden;
  box-shadow:0 3px 12px rgba(255,47,212,0.12);
}
.carta-pez-tienda:active{ transform:scale(0.95); }
.carta-pez-tienda:hover{ transform:scale(1.08); z-index:5; box-shadow:0 8px 24px rgba(255,47,212,0.3); }
.marco-pez-tienda{ position:relative; width:100%; height:64px; display:flex; align-items:center; justify-content:center; }
.marco-pez-tienda-nado{ position:relative; width:auto; height:100%; animation:nado-suave-tienda 3.6s ease-in-out infinite; }
.marco-pez-tienda-nado img{ display:block; max-height:64px; width:auto; margin:0 auto; }
.marco-pez-tienda-nado img.capa-ojos-tienda{ position:absolute; inset:0; height:100%; width:100%; object-fit:contain; }
@keyframes nado-suave-tienda{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2.5px); } }
.burbuja-tienda-mini{
  position:absolute; bottom:6px; border-radius:50%; background:rgba(180,235,255,0.75);
  box-shadow:0 0 2px rgba(255,255,255,0.8); animation:subir-burbuja-tienda 2.6s ease-out forwards; pointer-events:none;
}
@keyframes subir-burbuja-tienda{ 0%{ transform:translateY(0); opacity:0.85; } 100%{ transform:translateY(-46px); opacity:0; } }
.carta-pez-tienda .nombre{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--rosa); margin:5px 0 2px; line-height:1.3;}
.carta-pez-tienda .precio{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--menta);}
.carta-pez-tienda .stats-pez{ color:var(--texto-suave); font-size:11px; margin-top:2px; line-height:1.3;}

/* ---- SOLO tienda: accesorios, fijos, sin animación, con su propio degradado ---- */
.carta-accesorio-tienda{
  background:linear-gradient(160deg, #2a1a45 0%, #1b1130 100%);
  border:2px solid var(--dorado); border-radius:14px; padding:8px 4px; text-align:center;
  cursor:pointer; transition:transform .15s ease; box-shadow:0 3px 12px rgba(255,206,0,0.12);
}
.carta-accesorio-tienda:active{ transform:scale(0.95); }
.carta-accesorio-tienda img{ max-height:56px; width:auto; margin:0 auto; display:block; }
.carta-accesorio-tienda .nombre{ font-family:var(--font-display); font-weight:700; font-size:11px; color:var(--dorado); margin:5px 0 2px; line-height:1.3; }
.carta-accesorio-tienda .precio{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--menta); }
.carta-accesorio-tienda .stats-pez{ color:var(--texto-suave); font-size:10px; margin-top:2px; }

/* ---- SOLO tienda: tarjeta del token de gobernanza, imagen izquierda / texto derecha ---- */
.carta-token-horizontal{
  display:flex; align-items:center; gap:10px; text-align:left; padding:8px;
  background:linear-gradient(135deg,var(--panel-claro),var(--panel)); border:2px solid var(--dorado); border-radius:16px;
  cursor:pointer; box-shadow:0 4px 16px rgba(255,206,0,0.2);
}
.carta-token-horizontal .marco-caballo{ position:relative; width:52px; height:52px; flex-shrink:0; }
.carta-token-horizontal .marco-caballo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.carta-token-horizontal .texto-token{ flex:1; min-width:0; }
.carta-token-horizontal .nombre{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--dorado); }
.carta-token-horizontal .precio{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--crema); margin-top:2px; }
.carta-token-horizontal .stats-pez{ color:var(--texto-suave); font-size:10px; margin-top:2px; }

/* ---- SOLO tienda: animación de abrir el baúl — cuadros con fundido suave (no un flip mecánico), y un resplandor grande desde el principio ---- */
.overlay-baul-oscuro{
  position:fixed; inset:0; z-index:45; background:rgba(0,0,0,0.9);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
.overlay-baul-oscuro.visible{ opacity:1; pointer-events:auto; }
.baul-marco-animacion{ position:relative; width:220px; height:220px; margin:0 auto; }
.baul-marco-animacion img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity 0.5s ease-in-out; /* el fundido tiene que caber DENTRO de los 620ms que dura cada cuadro (duracionPorCuadro en reproducirAnimacionBaul) — si dura más que eso, el siguiente cuadro empieza a aparecer antes de que el anterior termine, y se ve cortado en vez de suave */
}
.baul-marco-animacion img.cuadro-activo{ opacity:1; }
.baul-marco-animacion{
  animation:baul-resplandor-grande 2.2s ease-in-out infinite alternate;
}
@keyframes baul-resplandor-grande{
  0%{ filter:drop-shadow(0 0 20px #ff2fd4) drop-shadow(0 0 45px #22d3ee) drop-shadow(0 0 70px rgba(255,206,0,0.35)); }
  100%{ filter:drop-shadow(0 0 45px #ff2fd4) drop-shadow(0 0 90px #22d3ee) drop-shadow(0 0 130px rgba(255,206,0,0.55)) brightness(1.2); }
}
.carta-mini-tienda{
  background:linear-gradient(135deg,var(--panel-claro),var(--panel)); border:2px solid var(--dorado); border-radius:16px; padding:12px 8px;
  text-align:center; cursor:pointer; transition:transform .15s ease; box-shadow:0 4px 16px rgba(255,206,0,0.15);
}
.carta-mini-tienda:active{ transform:scale(0.96); }
.carta-mini-tienda .emoji{ font-size:28px; }
.carta-mini-tienda .nombre{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--dorado); margin-top:6px; }
.carta-mini-tienda .precio{ color:var(--texto-suave); font-size:11px; margin-top:3px; line-height:1.4; }
.tasa-bcv-nota{
  text-align:center; font-size:13px; color:var(--texto-suave); margin:10px 0 4px;
  background:#fff; border:1px dashed var(--celeste); border-radius:10px; padding:8px;
}

/* ---- arrecife ---- */
.arrecife-wrap{ position:relative; width:100%; height:280px; border-radius:20px; overflow:hidden; border:3px solid var(--celeste); box-shadow:0 0 20px rgba(0,195,255,0.25); cursor:pointer;}
#lienzo-arrecife{ width:100%; height:100%; display:block; }

#pantalla-arrecife{ padding:0 !important; position:relative; }
#pantalla-arrecife.activa{ min-height:100%; }
#pantalla-arrecife #arrecife-wrap{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; border:none; box-shadow:none; }
.arrecife-overlay{ position:absolute; top:0; left:0; right:0; z-index:2; padding:16px 16px 28px; background:linear-gradient(180deg, rgba(10,8,30,0.78) 0%, rgba(10,8,30,0.4) 65%, transparent 100%); pointer-events:none; }
.arrecife-overlay h2{ margin:0 0 4px; }
.arrecife-overlay p{ margin:0; font-size:13px; color:var(--texto-suave); }
#pantalla-arrecife .contador-arrecife{ position:absolute; left:16px; bottom:16px; z-index:2; margin:0; background:rgba(10,8,30,0.6); padding:7px 14px; border-radius:14px; backdrop-filter:blur(4px); }
.perla-flotante{ position:absolute; bottom:0; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffffff, #eafcff 60%, #bdeaff); box-shadow:0 0 6px rgba(255,255,255,0.9); animation:flotar-perla 5s linear forwards; pointer-events:none;}
@keyframes flotar-perla{ 0%{ transform:translateY(0); opacity:1;} 100%{ transform:translateY(-260px); opacity:0;} }
.contador-arrecife{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--lavanda); margin:10px 0 14px;}
.tooltip-pez{
  position:absolute; pointer-events:none; z-index:10; transform:translate(-50%,-115%);
  background:#171827; border:2px solid var(--dorado); border-radius:12px;
  padding:6px 10px; font-size:11px; color:#fff; white-space:nowrap; text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
}
.tooltip-pez .t-nombre{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--dorado); margin-bottom:2px;}

/* ---- cartera / wallet minimalista ---- */
.monto{ font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--rosa-fuerte);}
.saldo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.saldo-card{ text-align:center; }
.saldo-card .monto{ font-size:17px; }
.saldo-card.rosa{ border:2px solid var(--rosa); }
.saldo-card.rosa .monto{ color:var(--rosa-fuerte); }
.saldo-card.celeste{ border:2px solid var(--celeste); }
.saldo-card.celeste .monto{ color:#0090c2; }
.monto-secundario{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--texto-suave); margin-top:6px;}
.swap-tabs{ display:flex; gap:6px; }
.swap-tab{
  flex:1; font-family:var(--font-display); font-weight:700; font-size:12px; padding:10px 4px; text-align:center;
  border:2px solid var(--lavanda); background:var(--panel-claro); color:var(--lavanda); border-radius:12px; cursor:pointer;
}
.swap-tab.activo{ background:var(--lavanda); color:#fff; }
.tarjeta-pez{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  background:var(--panel); border:2px solid var(--lavanda); border-radius:16px; padding:12px; margin-bottom:10px;
  position:relative; box-shadow:0 3px 14px rgba(156,77,255,0.1);
}
.tarjeta-pez .acciones-pez{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:4px; width:100%; }
.tarjeta-pez .acciones-pez button{ font-size:7px; padding:6px 8px; }
.tarjeta-pez.pez-inactivo{ opacity:0.55; border-color:#e0004f; }
.tarjeta-pez.pez-inactivo canvas{ filter:grayscale(0.7); }

.nav-inferior{ flex:0 0 auto; display:flex; background:var(--navbar); padding:3px 6px 0; gap:3px; border-top:1px solid var(--borde-panel); }
#btn-telegram-soporte{
  position:fixed; right:12px; bottom:64px; z-index:50; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:#fff; font-size:20px;
  transition:bottom .15s ease;
}
#btn-telegram-soporte img{ width:24px; height:24px; object-fit:contain; }
.nav-inferior.oculto{ display:none; }
.nav-btn{
  flex:1; background:none; border:none; color:#7d84a8; font-family:var(--font-body); font-weight:700;
  font-size:9px; padding:2px 2px 2px; text-align:center; cursor:pointer; line-height:1.2; letter-spacing:.02em;
  border-radius:14px; transition:background .18s ease, color .18s ease, transform .12s ease;
}
.nav-btn span{ font-size:inherit; }
.nav-btn:active{ transform:scale(0.92); }
.nav-btn .icono{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin:0 auto 1px;
  border-radius:12px; transition:background .2s ease, transform .2s ease;
}
.nav-btn .icono img{ width:36px; height:36px; object-fit:contain; opacity:0.5; transition:opacity .2s ease; }
.nav-btn.activo{ color:var(--tema-glow-1); }
.nav-btn.activo .icono{
  transform:translateY(-2px);
  background:radial-gradient(circle, color-mix(in srgb, var(--tema-glow-1) 35%, transparent) 0%, color-mix(in srgb, var(--tema-glow-2) 18%, transparent) 65%, transparent 100%);
}
.nav-btn.activo .icono img{ opacity:1; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }

.footer-credito{ flex:0 0 auto; text-align:center; font-family:var(--font-body); font-size:9px; color:#6b7399; padding:0 0 calc(2px + env(safe-area-inset-bottom)); background:var(--navbar); line-height:1.1; }
.barra-xp-contenedor{ width:100%; height:9px; background:var(--panel-claro); border-radius:6px; overflow:hidden; border:1px solid var(--borde-panel); }
.barra-xp-relleno{ height:100%; background:linear-gradient(90deg,var(--menta),var(--celeste)); border-radius:6px; transition:width .5s ease; }
@media (min-width:521px){ .footer-credito{ display:none; } }

.mensaje-error{ color:#e0004f; font-size:15px; text-align:center; margin-top:6px; min-height:20px;}
.mensaje-ok{ color:#1a9e5c; font-size:15px; text-align:center; margin-top:6px; min-height:20px;}
.oculto{ display:none !important; }

.modal-overlay{ position:fixed; inset:0; background:rgba(20,20,43,0.55); z-index:50; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.pantalla-completa{ padding:0; }
.modal-overlay.pantalla-completa .modal-caja{ max-width:none; width:100%; height:100%; max-height:none; border-radius:0; border-width:0; display:flex; flex-direction:column; justify-content:center; }
.modal-caja{ background:var(--panel); border:3px solid var(--rosa); border-radius:24px; padding:20px; max-width:340px; width:100%; box-shadow:0 20px 50px rgba(20,20,50,0.25); text-align:center; max-height:90vh; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
.modal-caja-reto{
  background:linear-gradient(135deg, #0B1426 0%, #101D34 15%, #141A35 30%, #141A35 62%, #182941 100%);
}
.cabecera-modal-reto{ position:relative; margin:-4px 0 10px; }
.cabecera-modal-reto h2{ margin:0; text-align:center; padding-right:30px; }
.modal-cerrar-reto{
  position:absolute; top:-2px; right:-2px; background:none; border:none;
  color:var(--rosa-fuerte); font-family:var(--font-display); font-weight:700; font-size:16px; cursor:pointer;
}
.video-modal-reto{ width:100%; max-width:280px; border-radius:16px; margin:0 auto 10px; display:block; }
.monto-grande-reto{ font-family:var(--font-display); font-weight:800; font-size:22px !important; text-align:center; color:var(--dorado); }
.monto-grande-reto-texto{ color:var(--dorado); font-family:var(--font-display); font-weight:800; font-size:28px; margin:6px 0 10px; }
.modal-caja::-webkit-scrollbar{ display:none; }
.sin-scrollbar::-webkit-scrollbar{ display:none; }
.modal-cerrar{ float:right; background:none; border:none; color:var(--rosa-fuerte); font-family:var(--font-display); font-weight:700; font-size:14px; cursor:pointer;}

/* ---------- avisos propios (reemplazan alert/confirm/prompt del navegador) — chiquitos, arriba ---------- */
#toast-arrecifex-cont{ position:fixed; top:0; left:0; right:0; z-index:9999; display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:calc(10px + env(safe-area-inset-top)); pointer-events:none; }
.toast-arrecifex{ pointer-events:auto; background:var(--panel); border:2px solid var(--dorado); border-radius:16px; padding:12px 16px; max-width:340px; width:calc(100% - 32px); box-shadow:0 10px 30px rgba(20,20,50,0.35); font-family:var(--font-body); color:var(--crema); animation:toastBajar .22s ease; }
.toast-arrecifex.error{ border-color:#e0004f; }
.toast-arrecifex-salir{ animation:toastSubir .18s ease forwards; }
@keyframes toastBajar{ from{ transform:translateY(-24px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes toastSubir{ from{ transform:translateY(0); opacity:1; } to{ transform:translateY(-24px); opacity:0; } }
.toast-arrecifex-texto{ font-size:14px; text-align:center; line-height:1.35; }
.toast-arrecifex-ok{ display:block; margin:10px auto 0; background:var(--dorado); color:#1a1330; border:none; border-radius:10px; padding:7px 18px; font-family:var(--font-display); font-weight:700; font-size:13px; cursor:pointer; }
.toast-arrecifex.error .toast-arrecifex-ok{ background:#e0004f; color:#fff; }
.toast-arrecifex-botones{ display:flex; gap:8px; margin-top:10px; }
.toast-arrecifex-btn{ flex:1; border:none; border-radius:10px; padding:8px 10px; font-family:var(--font-display); font-weight:700; font-size:13px; cursor:pointer; }
.toast-arrecifex-btn.si{ background:var(--dorado); color:#1a1330; }
.toast-arrecifex-btn.no{ background:var(--panel-claro); color:var(--crema); border:1px solid var(--borde-panel); }
.toast-arrecifex-velo{ position:fixed; inset:0; z-index:9998; background:transparent; }
.toast-arrecifex-input{ margin-top:8px; }
.wallet-caja{ background:var(--panel-claro); border:2px dashed var(--celeste); border-radius:12px; padding:10px; margin:10px 0; font-size:13px; word-break:break-all; color:var(--crema); font-family:'Baloo 2', monospace; text-align:left; white-space:pre-line;}
.btn-metodo{ flex:1; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--crema); background:var(--panel-claro); border:2px solid var(--lavanda); border-radius:16px; padding:14px 6px; cursor:pointer; line-height:2;}
.btn-metodo.activo{ background:linear-gradient(135deg,var(--lavanda),#7c2fe0); color:#fff; border-color:var(--lavanda); }
.campo-tel{ width:100%; padding:12px; font-family:var(--font-body); font-size:18px; border:2px solid var(--celeste); border-radius:10px; background:var(--panel-claro); color:var(--crema); text-align:center;}
.campo-tel:focus{ outline:none; border-color:var(--dorado); }

.fila-ranking{ display:flex; align-items:center; gap:10px; background:var(--panel); border:2px solid var(--lavanda); border-radius:14px; padding:10px 12px; margin-bottom:8px; box-shadow:0 3px 12px rgba(156,77,255,0.1);}
/* ---- muro social ---- */
.post-muro{ background:var(--panel); border-radius:16px; padding:12px; margin-bottom:10px; border:2px solid var(--borde-panel); }
.post-muro.tipo-dato{ background:linear-gradient(135deg, rgba(34,211,238,0.1), var(--panel)); border-color:var(--celeste); }
.post-muro.tipo-reto{ background:linear-gradient(135deg, rgba(255,206,0,0.1), var(--panel)); border-color:var(--dorado); }
.post-muro.tipo-resultado_reto{ background:linear-gradient(135deg, rgba(255,47,212,0.1), var(--panel)); border-color:var(--rosa); text-align:center; }
.post-muro-cabecera{ display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--texto-suave); margin-bottom:6px; }
.post-muro-autor{ font-family:var(--font-display); font-weight:700; color:var(--crema); font-size:12px; }
.post-muro-texto{ font-size:13.5px; color:var(--crema); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.post-muro img.post-muro-imagen{ max-width:100%; border-radius:10px; margin-top:8px; display:block; }
.post-muro-acciones{ display:flex; gap:14px; margin-top:10px; align-items:center; }
.post-muro-accion{ display:flex; align-items:center; gap:4px; font-size:12px; color:var(--texto-suave); cursor:pointer; background:none; border:none; font-family:var(--font-body); }
.post-muro-accion.activo-like{ color:var(--menta); font-weight:700; }
.post-muro-accion.activo-dislike{ color:#e0004f; font-weight:700; }
.post-muro-comentarios{ margin-top:8px; border-top:1px solid var(--borde-panel); padding-top:8px; }
.post-muro-comentario{ font-size:12px; margin-bottom:6px; }
.post-muro-comentario b{ color:var(--lavanda); }
.post-muro-comentario.negativo{ color:#ff8fa8; }
.post-muro-comentar-fila{ display:flex; gap:6px; margin-top:6px; align-items:center; }
.post-muro-comentar-fila input{ flex:1; background:var(--panel-claro); border:1px solid var(--borde-panel); border-radius:10px; padding:7px 10px; font-size:12px; color:var(--crema); font-family:var(--font-body); }
.grid-jugadas-muro{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.btn-jugada-muro{
  background:var(--panel-claro); border:2px solid var(--borde-panel); border-radius:14px; padding:12px 4px;
  color:var(--crema); font-family:var(--font-display); font-weight:700; font-size:11px; cursor:pointer; line-height:1.8;
}
.btn-jugada-muro.seleccionada{ border-color:var(--dorado); background:rgba(255,206,0,0.15); box-shadow:0 0 10px rgba(255,206,0,0.3); }
.btn-jugada-muro img{ width:30px; height:30px; object-fit:contain; }
.badge-reto-abierto{ font-size:9px; background:var(--dorado); color:#3d2b00; padding:2px 8px; border-radius:8px; font-weight:800; }
.badge-reto-cerrado{ font-size:9px; background:var(--borde-panel); color:var(--texto-suave); padding:2px 8px; border-radius:8px; font-weight:800; }
.fila-ranking.yo{ border-color:var(--dorado); background:rgba(255,206,0,0.12); }
.puesto-ranking{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--rosa-fuerte); width:34px; text-align:center; flex:0 0 auto;}
.info-ranking{ flex:1; }
.info-ranking .nombre-jugador{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--lavanda);}
.info-ranking .score-jugador{ color:var(--texto-suave); font-size:15px;}

/* ---- dashboard / explorador (Home) ---- */
.dash-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px; }
.dash-grid-4{ grid-template-columns:repeat(4,1fr); gap:6px; }
.dash-grid-4 .eyebrow{ font-size:6.5px; }
.dash-grid-4 .valor-dash{ font-size:11px; }
.grid-info-home{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.cuadrito-info{
  background:var(--panel); border-radius:16px; padding:14px 11px; text-align:left; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 2px 8px rgba(90,60,150,0.07);
  display:flex; flex-direction:column; gap:3px; border:none;
}
.cuadrito-info:active{ transform:scale(0.96); }
.cuadrito-info .etq{ font-family:var(--font-body); font-weight:600; font-size:9px; color:var(--texto-suave); text-transform:uppercase; letter-spacing:.02em; line-height:1.25; }
.cuadrito-info .val{ font-family:var(--font-body); font-weight:800; font-size:17px; word-break:break-word; }
.cuadrito-info .val small{ font-size:10px; font-weight:600; opacity:0.7; }
.cuadrito-info.rosa{ border-left:3px solid var(--rosa); } .cuadrito-info.rosa .val{ color:var(--rosa); }
.cuadrito-info.celeste{ border-left:3px solid var(--celeste); } .cuadrito-info.celeste .val{ color:var(--celeste); }
.cuadrito-info.menta{ border-left:3px solid var(--menta); } .cuadrito-info.menta .val{ color:var(--menta); }
.cuadrito-info.lavanda{ border-left:3px solid var(--lavanda); } .cuadrito-info.lavanda .val{ color:var(--lavanda); }
.cuadrito-info.dorado{ border-left:3px solid var(--dorado); } .cuadrito-info.dorado .val{ color:var(--dorado); }
.dash-card{ background:var(--panel-claro); border-radius:16px; padding:14px 8px; text-align:center; }
.dash-card .valor-dash{ font-family:var(--font-display); font-weight:800; font-size:19px; margin-top:5px; }
.dash-card.rosa{ border:2px solid var(--rosa); } .dash-card.rosa .valor-dash{ color:var(--rosa); }
.dash-card.celeste{ border:2px solid var(--celeste); } .dash-card.celeste .valor-dash{ color:var(--celeste); }
.dash-card.menta{ border:2px solid var(--menta); } .dash-card.menta .valor-dash{ color:var(--menta); }
.dash-card.dorado{ border:2px solid var(--dorado); } .dash-card.dorado .valor-dash{ color:var(--dorado); }
.dash-card.lavanda{ border:2px solid var(--lavanda); } .dash-card.lavanda .valor-dash{ color:var(--lavanda); }
.barra-eco{ width:100%; height:14px; background:var(--panel-claro); border-radius:8px; overflow:hidden; margin:8px 0; }
.barra-eco .relleno{ height:100%; background:linear-gradient(90deg,var(--rosa),var(--lavanda),var(--celeste)); }
.tabla-explorador{ width:100%; font-size:11px; border-collapse:collapse; margin-top:8px; }
.tabla-explorador th{ text-align:left; color:var(--texto-suave); font-weight:600; padding:4px 4px; border-bottom:2px solid var(--borde-panel); font-size:10px;}
.tabla-explorador td{ padding:6px 4px; border-bottom:1px solid #f6f6fb; color:var(--crema); }
.tabla-explorador .hash-corto{ font-family:monospace; color:var(--lavanda); cursor:pointer; }

/* ---- carta NFT (modal de compra) ---- */
.nft-card{ background:linear-gradient(160deg,var(--panel-claro), var(--panel) 60%, var(--fondo-app)); border-radius:26px; border:3px solid transparent; background-clip:padding-box; position:relative; padding:18px; box-shadow:0 20px 45px rgba(156,77,255,0.25); }
.nft-card::before{ content:''; position:absolute; inset:-3px; z-index:-1; border-radius:26px; background:linear-gradient(135deg, var(--rosa), var(--lavanda), var(--celeste), var(--dorado)); }
.nft-rareza{ position:absolute; top:46px; right:12px; font-family:var(--font-display); font-weight:700; font-size:11px; background:var(--navbar); color:var(--dorado); padding:5px 8px; border-radius:8px; z-index:2; }
.nft-marco-pez{ background:radial-gradient(circle, var(--panel-claro) 0%, var(--panel) 100%); border-radius:18px; padding:10px; margin:6px 0 10px; border:2px solid #eee; }

.historial-fila{ background:var(--panel-claro); border-radius:12px; padding:10px; margin-bottom:8px; text-align:left; font-size:13px; }
.historial-fila .estado-pendiente{ color:var(--dorado); }
.historial-fila .estado-aprobado, .historial-fila .estado-pagado{ color:#1a9e5c; }
.historial-fila .estado-rechazado{ color:#e0004f; }
.fondo-app-global{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.fondo-app-sombra{ position:fixed; inset:0; z-index:0; background:var(--tema-sombra-fondo, rgba(11,15,34,0.75)); transition:background 1.2s ease; }

/* ============================================================
   ESCRITORIO — PROTOTIPO (solo Home por ahora)
   Todo lo de acá abajo vive dentro de un @media, así que la app móvil
   (todo el CSS de arriba) queda exactamente igual, sin tocar nada.
   El layout de barra lateral solo se activa una vez el usuario ya inició
   sesión (#nav-inferior visible) — la pantalla de login se queda tal cual.
   ============================================================ */
@media (min-width:900px){
  body{ overflow:auto; }
  #app:has(#nav-inferior:not(.oculto)){
    width:100%; max-width:1700px;
    height:100vh; height:100dvh;
    display:grid;
    grid-template-columns:230px 1fr;
    grid-template-rows:auto 1fr auto;
    grid-template-areas:
      "topbar topbar"
      "sidebar main"
      "footer footer";
    border-left:none; border-right:none;
    box-shadow:0 0 60px rgba(0,0,0,0.18);
  }
  #app:has(#nav-inferior:not(.oculto)) #topbar-juego{ grid-area:topbar; }
  #app:has(#nav-inferior:not(.oculto)) #zona-scroll{ grid-area:main; }
  #app:has(#nav-inferior:not(.oculto)) #footer-credito-app{ grid-area:footer; display:block; padding:6px 0 6px; }
  #app:has(#nav-inferior:not(.oculto)) #nav-inferior{
    grid-area:sidebar;
    flex-direction:column;
    align-items:stretch;
    padding:20px 12px;
    gap:4px;
    border-top:none;
    border-right:1px solid var(--borde-panel);
  }
  #app:has(#nav-inferior:not(.oculto)) .nav-btn{
    display:flex; align-items:center; gap:14px;
    flex:0 0 auto; text-align:left; font-size:16px;
    padding:12px 16px; border-radius:12px;
  }
  #app:has(#nav-inferior:not(.oculto)) .nav-btn .icono{ margin:0; width:40px; height:40px; }
  #app:has(#nav-inferior:not(.oculto)) .nav-btn .icono img{ width:36px; height:36px; }
  #app:has(#nav-inferior:not(.oculto)) .nav-btn.activo{ background:var(--panel-claro); }

  /* el botón de Telegram es position:fixed y, al ser hijo directo de #app (que ahora es un grid),
     el navegador calcula mal su posición vertical (usa el área del grid para la "posición estática"
     en vez del viewport) — se le fuerza la posición explícita para que no dependa de eso. */
  #app:has(#nav-inferior:not(.oculto)) #btn-telegram-soporte{
    grid-area:footer; top:auto !important; bottom:80px !important; right:24px !important;
  }

  /* más aire en todas las pantallas, ya que sobra ancho */
  #app:has(#nav-inferior:not(.oculto)) .pantalla{ padding:28px 40px 40px; }

  /* Home: más columnas en los cuadritos */
  #app:has(#nav-inferior:not(.oculto)) .grid-info-home{ grid-template-columns:repeat(5,1fr); gap:14px; }

  /* Tienda + Marketplace P2P + Mercadito del Muro: las tres usan .grid-tienda, así que
     este solo cambio les da más columnas a todas a la vez */
  #app:has(#nav-inferior:not(.oculto)) .grid-tienda{ grid-template-columns:repeat(6,1fr); gap:16px; }

  /* pantallas tipo formulario o feed: se ven mejor con un ancho cómodo y centrado,
     en vez de estirarse a todo lo ancho de la pantalla */
  #app:has(#nav-inferior:not(.oculto)) #pantalla-perfil,
  #app:has(#nav-inferior:not(.oculto)) #vista-muro-social{
    max-width:760px; margin-left:auto; margin-right:auto;
  }

  /* Wallet: en vez de una sola columna angosta desperdiciando espacio, las tarjetas de la
     pestaña "Mi Wallet" se acomodan solas en 2 columnas (como un periódico) — cada tarjeta
     completa cae en una columna u otra, nunca se parte a la mitad. */
  #app:has(#nav-inferior:not(.oculto)) #pantalla-cartera{ max-width:1140px; margin-left:auto; margin-right:auto; }
  #app:has(#nav-inferior:not(.oculto)) #vista-wallet-mia{ column-count:2; column-gap:20px; }
  #app:has(#nav-inferior:not(.oculto)) #vista-wallet-mia > *{ break-inside:avoid; margin-top:0 !important; margin-bottom:12px; }

  /* Landing (hero) prelogin: sin sesión, #app se queda angosto (max-width:480px) — acá lo
     ensanchamos SOLO para esta pantalla, así los peces/burbujas de fondo usan mucho más
     espacio, dando una sensación real de "hero" de escritorio. El texto/botones se quedan
     del mismo ancho de siempre (ya tienen su propio max-width), solo quedan centrados
     dentro de una escena más grande. */
  #app:has(#pantalla-hero.activa){ max-width:1400px; }

  /* Login (teclado de teléfono/PIN): es position:fixed, así que no hereda el ancho de #app —
     sin esto, el teclado numérico se estira a todo el ancho de la ventana y las teclas quedan
     absurdamente separadas. Se le da un ancho cómodo y centrado, como cualquier formulario. */
  #pantalla-login-full.visible{ width:100%; max-width:420px; left:50%; right:auto; transform:translateX(-50%); box-shadow:0 0 60px rgba(0,0,0,0.18); }

  /* Confirmar con PIN (abrir baúl, comprar, enviar perlas, cambiar PIN, etc.) — mismo problema
     y mismo arreglo que el teclado de login: es position:fixed sin ancho propio. */
  #pantalla-pin-personalizado.visible{ width:100%; max-width:420px; left:50%; right:auto; transform:translateX(-50%); box-shadow:0 0 60px rgba(0,0,0,0.18); }
}