/* Ruleta de premios de la oficina virtual (ruleta.js). Las hojas del premio y de las bases
   usan el mismo diseño del instalador (instalar.css: .pwa-overlay, .pwa-sheet, .pwa-btn). */

/* Mientras se juega, se esconden los controles de caminar y los avisos de la oficina */
body.ruleta-abierta .joystick, body.ruleta-abierta .accion, body.ruleta-abierta .ayuda, body.ruleta-abierta .ahora,
body.ruleta-abierta .tarjeta, body.ruleta-abierta .aviso, body.ruleta-abierta .burbuja { display: none !important; }

/* ---------- Panel del juego ---------- */
.rl-panel {
  position: fixed; right: 18px; top: 50%; z-index: 40; width: 340px; padding: 18px 18px 14px;
  background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(12, 17, 48, .35);
  font-family: Lato, system-ui, sans-serif; color: var(--marino); text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(-46%) scale(.96); transition: opacity .3s, transform .35s cubic-bezier(.2, .9, .3, 1), visibility .3s;
}
.rl-panel.visible { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
.rl-x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: #eef1fb; color: var(--marino); font-size: 18px; line-height: 1; }
.rl-tit { display: flex; align-items: center; gap: 12px; text-align: left; padding-right: 30px; }
.rl-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 24px;
  background: linear-gradient(145deg, #ffb35c, #ff702e 50%, #d6247a); box-shadow: 0 8px 18px rgba(214, 36, 122, .35); }
.rl-tit b { display: block; font-size: 19px; font-weight: 900; }
.rl-tit small { display: block; font-size: 12.5px; color: #6b7699; font-weight: 700; }

.rl-giros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 10px; }
.rl-giro { border-radius: 14px; padding: 8px 4px; background: #f3f5fc; border: 2px solid transparent; transition: .25s; }
.rl-giro small { display: block; font-size: 11px; font-weight: 700; color: #8a93b3; }
.rl-giro b { display: block; font-size: 22px; font-weight: 900; color: #b8bfd8; }
.rl-giro.nada b { color: #9aa1bd; }
.rl-giro.gano { background: #fff4e8; }
.rl-giro.gano b { color: #ff702e; }
.rl-giro.mejor { border-color: #ffc531; background: #fff8e1; box-shadow: 0 6px 16px rgba(255, 197, 49, .35); }
.rl-giro.mejor::after { content: 'MEJOR'; display: block; font-size: 10px; font-weight: 900; color: #c98a00; letter-spacing: .5px; }

.rl-msg { min-height: 40px; margin: 4px 0 12px; font-size: 14.5px; line-height: 1.45; color: #3a4466; }
.rl-msg b { color: var(--magenta); }
.rl-girar {
  position: relative; width: 100%; padding: 16px; border-radius: 16px; font-size: 20px; font-weight: 900; letter-spacing: .5px; color: #fff;
  background: linear-gradient(145deg, #ffb35c, #ff702e 45%, #d6247a); box-shadow: 0 14px 28px -8px rgba(214, 36, 122, .65);
  animation: rlLatido 1.6s ease-in-out infinite;
}
.rl-girar:disabled { animation: none; opacity: .55; cursor: default; }
.rl-girar:not(:disabled):active { transform: translateY(1px); }
@keyframes rlLatido { 0%, 100% { box-shadow: 0 14px 28px -8px rgba(214, 36, 122, .65), 0 0 0 0 rgba(255, 112, 46, .45); } 50% { box-shadow: 0 14px 28px -8px rgba(214, 36, 122, .65), 0 0 0 12px rgba(255, 112, 46, 0); } }
.rl-reclamar { width: 100%; margin-top: 10px; padding: 13px; border-radius: 14px; font-size: 15.5px; font-weight: 900; color: #1d276a; background: linear-gradient(145deg, #ffe08a, #ffc531); box-shadow: 0 10px 22px -8px rgba(201, 138, 0, .6); }
.rl-link { margin-top: 10px; background: none; color: #7d86a8; font-size: 12.5px; font-weight: 700; text-decoration: underline; }

/* ---------- Hoja del premio ---------- */
.rl-hoja h3 { margin-top: 4px; }
.rl-trofeo {
  display: grid; place-items: center; align-content: center; width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ffe9a8, #ffc531 45%, #ff702e); color: #1d276a; box-shadow: 0 12px 28px rgba(255, 112, 46, .45), inset 0 -6px 0 rgba(0, 0, 0, .08);
}
.rl-trofeo b { font-size: 30px; font-weight: 900; line-height: 1; }
.rl-trofeo small { font-size: 9.5px; font-weight: 900; letter-spacing: 1px; }
.rl-form { text-align: left; }
.rl-form label { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: #4a5578; }
.rl-form input[name="nombre"], .rl-tel { display: flex; width: 100%; margin-top: 5px; border: 1.5px solid #d5daf0; border-radius: 12px; background: #fff; font: 600 15px Lato, sans-serif; color: var(--marino); }
.rl-form input[name="nombre"] { padding: 12px 13px; outline: none; }
.rl-tel span { display: grid; place-items: center; padding: 0 12px; border-right: 1.5px solid #e3e7f5; color: #6b7699; font-weight: 900; }
.rl-tel input { flex: 1; min-width: 0; padding: 12px 13px; border: 0; border-radius: 0 12px 12px 0; outline: none; font: inherit; color: inherit; background: none; }
.rl-form input[name="nombre"]:focus, .rl-tel:focus-within { border-color: #ff702e; box-shadow: 0 0 0 3px rgba(255, 112, 46, .15); }
.rl-check { display: flex !important; align-items: flex-start; gap: 9px; font-weight: 600 !important; }
.rl-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: #d6247a; flex: none; }
.rl-check a { color: #d6247a; }
.rl-error { min-height: 18px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #e5294d; }
.rl-cupon { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px auto 12px; padding: 12px 14px; border: 2px dashed #ff702e; border-radius: 14px; background: #fff7f0; }
.rl-cupon span { font: 900 22px/1 Consolas, 'Courier New', monospace; letter-spacing: 1px; color: #1d276a; }
.rl-cupon button { padding: 6px 10px; border-radius: 9px; background: #1d276a; color: #fff; font-size: 12px; font-weight: 900; }
.pwa-btn.rl-wsp { text-decoration: none; background: linear-gradient(145deg, #4be37e, #25d366 55%, #128c4b); box-shadow: 0 12px 26px -8px rgba(18, 140, 75, .6); }
.rl-bases { max-height: min(56vh, 480px); overflow: auto; margin: 4px 0 16px; padding-right: 4px; text-align: left; font-size: 13.5px; line-height: 1.5; color: #3a4466; }
.rl-bases p { margin: 0 0 9px; }
.rl-bases b { color: var(--marino); }

/* ---------- Confeti ---------- */
.rl-confeti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2600; pointer-events: none; }

/* ---------- Celular: el panel va abajo y la ruleta queda arriba ---------- */
@media (max-width: 680px) {
  .rl-panel { left: 10px; right: 10px; top: auto; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; padding: 14px 14px 10px; border-radius: 20px; transform: translateY(30px); }
  .rl-panel.visible { transform: none; }
  .rl-tit b { font-size: 17px; }
  .rl-giros { margin: 12px 0 8px; }
  .rl-giro b { font-size: 19px; }
  .rl-msg { min-height: 34px; margin-bottom: 10px; font-size: 13.5px; }
  .rl-girar { padding: 14px; font-size: 18px; }
}