/* La página de la ruleta de los sorteos (sorteos.estellari.com). Es aparte de las apps: tiene sus propios estilos.
   Distribución: en celular una columna (evento, ruleta, botones, lista); en computadora la ruleta a la izquierda y el
   panel a la derecha. Los colores y las letras son los de la tienda. */
:root {
  --fondo: #070F14;
  --sup: #0E1A21;
  --sup2: #14242D;
  --linea: #213844;
  --borde-input: #2E5260;
  --texto: #ECF6F4;
  --tenue: #9DB4B9;
  --suave: #C9DADD;
  --verde: #2BE5A0;
  --verde-claro: #8DF7CF;
  --sobre-verde: #062016;
  --naranja: #FF9F43;
  --naranja-texto: #FFB86B;
  --sobre-naranja: #1F1206;
  --amarillo: #FFE27A;
  --hl: #10282B;
  --hl-borde: #1F5A4B;
  --marca-1: #5ED4FF;
  --marca-2: #8FA6FF;
  --marca-3: #B07CFF;
  --marca-4: #E35CF2;
  --sombra: rgba(0, 0, 0, 0.55);
  --velo: rgba(7, 15, 20, 0.86);
  --display: 'Chakra Petch', 'Barlow', system-ui, sans-serif;
  --cuerpo: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --chaflan: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --chaflan-chico: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
h1, h2 { font-family: var(--display); margin: 0; line-height: 1.12; text-wrap: balance; }
p { margin: 0; }
.oculto-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pagina {
  max-width: 1160px;
  margin: 0 auto;
  padding-block: 0 32px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Encabezado de marca */
.barra { display: flex; align-items: center; gap: 10px; min-height: 58px; border-bottom: 1px solid var(--linea); }
.marca { display: block; width: 158px; height: auto; flex: 0 1 158px; min-width: 0; }
.etiqueta {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; flex: none;
  background: var(--naranja); color: var(--sobre-naranja);
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  clip-path: var(--chaflan-chico);
}
.btn-icono {
  flex: none; margin-left: auto; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--linea); background: var(--sup); color: var(--texto);
}
.btn-icono:hover { border-color: var(--borde-input); }
.btn-icono .onda-sonido { display: block; }
.btn-icono .tache-sonido { display: none; }
.btn-icono[aria-pressed="true"] { color: var(--tenue); }
.btn-icono[aria-pressed="true"] .onda-sonido { display: none; }
.btn-icono[aria-pressed="true"] .tache-sonido { display: block; }

/* Tablero */
.tablero { display: flex; flex-direction: column; gap: 14px; }

.evento { display: flex; flex-direction: column; gap: 10px; }
.evento h1 { font-size: 27px; font-weight: 700; letter-spacing: 0.4px; }
.premio { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--suave); }
.premio svg { flex: none; color: var(--amarillo); }
.premio b { color: var(--amarillo); font-weight: 700; }
.datos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); margin: 0; border: 1px solid var(--linea); border-radius: 14px; background: var(--sup); }
.datos > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px 10px; min-width: 0; }
.datos > div + div { border-left: 1px solid var(--linea); }
.datos dt { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tenue); }
.datos dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.datos dd small { font-family: var(--cuerpo); font-size: 13px; font-weight: 600; color: var(--tenue); margin: 0 5px 0 2px; }
#total { color: var(--verde); display: inline-block; transform-origin: left center; }

/* Escena de la ruleta */
.escena { position: relative; width: 100%; max-width: 100%; aspect-ratio: 5 / 6; margin: 0 auto; overflow: hidden; border-radius: 16px; border: 1px solid var(--linea); background: var(--fondo); }
.escena canvas.lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.letrero {
  position: absolute; z-index: 3; top: 4px; left: 50%; transform: translateX(-50%);
  width: min(76%, 320px); padding: 1px;
  background: var(--hl-borde); clip-path: var(--chaflan);
}
.letrero-dentro {
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: 5px 14px 6px;
  background: var(--velo); clip-path: var(--chaflan);
}
.letrero-rotulo { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tenue); line-height: 1.3; }
.letrero-nombre {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--texto);
}
.letrero.gana { background: var(--amarillo); }
.letrero.gana .letrero-rotulo { color: var(--naranja-texto); }
.letrero.gana .letrero-nombre { color: var(--amarillo); }
.letrero.tu .letrero-nombre { color: var(--verde); }

.aviso-entrada {
  position: absolute; z-index: 3; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--hl-borde); background: var(--velo);
  font-size: 13px; font-weight: 600; color: var(--suave); white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.aviso-entrada b { color: var(--verde); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.aviso-entrada i { font-style: normal; color: var(--verde); font-weight: 800; }

/* Respaldo sin WebGL: la misma cara de la ruleta en 2D */
.respaldo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 66px 12px 16px; }
.respaldo-rueda { position: relative; height: 100%; max-width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; box-shadow: 0 0 0 5px var(--sup2), 0 0 0 7px var(--hl-borde), 0 0 46px var(--hl-borde); }
.respaldo-rueda canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.respaldo-puntero {
  position: absolute; z-index: 2; left: 50%; top: -16px; width: 30px; height: 40px;
  transform: translateX(-50%); transform-origin: 50% 8px;
  background: var(--naranja); clip-path: polygon(0 0, 100% 0, 100% 35%, 50% 100%, 0 35%);
}
.respaldo-rueda.gana { box-shadow: 0 0 0 5px var(--sup2), 0 0 0 7px var(--amarillo), 0 0 60px var(--naranja); }
.sin-animacion { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--naranja); background: var(--sup); font-size: 14px; color: var(--naranja-texto); }

/* Revelación del ganador */
.revelacion { position: absolute; z-index: 5; left: 0; right: 0; bottom: 5%; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.rev-borde { width: min(100%, 400px); padding: 2px; background: linear-gradient(120deg, var(--amarillo), var(--naranja)); clip-path: var(--chaflan); pointer-events: auto; filter: drop-shadow(0 10px 30px var(--sombra)); }
.rev-caja { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px 14px; background: var(--sup); clip-path: var(--chaflan); text-align: center; }
.rev-nombre {
  max-width: 100%; overflow-wrap: anywhere;
  font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1.08; color: var(--amarillo);
  text-shadow: 0 0 22px var(--naranja);
}
.rev-nombre.largo { font-size: 30px; }
.rev-nombre.muy-largo { font-size: 24px; }
.rev-nombre span { display: inline-block; white-space: pre; }
.rev-premio { font-size: 14px; color: var(--suave); }
.rev-premio b { color: var(--texto); }
.btn-sec {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; margin-top: 4px;
  border-radius: 12px; border: 1px solid var(--borde-input); background: transparent; color: var(--texto); font-weight: 700; font-size: 15px;
}
.btn-sec:hover { border-color: var(--suave); }

/* Acciones */
.acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 12px; border: 0;
  background: var(--verde); color: var(--sobre-verde);
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.3px; text-align: center;
  clip-path: var(--chaflan);
  transition: filter 0.15s, transform 0.12s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn.naranja { background: var(--naranja); color: var(--sobre-naranja); }
.btn:disabled { background: var(--sup2); color: var(--tenue); filter: none; transform: none; }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--texto); }
.btn.listo:disabled { background: var(--hl); color: var(--verde); }

/* Panel */
.panel { display: flex; flex-direction: column; gap: 12px; }
.tarjeta { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--sup); border: 1px solid var(--linea); }
.tarjeta h2 { font-size: 16px; font-weight: 700; letter-spacing: 0.3px; }
.tarjeta p { font-size: 15px; color: var(--suave); max-width: 62ch; }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--linea); }
.lista li:first-child { border-top: 0; padding-top: 2px; }
.lista li:last-child { padding-bottom: 0; }
.lista .jugador { font-family: var(--display); font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .hace { font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista .via { grid-column: 1 / -1; font-size: 12px; color: var(--tenue); }
.lista li.tu .jugador { color: var(--verde); }
@media (min-width: 560px) and (max-width: 919px) {
  .pagina { max-width: 560px; }
}
@media (min-width: 920px) {
  .pagina { gap: 22px; }
  /* La ruleta a la izquierda, a toda la altura; a la derecha, en orden: el evento, el encargado (si es su liga), los
     botones y el panel (la última fila se queda con el espacio que sobre). */
  .tablero {
    display: grid; align-items: start; gap: 0 44px;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 400px);
    grid-template-rows: auto auto auto 1fr;
  }
  .tablero > * { grid-column: 2; }
  .evento { grid-row: 1; }
  .evento h1 { font-size: 38px; }
  .encargado { grid-row: 2; margin-top: 18px; }
  .acciones { grid-row: 3; margin-top: 18px; }
  .panel { grid-row: 4; margin-top: 18px; }
  .tablero > .escena { grid-column: 1; grid-row: 1 / -1; aspect-ratio: 1 / 1; width: min(100%, 82vh); max-height: 760px; position: sticky; top: 16px; }
  .enc-confirmar .acciones { margin-top: 0; }
  .letrero { top: 10px; width: min(60%, 360px); }
  .letrero-nombre { font-size: 24px; }
  .rev-nombre { font-size: 46px; }
  .rev-nombre.largo { font-size: 36px; }
  .rev-nombre.muy-largo { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ---------- Lo que no venía en la demo ---------- */
[hidden] { display: none !important; }
a { color: var(--verde); }

/* Mientras llega el sorteo, y cuando no hay nada que enseñar */
.aviso-grande { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18vh 12px 12vh; text-align: center; }
.aviso-grande h1 { font-size: 27px; font-weight: 700; }
.aviso-grande p { font-size: 16px; color: var(--suave); max-width: 46ch; }
.aviso-grande p:empty { display: none; }
a.btn, a.btn-sec { text-decoration: none; }

/* Estado del sorteo */
.estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--suave); padding-top: 12px; }
.chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px; flex: none;
  background: var(--hl); color: var(--verde); border: 1px solid var(--hl-borde); border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.chip.naranja { background: var(--sobre-naranja); color: var(--naranja-texto); border-color: var(--naranja); }
.chip.oro { background: var(--sobre-naranja); color: var(--amarillo); border-color: var(--amarillo); }
.chip.gris { background: var(--sup2); color: var(--suave); border-color: var(--linea); }
.fechas { font-size: 13px; color: var(--tenue); }
.fechas:empty { display: none; }
.datos dd.texto { font-size: 18px; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; padding-top: 3px; }

/* Acciones con un solo botón */
.acciones.una { grid-template-columns: minmax(0, 1fr); }

/* Tarjetas del panel */
.tarjeta.destacada { border-color: var(--hl-borde); background: var(--hl); }
.tarjeta.destacada h2 { color: var(--verde); }
.tarjeta.oro { border-color: var(--amarillo); background: var(--sup); }
.tarjeta.oro h2 { color: var(--naranja-texto); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; }
.ganador-nombre { font-family: var(--display); font-weight: 700; font-size: 26px !important; line-height: 1.12; color: var(--amarillo) !important; overflow-wrap: anywhere; }
.lista .oportunidades { font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista li.tu .oportunidades { color: var(--verde); }
.lista li.gano .jugador { color: var(--amarillo); }
.lista-mas { font-size: 14px !important; color: var(--tenue) !important; }
.tarjeta .btn-sec { align-self: flex-start; margin-top: 0; }
.pasos { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--suave); }
details.tarjeta summary { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.3px; cursor: pointer; }
details.tarjeta summary::marker { color: var(--tenue); }
.dato-largo { font-size: 12px !important; color: var(--tenue) !important; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dato-largo b { color: var(--suave); }

/* Encargado: su PIN y el botón de girar */
.encargado { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: var(--sup); border: 1px solid var(--naranja); }
.encargado h2 { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--naranja-texto); font-family: var(--cuerpo); }
.encargado p { font-size: 15px; color: var(--suave); }
#enc-pin, #enc-panel { display: flex; flex-direction: column; gap: 12px; }
#enc-pin { align-items: center; }
.pin-puntos { display: flex; gap: 12px; padding: 4px 0; }
.pin-puntos i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--borde-input); background: transparent; }
.pin-puntos i.puesto { background: var(--verde); border-color: var(--verde); }
.teclado { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; justify-content: center; }
.teclado button {
  height: 60px; border-radius: 14px; border: 1px solid var(--borde-input); background: var(--sup2); color: var(--texto);
  font-family: var(--display); font-weight: 700; font-size: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.teclado button:active { background: var(--hl); border-color: var(--verde); }
.teclado button:disabled { color: var(--tenue); }
.encargado .btn { width: 100%; min-height: 60px; font-size: 19px; }
.enc-confirmar { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--borde-input); background: var(--sup2); }
.enc-confirmar .acciones { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: stretch; }
.enc-confirmar .btn-sec { margin-top: 0; min-height: 54px; }
.enc-confirmar .btn { min-height: 54px; font-size: 17px; }
.enc-mensaje { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--naranja); background: var(--sobre-naranja); color: var(--naranja-texto) !important; font-weight: 600; }
.enc-mensaje.bien { border-color: var(--hl-borde); background: var(--hl); color: var(--verde) !important; }
.enlace { align-self: center; padding: 8px 10px; border: 0; background: none; color: var(--tenue); font-size: 13px; text-decoration: underline; }
.giro-espera { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: girito 0.8s linear infinite; }
@keyframes girito { to { transform: rotate(360deg); } }

.pie { padding-top: 6px; text-align: center; font-size: 13px; color: var(--tenue); }
.pie a { color: var(--suave); }

@media (min-width: 920px) {
  .estado { padding-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .giro-espera { animation-duration: 2.4s; }
}