/* Ruleta del sorteo "Juega y Gana" — herramienta de operador, solo para admins.
 *
 * Portada desde ruleta/index.html en la rama main (la página de GitHub Pages), que es la
 * versión que marketing ya aprobó y usó. Se mantiene IGUAL a propósito: los mismos colores,
 * los mismos tamaños de slot, el mismo giro. Si hay que cambiar el look, cambiarlo en las
 * dos o quedan distintas -- y la de GitHub Pages es la referencia.
 *
 * Por qué vive acá y no allá: esa página necesita VPN y computadora Visa, justo lo que no
 * se tiene a mano en la sala el día del evento. Acá se abre desde el teléfono.
 *
 * Todo cuelga de #view-roulette, que es un overlay a pantalla COMPLETA -- esta es la única
 * pantalla de la app que ignora el ancho de teléfono del resto, porque se proyecta.
 */

#view-roulette {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  flex-direction: column;
  align-items: center;
  /* Fuente y colores del original, NO los tokens de la app: tiene que verse igual que la
     ruleta ya aprobada, no como una pantalla más del evento. */
  font-family: Arial, Helvetica, sans-serif;
  background: #F5F5F5;
  color: #333333;
  padding: 28px 16px 48px;
  gap: 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#view-roulette.on { display: flex; }

#view-roulette .rl-vars {
  --blue: #1B34D5;   /* banner royal blue — superficie dominante */
  --navy: #1A1F71;
  --gold: #F7B600;
  --pale: #C8EEFF;
  --dim: rgba(255, 255, 255, .45);
}

#view-roulette h1 { color: #1A1F71; font-size: 22px; text-align: center; margin: 0; }
#view-roulette .rl-sub {
  color: #666; font-size: 13.5px; text-align: center; max-width: 560px; margin: 0;
}

/* Salida: la app no tiene barra de navegación sobre este overlay, así que sin esto no hay
   forma de volver. Arriba a la izquierda, fuera del camino de las tarjetas. */
#view-roulette .rl-close {
  position: absolute; left: 14px; top: 14px;
  background: #fff; color: #1A1F71;
  border: 1px solid #e4e8f4; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; padding: 8px 14px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(26, 31, 113, .08);
  z-index: 2;
}

#view-roulette .rl-card {
  background: #fff;
  border: 1px solid #e4e8f4;
  border-radius: 16px;
  padding: 22px 24px;
  width: 100%;
  max-width: 640px;
  box-shadow: 0 6px 20px rgba(26, 31, 113, .06);
}
#view-roulette .rl-card h2 { font-size: 15px; color: #1A1F71; margin: 0 0 10px; }
#view-roulette .rl-hint { font-size: 12.5px; color: #777; margin: 0 0 12px; line-height: 1.5; }
#view-roulette .rl-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

#view-roulette input[type="file"],
#view-roulette input[type="number"] {
  padding: 10px 12px; border: 1.5px solid #d7def3; border-radius: 10px;
  font-size: 14px; background: #F7F9FE; color: #1c2333; width: auto;
}
#view-roulette input[type="number"] { width: 160px; }
#view-roulette button {
  padding: 10px 18px; border: none; border-radius: 999px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  background: #1B34D5; color: #fff; width: auto;
}
#view-roulette button:disabled { opacity: .45; cursor: default; }
#view-roulette .rl-msg {
  font-size: 12.5px; margin-top: 10px; min-height: 16px; color: #178A3F; font-weight: 700;
}
/* Ámbar, no rojo: el rojo es el color de Mastercard. El original usaba #B02525; se cambia
   acá igual que en el resto del producto. */
#view-roulette .rl-msg.err { color: #8A5A00; }

#view-roulette .rl-finalists { list-style: none; margin: 12px 0 0; padding: 0; }
/* Finalistas y sus cifras, también un paso más grandes: es la lista que el operador lee en
   voz alta antes de girar. */
#view-roulette .rl-finalists li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid #eef1f7; font-size: 16px;
}
#view-roulette .rl-finalists li b { color: #1A1F71; }
#view-roulette .rl-finalists li span { color: #777; font-size: 15px; white-space: nowrap; }
/* El número ganador que se tipea: grande, porque es el dato que define todo el sorteo. */
#view-roulette input[type="number"] { font-size: 20px; font-weight: 700; width: 190px; }

/* ===== El escenario (mock oficial: campo azul #1B34D5, pill superior, flecha dorada,
   VISA abajo-derecha). Cubre todo el viewport por encima de los pasos 1 y 2. ===== */
#view-roulette .rl-stage {
  background: #1B34D5;
  position: fixed;
  inset: 0;
  z-index: 999;
  padding: 34px 28px 26px;
  overflow: hidden;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* brillo pálido sutil, sin romper el azul dominante */
  background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(200, 238, 255, .10), transparent 70%);
  background-color: #1B34D5;
}
#view-roulette .rl-stage.on { display: flex; }

#view-roulette .rl-pill {
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  color: #fff;
  font-size: clamp(18px, 3.4vw, 28px);
  font-weight: 800;
  padding: 8px 26px;
  opacity: 0;
  transition: opacity .5s ease;
  text-align: center;
}
#view-roulette .rl-pill.show { opacity: 1; }

#view-roulette .rl-reel-wrap {
  position: relative;
  width: 100%;
  /* Ancho de sala, no de tarjeta. Los 640px venian del original y cortaban los nombres
     completos con puntos suspensivos -- "Luis Alberto Rengifo..." no sirve para anunciar a
     un ganador. El escenario es pantalla completa, asi que se usa. */
  max-width: min(1600px, 96vw);
  height: 402px; /* 3 filas de 134 */
  margin: 6px 0 2px;
}
#view-roulette .rl-reel-window {
  position: absolute; inset: 0;
  overflow: hidden;
  /* desvanecer arriba/abajo para el efecto tambor */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
#view-roulette .rl-reel { will-change: transform; }
/* Todo al 140% de lo que se veia (pedido Sep 22 2026): se proyecta en una sala y se lee de
   lejos. La altura del slot sube junto con la letra -- SLOT_H() en roulette.js tiene el mismo
   valor, y si se desincronizan el tambor frena desalineado respecto del nombre centrado. */
#view-roulette .rl-reel .rl-slot {
  height: 134px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  color: rgba(255, 255, 255, .45);
  white-space: nowrap;
  /* SIN overflow:hidden. El nombre y la empresa ya recortan por su cuenta, y aca lo unico
     que hacia era cortarle la cola a las letras con descendente (g, q, p, y) en la fila
     centrada, que es la mas alta: nombre 81px + empresa 34px suman justo los 134px del
     slot, asi que la "q" de un banco caia un pixel afuera y se veia partida. */
  padding: 0 60px 0 96px;
  transition: color .15s linear;
}
#view-roulette .rl-slot-name {
  font-size: clamp(36px, 7.3vw, 56px);
  font-weight: 700;
  /* Explicito y con aire: el normal de Arial (~1.15) deja la caja del mismo alto que el
     glifo, asi que cualquier recorte del padre parte las colas. */
  line-height: 1.2;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  transition: font-size .15s linear;
}
/* La empresa, debajo y mas chica: identifica de donde viene la persona sin competirle al
   nombre, que es lo que la sala tiene que leer primero. */
/* La empresa se muestra SOLO en el ganador (la fila centrada). En las demas filas competia
   con el nombre, que es lo unico que la sala necesita leer mientras el tambor gira. */
#view-roulette .rl-slot-co {
  display: none;
  font-weight: 600;
  line-height: 1.35;
  /* El recorte horizontal se necesita para nombres de banco largos; el vertical no, y sin
     este padding la cola de la "g" de "Bogota" queda contra el borde de la caja. */
  padding-bottom: 2px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
#view-roulette .rl-reel .rl-slot.center { color: #fff; }
#view-roulette .rl-reel .rl-slot.center .rl-slot-name {
  font-size: clamp(50px, 10vw, 81px);
  font-weight: 800;
}
#view-roulette .rl-reel .rl-slot.center .rl-slot-co {
  display: block;
  font-size: clamp(22px, 3.8vw, 34px);
  opacity: .85;
}
#view-roulette .rl-pointer {
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 37px solid transparent;
  border-bottom: 37px solid transparent;
  border-left: 53px solid #F7B600;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
  z-index: 2;
}
#view-roulette .rl-actions { display: flex; gap: 10px; margin-top: 6px; }
#view-roulette .rl-btn-ico { height: 20px; width: auto; vertical-align: -4px; margin-right: 8px; }
#view-roulette .rl-stage button {
  background: #fff; color: #1A1F71; font-size: 16px; padding: 12px 26px;
}
/* "Empezar de nuevo": pequeño y discreto, esquina inferior izquierda */
#view-roulette .rl-restart {
  position: absolute; left: 18px; bottom: 16px;
  background: transparent !important;
  color: rgba(255, 255, 255, .55) !important;
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: 11.5px !important;
  font-weight: 600;
  padding: 6px 12px !important;
}
#view-roulette .rl-visa {
  position: absolute; right: 26px; bottom: 18px;
  height: 34px; width: auto;
  user-select: none;
}
#view-roulette .rl-foot { font-size: 11px; color: #999; text-align: center; margin: 0; }

@media (max-width: 480px) {
  #view-roulette .rl-reel-wrap { height: 336px; }
  /* 112px, el mismo valor que SLOT_H() usa por debajo de 480px. Cambiar uno sin el otro
     desalinea donde frena el tambor. */
  #view-roulette .rl-reel .rl-slot { height: 112px; padding: 0 20px 0 54px; }
  #view-roulette .rl-pointer {
    border-top-width: 20px; border-bottom-width: 20px; border-left-width: 31px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #view-roulette .rl-pill { transition: none; }
}

/* Las dos cargas, lado a lado: izquierda Juega y Gana, derecha la encuesta de LinkedIn. */
#view-roulette .rl-two {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px; width: 100%; max-width: 640px;
}
#view-roulette .rl-two .rl-card { max-width: none; min-width: 0; }
/* The native file picker has a wide intrinsic width; without this it spills past the card. */
#view-roulette .rl-card input[type="file"] {
  flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; box-sizing: border-box;
}