/* ==========================================================================
   DanZar - Módulo de Gala Fin de Año: Temática Aladdín (Live Action)
   Estilos aislados para componentes del evento (Taquilla, Boletos, Progreso)
   ========================================================================== */

:root {
  --aladdin-purple-deep: #150826;
  --aladdin-purple-rich: #2c0f4f;
  --aladdin-purple-card: #3a1668;
  --aladdin-gold-primary: #f59e0b;
  --aladdin-gold-light: #fde68a;
  --aladdin-gold-rich: #d97706;
  --aladdin-teal-magic: #0d9488;
  --aladdin-teal-light: #5eead4;
  --aladdin-teal-glow: rgba(13, 148, 136, 0.4);
  --aladdin-sand-gold: #fbbf24;
}

/* Contenedor temático de noche mágica */
.aladdin-card-theme {
  background: radial-gradient(circle at 85% 15%, rgba(245, 158, 11, 0.18) 0%, transparent 40%),
              radial-gradient(circle at 10% 90%, rgba(13, 148, 136, 0.25) 0%, transparent 45%),
              linear-gradient(135deg, #18092c 0%, #290e4a 50%, #150727 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 15px 35px -5px rgba(21, 8, 38, 0.5), 0 0 25px rgba(245, 158, 11, 0.12);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.aladdin-card-theme::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 60%);
  transform: rotate(25deg);
  pointer-events: none;
}

/* Resplandor dorado místico */
.aladdin-gold-glow {
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.35);
}

.aladdin-teal-glow {
  box-shadow: 0 0 20px rgba(13, 148, 136, 0.4);
}

/* Botón místico Aladdín */
.aladdin-btn-primary {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #1a082e;
  font-weight: 800;
  border: 1px solid rgba(254, 240, 138, 0.6);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.aladdin-btn-primary:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.55);
}

.aladdin-btn-teal {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #ffffff;
  font-weight: 800;
  border: 1px solid rgba(94, 234, 212, 0.5);
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.35);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.aladdin-btn-teal:hover {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 184, 166, 0.55);
}

/* Barra de progreso mágica líquida */
.aladdin-progress-track {
  background: rgba(21, 8, 38, 0.7);
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.aladdin-progress-fill {
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 40%, #5eead4 80%, #fbbf24 100%);
  background-size: 200% 100%;
  animation: aladdinShimmer 3s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.65);
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes aladdinShimmer {
  0% { background-position: 100% 0; }
  50% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

/* Diseño de Boleto Digital Aladdín (Coleccionable con efecto troquelado) */
.aladdin-ticket-container {
  background: linear-gradient(135deg, #1e0936 0%, #301053 60%, #160728 100%);
  border: 2px solid rgba(245, 158, 11, 0.55);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(245, 158, 11, 0.2);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* Separador perforado del boleto */
.aladdin-ticket-stub-divider {
  position: relative;
  border-top: 2px dashed rgba(245, 158, 11, 0.45);
  margin: 20px 0;
}

.aladdin-ticket-stub-divider::before,
.aladdin-ticket-stub-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  background-color: #0f051d; /* Color de fondo exterior para cortar */
  border-radius: 50%;
  transform: translateY(-50%);
  border: 2px solid rgba(245, 158, 11, 0.55);
  z-index: 5;
}

.aladdin-ticket-stub-divider::before {
  left: -26px;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

.aladdin-ticket-stub-divider::after {
  right: -26px;
  border-right-color: transparent;
  border-top-color: transparent;
}

/* Arabesco decorativo sutil en bordes */
.aladdin-badge-gold {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.aladdin-badge-teal {
  background: rgba(13, 148, 136, 0.2);
  border: 1px solid rgba(94, 234, 212, 0.4);
  color: #5eead4;
}

/* Forzar alto contraste en selectores y popups de SweetAlert */
.swal2-select {
  background-color: #1e1b4b !important;
  color: #ffffff !important;
  border: 1.5px solid #fbbf24 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-weight: 700 !important;
}
.swal2-select option {
  background-color: #100b2b !important;
  color: #ffffff !important;
  padding: 10px !important;
}