/* =========================================
   ENTRADA DEL ACTO — máquina de estados
   Colores: /css/actos/[slug]/acto.css (--acto-entrada-*).
   Tipografía: solo .texto-*. Hasta Listo: .vista-acto--entrada-cerrada
   oculta los hermanos siguientes (display:none).
   height 100dvh + min-height 800px INTENCIONAL (disclaimer).
   ========================================= */

/* Hasta Listo, lo que sigue a la entrada no entra en el flujo:
   cabecera y portada se recorren; al alinear la entrada (100dvh)
   no hay más página hacia abajo. Subir sigue siendo posible. */
.vista-acto--entrada-cerrada .entrada-acto ~ * {
  display: none;
}

.entrada-acto {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100dvh;
  min-height: 800px; /* INTENCIONAL: piso para que aviso + Entrar no se encimen en pantallas bajas. */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--espacio-enorme) var(--espacio-largo) var(--espacio-gigante);
  /* gap 0: el aire vertical va en padding-top de aviso y pie
     para poder colapsar el disclaimer sin dejar dos gaps. */
  gap: 0;
  background-color: rgb(var(--acto-portada-fondo));
  overflow: hidden;
  user-select: none;
}

.entrada-acto__opciones {
  /* Flex + centro absolute: en iPad Safari el grid 1/1 con
     place-items creaba dos columnas (onda | textos) y recortaba. */
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  align-self: stretch;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.entrada-acto__bordes {
  width: min(337px, 100%); /* INTENCIONAL: diámetro de las ondas en Figma */
  aspect-ratio: 1 / 1;
  max-height: 100%;
  position: relative;
  pointer-events: none;
  flex-shrink: 1;
}

.entrada-acto__onda-degradado,
.entrada-acto__onda-solido {
  position: absolute;
  display: block;
  overflow: visible;
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.entrada-acto__onda-degradado {
  inset: 0;
  width: 100%;
  height: 100%;
  animation: entrada-acto-onda-izquierda 20s linear infinite;
}

.entrada-acto__onda-solido {
  top: 50%;
  left: 50%;
  width: 94.5%;
  height: 94.5%;
  translate: -50% -50%;
  color: var(--color-principal);
  opacity: 0.7;
  animation: entrada-acto-onda-derecha 30s linear infinite;
}

@keyframes entrada-acto-onda-derecha {
  0% { rotate: -33deg; scale: 1;}
  25% { scale: 1.05;}
  50% { scale: 1;}
  75% { scale: 1.05;}
  100% { rotate: 327deg; scale: 1;}
}

@keyframes entrada-acto-onda-izquierda {
  0% { rotate: 45deg; scale: 1.05;}
  50% { scale: 1;}
  100% { rotate: -315deg; scale: 1.05;}
}

.entrada-acto__centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-medio);
  position: absolute;
  inset: 0;
  z-index: 1;
}

.entrada-acto__indicaciones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.entrada-acto__audifonos,
.entrada-acto__todo-listo {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  visibility: hidden;
}

.entrada-acto__audifonos {
  gap: var(--espacio-corto);
}

.entrada-acto__icono-audifonos {
  width: 34px;
  height: 32px;
  display: block;
}

.entrada-acto__texto-audifonos {
  color: var(--color-texto);
  max-width: 164px;
}

.entrada-acto__titulo-listo {
  color: var(--color-texto);
}

.entrada-acto__switch {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--espacio-corto);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  padding: var(--espacio-corto) var(--espacio-regular);
  border: var(--stroke-delgado) solid var(--color-claro-semitransparente);
  border-radius: var(--radio-estandar);
  position: relative;
}

.entrada-acto__switch,
.entrada-acto__switch * {
  cursor: pointer;
}

.entrada-acto__interruptor {
  /* EXCEPCIÓN: recorte de accesibilidad (sr-only), no es espaciado visual */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.entrada-acto__casilla {
  width: var(--espacio-regular);
  height: var(--espacio-regular);
  border-radius: var(--radio-chico);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-fondo);
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.entrada-acto__casilla--activa {
  background-color: var(--color-texto);
}

.entrada-acto__casilla--activa .entrada-acto__icono-check {
  display: block;
}

.entrada-acto__casilla--activa .entrada-acto__icono-x {
  display: none;
}

.entrada-acto__casilla--inactiva {
  background-color: var(--color-claro-semitransparente);
}

.entrada-acto__casilla--inactiva .entrada-acto__icono-check {
  display: none;
}

.entrada-acto__casilla--inactiva .entrada-acto__icono-x {
  display: block;
}

.entrada-acto__icono-check,
.entrada-acto__icono-x {
  display: block;
}

.entrada-acto__switch-texto {
  color: var(--color-texto);
  transition: color 0.2s ease;
}

.entrada-acto__switch[data-activo="false"] .entrada-acto__switch-texto {
  color: var(--color-claro-semitransparente);
}

.entrada-acto__aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-regular);
  width: 100%;
  padding-top: var(--espacio-largo);
  flex: 0 0 auto;
  overflow: hidden;
  opacity: 1;
  transition: opacity 200ms ease-out, height 300ms ease-in-out, padding-top 300ms ease-in-out;
}

.entrada-acto--aviso-saliendo .entrada-acto__aviso {
  opacity: 0;
}

.entrada-acto--aviso-oculto .entrada-acto__aviso,
.entrada-acto[data-estado="listo"] .entrada-acto__aviso,
.entrada-acto[data-estado="error"] .entrada-acto__aviso {
  display: none;
}

.entrada-acto__badge-disclaimer {
  line-height: 0;
  color: var(--color-claro-semitransparente);
}

.entrada-acto__imagen-disclaimer {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.entrada-acto__texto-disclaimer {
  /* .texto-mini-ligera = 10/16 / 0.08em, weight 400 (ajuste de Josué). */
  color: var(--color-claro-semitransparente);
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

.entrada-acto__pie {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  padding-top: var(--espacio-enorme);
  /* Contenido pristino ~120px (Entrar 64 + gap 16 + Abandonar 40).
     Padding-top del pie = --espacio-enorme (ajuste de Josué). */
  min-height: calc(120px + var(--espacio-largo));
}

.entrada-acto__pie-pristino,
.entrada-acto__pie-cargando,
.entrada-acto__pie-listo,
.entrada-acto__pie-error {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.entrada-acto__pie-pristino {
  gap: var(--espacio-regular);
}

.entrada-acto__abandonar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-corto) var(--espacio-regular);
  border-radius: var(--radio-estandar);
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  color: var(--color-claro-semitransparente);
  text-decoration: none;
  transition: none;
}

.entrada-acto__abandonar:hover,
.entrada-acto__abandonar:focus-visible {
  color: var(--color-claro-semitransparente);
  text-decoration: underline;
}

.entrada-acto__boton-continuar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--espacio-regular) var(--espacio-largo);
  border: none;
  border-radius: var(--espacio-largo);
  background: transparent;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.entrada-acto__boton-continuar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--stroke-grueso);
  background: linear-gradient(
    to left,
    rgb(var(--acto-entrada-gradiente-inicio)),
    rgb(var(--acto-entrada-gradiente-fin))
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.entrada-acto__boton-continuar span {
  color: var(--color-texto);
  font-weight: 400;
}

.entrada-acto__boton-continuar:active {
  transform: scale(0.97);
}

.entrada-acto__pie-cargando {
  gap: var(--espacio-regular);
}

.entrada-acto__loader {
  position: relative;
  width: 100%;
  max-width: 207px;
  height: 17px;
}

.entrada-acto__loader-base,
.entrada-acto__loader-progreso {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.entrada-acto__loader-base {
  color: var(--color-principal);
  opacity: 0.35;
}

.entrada-acto__loader-progreso path {
  /* Empieza vacío: sin esto el path se pinta entero y luego
     la transición a dashoffset = longitud se ve como un rewind. */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 0.3s ease;
}

.entrada-acto__texto-carga {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--espacio-extra-corto);
}

.entrada-acto__mensaje,
.entrada-acto__porcentaje {
  color: var(--color-texto);
}

.entrada-acto__mensaje {
  transition: opacity 0.3s ease;
}

.entrada-acto__separador {
  color: var(--color-claro-semitransparente);
}

.entrada-acto__pie-listo {
  gap: var(--espacio-corto);
}

.entrada-acto__pill {
  color: var(--color-claro-semitransparente);
  padding: 6px var(--espacio-regular) var(--espacio-extra-corto);
}

.entrada-acto__chevron {
  color: var(--color-principal);
  animation: entrada-acto-chevron 1s ease-in-out infinite;
}

.entrada-acto__chevron svg {
  width: 24px;
  height: 9px;
  display: block;
}

@keyframes entrada-acto-chevron {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.entrada-acto__pie-error {
  gap: var(--espacio-medio);
}

.entrada-acto__texto-error {
  color: var(--color-texto);
}

.entrada-acto__boton-reintentar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 1px var(--espacio-corto) 0;
  border: var(--stroke-delgado) solid var(--color-texto);
  border-radius: var(--radio-estandar);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.entrada-acto__boton-reintentar span {
  color: var(--color-claro-semitransparente);
}

.entrada-acto__icono-reintentar {
  color: var(--color-claro-semitransparente);
  display: flex;
  align-items: center;
}

.entrada-acto__icono-reintentar svg {
  width: 10px;
  height: 10px;
  display: block;
}

@keyframes entrada-acto-pie-entrar {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes entrada-acto-preloader-salir {
  from { opacity: 1; }
  to { opacity: 0; }
}

.entrada-acto[data-estado="pristino"] .entrada-acto__audifonos,
.entrada-acto[data-estado="cargando"] .entrada-acto__audifonos,
.entrada-acto[data-estado="error"] .entrada-acto__audifonos,
.entrada-acto[data-estado="listo"] .entrada-acto__todo-listo {
  visibility: visible;
}

.entrada-acto[data-estado="pristino"] .entrada-acto__pie-pristino {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.entrada-acto[data-estado="cargando"] .entrada-acto__pie-cargando,
.entrada-acto[data-estado="listo"] .entrada-acto__pie-listo,
.entrada-acto[data-estado="error"] .entrada-acto__pie-error {
  visibility: visible;
  pointer-events: auto;
  animation: entrada-acto-pie-entrar 350ms ease-out forwards;
}

.entrada-acto--preloader-saliendo .entrada-acto__pie-cargando {
  animation: entrada-acto-preloader-salir 200ms ease-out forwards;
}

/* EXCEPCIÓN (no es breakpoint de layout): a ≤360px más aire lateral
   para que el switch no se traslape con las líneas del lienzo. */
@media (max-width: 360px) {
  .entrada-acto {
    padding-left: var(--espacio-regular);
    padding-right: var(--espacio-regular);
  }

  .entrada-acto__centro {
    gap: var(--espacio-regular);
  }

  .entrada-acto__switch {
    padding-left: var(--espacio-corto);
    padding-right: var(--espacio-corto);
  }
}