/* ============================================================
   RIFA EN VIVO — Con la Frente en Alto · VCT Americas
   Capa sobre vct-kit.css (tokens, tipografías y marca).

   Pensada para proyector 16:9: sin scroll, tipografía enorme y
   contraste alto. Todo lo que se anima usa transform y opacity
   para no repintar el layout a media rifa.
   ============================================================ */

/* ---------- 1. Tokens propios ---------- */
:root {
  --rifa-fondo: var(--vct-maroon, #2B181E);
  --rifa-verde: var(--vct-green, #9CCC6B);
  --rifa-ember: var(--vct-ember, #E4552B);

  --rifa-fila: clamp(48px, 8.5vh, 104px);
  --rifa-filas-visibles: 5;
}

*, *::before, *::after { box-sizing: border-box; }

.rifa-body {
  margin: 0;
  background: var(--rifa-fondo);
  color: var(--rifa-verde);
  font-family: var(--vct-font-body, Arial, sans-serif);
  overflow: hidden;
  overscroll-behavior: none;
  /* En una pantalla de escenario no hay nada que seleccionar, y un
     doble clic accidental dejaba media interfaz resaltada en azul. */
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- 2. Escenario ---------- */
.rifa-stage {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--rifa-fondo);
  background-image: url('vct/img/bg_vertical.jpg');
  background-image: image-set(
    url('vct/img/bg_vertical.webp') type('image/webp'),
    url('vct/img/bg_vertical.jpg') type('image/jpeg')
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-aspect-ratio: 1/1) {
  .rifa-stage {
    background-image: url('vct/img/bg_horizontal.jpg');
    background-image: image-set(
      url('vct/img/bg_horizontal.webp') type('image/webp'),
      url('vct/img/bg_horizontal.jpg') type('image/jpeg')
    );
  }
}

/* Telón oscuro que entra durante el sorteo.
   El fondo de marca son líneas de fuga naranjas de altísimo contraste:
   compite de frente con los nombres y en proyector los vuelve ilegibles.
   Mientras rueda el carrete se apaga, y al terminar vuelve. La energía
   la ponen el desenfoque, la sacudida y el confeti, no el fondo. */
.rifa-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;              /* sobre el fondo, bajo el contenido (z-index 3) */
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              rgba(18, 9, 13, .60) 0%,
              rgba(18, 9, 13, .88) 55%,
              rgba(18, 9, 13, .97) 100%);
  opacity: 0;
  transition: opacity .5s ease;
}
.rifa-stage.is-girando::before,
.rifa-stage.is-revelando::before { opacity: 1; }

/* Viñeta: hunde las esquinas para que el centro pese más. */
.rifa-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              transparent 32%,
              rgba(43, 24, 30, .55) 72%,
              rgba(43, 24, 30, .92) 100%);
}

/* Barras laterales de la marca */
.rifa-safe::before, .rifa-safe::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(18px, 2.2vw, 36px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  opacity: .9;
}
.rifa-safe::before { left: clamp(6px, 1.2vw, 24px); background-image: url('vct/img/barra_izquierda.png'); }
.rifa-safe::after  { right: clamp(6px, 1.2vw, 24px); background-image: url('vct/img/barra_derecha.png'); }

.rifa-safe {
  position: relative;
  z-index: 3;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1.4vh, 22px);
  padding: clamp(14px, 2.4vh, 34px) clamp(46px, 6vw, 110px);
}

/* Sacudida del golpe. Se aplica al escenario completo: sacudir solo el
   nombre se siente barato en pantalla grande. */
.rifa-stage.is-golpe { animation: rifa-golpe .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes rifa-golpe {
  10%, 90% { transform: translate3d(-3px, 1px, 0); }
  20%, 80% { transform: translate3d(6px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-11px, 3px, 0); }
  40%, 60% { transform: translate3d(11px, -3px, 0); }
}

/* ---------- 3. Capas de efecto ---------- */
.rifa-fx {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.rifa-flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.rifa-flash.is-on { animation: rifa-flash .34s ease-out; }
@keyframes rifa-flash {
  0%   { opacity: .92; }
  100% { opacity: 0; }
}

/* ---------- 4. Encabezado ---------- */
.rifa-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rifa-logo {
  width: min(58%, 440px);
  height: auto;
  display: block;
  transition: opacity .4s ease, transform .4s ease;
}
/* Durante el sorteo el logo cede el espacio a los nombres. */
.rifa-stage.is-girando .rifa-logo,
.rifa-stage.is-revelando .rifa-logo { opacity: .55; transform: scale(.92); }

/* ---------- 5. Zona central ---------- */
.rifa-main {
  position: relative;
  display: grid;
  /* minmax(0, 1fr) y no el 'auto' implícito: una columna auto se dimensiona
     al contenido, así que un nombre muy largo ensancharía la sección y
     ajustarNombre() lo mediría contra ese ancho inflado — concluiría que
     cabe y lo dejaría desbordar la pantalla. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 0;
}
.rifa-main > section { grid-area: 1 / 1; width: 100%; min-width: 0; }
.rifa-main > section[hidden] { display: none; }

/* Reposo */
.rifa-idle { text-align: center; animation: rifa-entra .5s ease-out both; }
.rifa-idle__kicker {
  margin: 0 0 .2em;
  font-family: var(--vct-font-body, sans-serif);
  text-transform: uppercase;
  letter-spacing: .38em;
  font-size: clamp(11px, 1.3vw, 20px);
  color: rgba(156, 204, 107, .75);
}
.rifa-idle__title {
  margin: 0;
  font-family: var(--vct-font-display, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(56px, 15vw, 220px);
  line-height: .92;
  color: var(--rifa-verde);
  text-shadow: 0 0 clamp(20px, 4vw, 70px) rgba(156, 204, 107, .3);
}

@keyframes rifa-entra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 6. Carrete ---------- */
.rifa-reel {
  position: relative;
  height: calc(var(--rifa-fila) * var(--rifa-filas-visibles));
  overflow: hidden;
  /* La máscara también difumina este fondo, así que el panel se funde
     con la escena en vez de recortarse como una caja. */
  background: rgba(14, 7, 11, .78);
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%, #000 26%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom,
      transparent 0%, #000 26%, #000 74%, transparent 100%);
}

.rifa-reel__track {
  position: absolute;
  top: calc(var(--rifa-fila) * 2);   /* centra la fila 0 en el slot */
  left: 0;
  width: 100%;
  will-change: transform, filter;
  backface-visibility: hidden;
}

.rifa-reel__fila {
  height: var(--rifa-fila);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 4%;
  font-family: var(--vct-font-display, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(22px, 4.4vh, 60px);
  line-height: 1;
  color: rgba(255, 255, 255, .46);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .08s linear;
}

/* El renglón que está pasando por el centro. Lo marca el JS cuadro a
   cuadro: sin esto, el ojo no tiene dónde agarrarse mientras gira y el
   frenado pierde toda la tensión. */
.rifa-reel__fila.is-centro {
  color: #fff;
  text-shadow: 0 0 clamp(14px, 2vw, 34px) rgba(156, 204, 107, .75),
               0 2px 14px rgba(0, 0, 0, .9);
}

/* Marco fijo del centro: el ojo se ancla ahí y sabe dónde va a caer. */
.rifa-reel__slot {
  position: absolute;
  top: calc(var(--rifa-fila) * 2);
  left: 0;
  right: 0;
  height: var(--rifa-fila);
  pointer-events: none;
  border-top: 2px solid rgba(156, 204, 107, .85);
  border-bottom: 2px solid rgba(156, 204, 107, .85);
  background: linear-gradient(to right,
      transparent, rgba(156, 204, 107, .12) 50%, transparent);
  box-shadow: 0 0 clamp(20px, 3vw, 60px) rgba(156, 204, 107, .28);
}
.rifa-reel__slot::before, .rifa-reel__slot::after {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(12px, 1.4vw, 26px);
  height: clamp(12px, 1.4vw, 26px);
  transform: translateY(-50%) rotate(45deg);
  background: var(--rifa-verde);
}
.rifa-reel__slot::before { left: clamp(-6px, -.6vw, -3px); }
.rifa-reel__slot::after  { right: clamp(-6px, -.6vw, -3px); }

/* ---------- 7. Revelación ---------- */
.rifa-reveal { text-align: center; }

.rifa-reveal__tag {
  margin: 0 0 clamp(6px, 1.4vh, 20px);
  font-family: var(--vct-font-display, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: clamp(15px, 2.4vw, 40px);
  color: var(--rifa-ember);
  animation: rifa-tag .45s cubic-bezier(.2, 1.4, .4, 1) both;
}

.rifa-reveal__name {
  margin: 0;
  font-family: var(--vct-font-display, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
  font-size: clamp(34px, 9vw, 150px);
  color: var(--vct-white, #fff);
  /* inline-block y nowrap son requisito de ajustarNombre(): en un <p>
     de bloque, offsetWidth es SIEMPRE el ancho del padre sin importar el
     texto, así que la comparación daría verdadero siempre y el nombre se
     encogería hasta desaparecer. Como inline-block, la caja mide lo que
     mide el texto y la reducción solo entra cuando de verdad no cabe. */
  display: inline-block;
  white-space: nowrap;
  animation: rifa-nombre .55s cubic-bezier(.16, 1.1, .3, 1) both;
}

/* El ganador se distingue por color, no por tamaño: si fuera más grande,
   los eliminados se leerían como un premio menor. */
.rifa-reveal.is-ganador .rifa-reveal__tag { color: var(--rifa-verde); letter-spacing: .42em; }
.rifa-reveal.is-ganador .rifa-reveal__name {
  color: var(--rifa-verde);
  text-shadow: 0 0 clamp(24px, 5vw, 90px) rgba(156, 204, 107, .55);
  animation: rifa-nombre .55s cubic-bezier(.16, 1.1, .3, 1) both,
             rifa-latido 2.6s ease-in-out .6s infinite;
}

@keyframes rifa-tag {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rifa-nombre {
  from { opacity: 0; transform: scale(1.28); filter: blur(14px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes rifa-latido {
  0%, 100% { text-shadow: 0 0 clamp(24px, 5vw, 90px) rgba(156, 204, 107, .55); }
  50%      { text-shadow: 0 0 clamp(34px, 7vw, 130px) rgba(156, 204, 107, .85); }
}

/* ---------- 8. Pie ---------- */
.rifa-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vh, 20px);
}

.rifa-btn {
  font-family: var(--vct-font-display, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: clamp(18px, 2.3vw, 38px);
  color: var(--rifa-fondo);
  background: var(--rifa-verde);
  border: 3px solid var(--rifa-verde);
  border-radius: 0;
  padding: clamp(.35em, 1.2vh, .6em) clamp(1.4em, 4vw, 3.4em);
  cursor: pointer;
  transition: background-color .14s linear, color .14s linear, transform .14s ease;
}
.rifa-btn:hover:not(:disabled) { background: #B6DE8C; border-color: #B6DE8C; transform: translateY(-2px); }
.rifa-btn:active:not(:disabled) { transform: translateY(0); }
.rifa-btn:focus-visible { outline: 4px solid var(--vct-white, #fff); outline-offset: 3px; }
.rifa-btn:disabled { opacity: .3; cursor: not-allowed; }
.rifa-btn--sm { font-size: clamp(14px, 1.5vw, 22px); width: 100%; }
.rifa-btn--fantasma { background: transparent; color: var(--rifa-verde); }
.rifa-btn--fantasma:hover:not(:disabled) { background: rgba(156, 204, 107, .16); color: var(--rifa-verde); }

/* Terminada la rifa el botón sirve para volver a sortear. En verde sólido
   competía con el nombre del ganador; en contorno se queda quieto hasta
   que alguien lo busca. */
.rifa-btn.is-final {
  background: transparent;
  color: rgba(156, 204, 107, .8);
  border-color: rgba(156, 204, 107, .45);
}
.rifa-btn.is-final:hover:not(:disabled) {
  background: rgba(156, 204, 107, .14);
  color: var(--rifa-verde);
  border-color: var(--rifa-verde);
}

/* Pulso de invitación: sin él, nadie sabe que hay que apretar algo. */
.rifa-btn.is-listo { animation: rifa-pulso 2.4s ease-in-out infinite; }
@keyframes rifa-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(156, 204, 107, .55); }
  50%      { box-shadow: 0 0 0 clamp(10px, 1.6vw, 26px) rgba(156, 204, 107, 0); }
}

/* Podio: los resultados que ya salieron, en chiquito */
.rifa-podio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, .8vw, 14px);
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: clamp(20px, 3vh, 34px);
}
.rifa-podio__item {
  display: flex;
  align-items: baseline;
  gap: .5em;
  border: 2px solid rgba(228, 85, 43, .6);
  padding: .22em .8em;
  font-family: var(--vct-font-display, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(10px, 1.05vw, 17px);
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .82);
  animation: rifa-entra .4s ease-out both;
  max-width: 30vw;
}
.rifa-podio__item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rifa-podio__item small { color: var(--rifa-ember); font-size: .82em; flex: none; }
.rifa-podio__item.is-ganador { border-color: var(--rifa-verde); color: var(--rifa-verde); }
.rifa-podio__item.is-ganador small { color: var(--rifa-verde); }

.rifa-powered {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  font-family: var(--vct-font-display, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: clamp(10px, 1.05vw, 17px);
  color: rgba(156, 204, 107, .8);
}
.rifa-powered img { height: clamp(12px, 1.3vw, 22px); width: auto; }

/* ---------- 9. Controles del operador ---------- */
.rifa-tools {
  position: absolute;
  z-index: 6;
  top: clamp(8px, 1.4vh, 18px);
  right: clamp(30px, 4vw, 68px);
  display: flex;
  gap: 6px;
  opacity: .22;
  transition: opacity .25s ease;
}
.rifa-tools:hover, .rifa-tools:focus-within { opacity: 1; }

.rifa-tool {
  width: clamp(28px, 2.4vw, 38px);
  height: clamp(28px, 2.4vw, 38px);
  display: grid;
  place-items: center;
  font-size: clamp(13px, 1.2vw, 18px);
  line-height: 1;
  color: var(--rifa-verde);
  background: rgba(43, 24, 30, .7);
  border: 2px solid rgba(156, 204, 107, .5);
  cursor: pointer;
  transition: background-color .14s linear;
}
.rifa-tool:hover { background: rgba(156, 204, 107, .22); }
.rifa-tool:focus-visible { outline: 3px solid var(--rifa-verde); outline-offset: 2px; }
.rifa-tool.is-mute { color: var(--rifa-ember); border-color: rgba(228, 85, 43, .6); }

.rifa-estado {
  position: absolute;
  z-index: 6;
  bottom: clamp(6px, 1vh, 14px);
  left: clamp(30px, 4vw, 68px);
  right: clamp(30px, 4vw, 68px);
  margin: 0;
  font-size: clamp(10px, .95vw, 14px);
  letter-spacing: .04em;
  color: rgba(156, 204, 107, .5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rifa-estado.is-error { color: var(--rifa-ember); }

/* ---------- 10. Pantallas de acceso, evento y lista ---------- */
.rifa-gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(43, 24, 30, .96);
  backdrop-filter: blur(6px);
}
.rifa-gate[hidden] { display: none; }

.rifa-gate__box {
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 3px solid var(--rifa-verde);
  background: var(--rifa-fondo);
  padding: clamp(22px, 4vw, 40px);
  max-height: 92vh;
  overflow-y: auto;
}
.rifa-gate__box--ancho { width: min(100%, 640px); }

.rifa-gate__logo { width: min(100%, 300px); margin: 0 auto 4px; height: auto; }

.rifa-gate__title {
  margin: 0;
  font-family: var(--vct-font-display, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 32px);
  color: var(--rifa-verde);
  text-align: center;
}

.rifa-gate__label {
  font-family: var(--vct-font-display, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--rifa-verde);
}

.rifa-gate__input, .rifa-gate__area {
  width: 100%;
  background: transparent;
  border: 2px solid var(--rifa-verde);
  border-radius: 0;
  color: var(--rifa-verde);
  font-family: var(--vct-font-body, sans-serif);
  font-size: 16px;   /* menos de 16px hace que iOS haga zoom al enfocar */
  padding: 12px 14px;
}
.rifa-gate__input:focus, .rifa-gate__area:focus {
  outline: none;
  background: rgba(156, 204, 107, .1);
  box-shadow: 0 0 0 3px rgba(156, 204, 107, .3);
}
.rifa-gate__area { height: clamp(180px, 34vh, 320px); resize: vertical; line-height: 1.45; }
select.rifa-gate__input option { background: var(--rifa-fondo); color: var(--rifa-verde); }

.rifa-gate__help, .rifa-gate__hint, .rifa-gate__count {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(156, 204, 107, .75);
}
.rifa-gate__hint { text-align: center; }
.rifa-gate__hint a { color: var(--vct-white, #fff); }
.rifa-gate__count { text-align: right; font-weight: 700; }

.rifa-gate__error { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--rifa-ember); }
.rifa-gate__acciones { display: flex; gap: 10px; }

/* ---------- 11. Pantallas chicas ---------- */
@media (max-width: 700px) {
  :root { --rifa-filas-visibles: 3; }
  .rifa-safe { padding-inline: clamp(30px, 9vw, 54px); }
  .rifa-tools { right: 30px; }
  .rifa-estado { left: 30px; right: 30px; }
  .rifa-podio__item { max-width: 44vw; }
  .rifa-reel__track, .rifa-reel__slot { top: var(--rifa-fila); }
}

/* ---------- 12. Movimiento reducido ---------- */
/* No se apaga la rifa, se apaga el mareo: el carrete sigue girando
   porque es el corazón del show, pero sin sacudida ni destello. */
@media (prefers-reduced-motion: reduce) {
  .rifa-stage.is-golpe { animation: none; }
  .rifa-flash.is-on { animation: none; }
  .rifa-reveal.is-ganador .rifa-reveal__name { animation: rifa-nombre .4s ease-out both; }
  .rifa-btn.is-listo { animation: none; }
}