/**
 * Tema personalizado para el Promoter ID: 4
 * 
 * Este archivo sobrescribe los colores por defecto (amarillos) con los colores
 * específicos del promoter.
 * 
 * Estrategia:
 * - Definir CSS variables personalizadas
 * - Sobrescribir clases específicas si es necesario
 * 
 * EJEMPLO: Paleta naranja
 */

:root {
  /* Colores primarios personalizados */
  --promoter-primary: #eb6d07;
  /* Naranja principal */
  --promoter-primary-hover: #d16106;
  /* Naranja más oscuro al hover */
  --promoter-primary-light: #ff8120;
  /* Naranja claro */

  /* Colores secundarios */
  --promoter-secondary: #ff9142;
  /* Naranja suave */
  --promoter-accent: #FFB300;
  /* Dorado (para CTAs importantes) */

  /* Colores de texto sobre fondos de marca */
  --promoter-text-on-primary: #FFFFFF;

  /* Gradientes */
  --promoter-gradient: linear-gradient(135deg, #eb6d07 0%, #ff9142 100%);

  /* Color de highlight en hero/experiencia */
  --experience-highlight-color: #ff9142;
  /* Glow color derivado del primario (usar color principal del promoter) */
  --promoter-glow: rgba(228, 149, 85, 0.338);
}

/* ====================================
   BOTONES
   ==================================== */

/* Botón "Ver evento" en tarjetas de shows */
.show-cta {
  background: linear-gradient(135deg, #eb6d07 0%, #ff8120 100%) !important;
  color: #FFFFFF !important;
}

.show-cta:hover {
  background: linear-gradient(135deg, #ff8120 0%, #eb6d07 100%) !important;
  box-shadow: 0 12px 25px -12px rgba(235, 109, 7, 0.6) !important;
}

/* Botón "Comprar entradas" en página de show */
.buy-button {
  background: #eb6d07 !important;
  color: white !important;
}

.buy-button:hover {
  background: #d16106 !important;
  box-shadow: 0 6px 16px rgba(235, 109, 7, 0.4) !important;
}

/* Botón "Reservar" en página de show */
.reserve-button {
  background: #eb6d07 !important;
  color: white !important;
  border-color: #eb6d07 !important;
}

.reserve-button:hover:not(:disabled) {
  background: #d16106 !important;
  box-shadow: 0 4px 14px rgba(235, 109, 7, 0.35) !important;
}

/* Banner de login (borde superior) */
.login-banner {
  border-top-color: rgba(255, 145, 66, 0.4) !important;
  /* Naranja suave semitransparente */
}

/* Modal content - z-index alto para que esté por encima del login-banner */
.modal-content {
  z-index: 1100 !important;
  /* Login banner tiene z-index: 1000 */
}

/* Botón del modal Fanclub */
.fanclub-cta {
  background: linear-gradient(135deg, #eb6d07 0%, #ff8120 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 25px rgba(235, 109, 7, 0.4) !important;
}

.fanclub-cta:hover {
  box-shadow: 0 12px 35px rgba(235, 109, 7, 0.5) !important;
}

/* Botón "Iniciar sesión" en banners */
.login-banner-button {
  background: linear-gradient(135deg, #eb6d07 0%, #ff8120 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(235, 109, 7, 0.3) !important;
}

.login-banner-button:hover {
  background: linear-gradient(135deg, #ff8120 0%, #eb6d07 100%) !important;
  box-shadow: 0 8px 25px rgba(235, 109, 7, 0.5) !important;
}

/* Botón "Iniciar sesión" del menú lateral (header) */
.primary-action {
  background: linear-gradient(135deg, #eb6d07 0%, #ff8120 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 35px rgba(235, 109, 7, 0.35) !important;
}

.primary-action:hover:not(:disabled) {
  box-shadow: 0 20px 45px rgba(235, 109, 7, 0.45) !important;
}

/* Botones de "Iniciar sesión" y "Crear cuenta" en /login y /signup */
.primary-btn,
button.primary-btn {
  background: linear-gradient(135deg, #eb6d07 0%, #ff8120 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 45px rgba(235, 109, 7, 0.35) !important;
}

.primary-btn:hover:not(:disabled),
button.primary-btn:hover:not(:disabled) {
  box-shadow: 0 24px 55px rgba(235, 109, 7, 0.45) !important;
}

/* Enlaces "Inicia sesión" y "Crear cuenta" en card-subtitle */
.card-subtitle a,
.card-subtitle a:visited {
  color: #ff8120 !important;
}

.card-subtitle a:hover,
.card-subtitle a:focus {
  color: #eb6d07 !important;
}

/* Botones primarios - reemplazar amarillo por naranja */
.btn-primary,
button.primary,
.cta-button {
  background-color: var(--promoter-primary) !important;
  border-color: var(--promoter-primary) !important;
  color: var(--promoter-text-on-primary) !important;
}

.btn-primary:hover,
button.primary:hover,
.cta-button:hover {
  background-color: var(--promoter-primary-hover) !important;
  border-color: var(--promoter-primary-hover) !important;
}

/* Botones secundarios */
.btn-secondary {
  background-color: var(--promoter-secondary) !important;
  border-color: var(--promoter-secondary) !important;
  color: white !important;
}

/* Botones outline */
.btn-outline {
  border-color: var(--promoter-primary) !important;
  color: var(--promoter-primary) !important;
}

.btn-outline:hover {
  background-color: var(--promoter-primary) !important;
  color: white !important;
}

/* Botón "Expandir" en noticias */
.expand-button {
  background: linear-gradient(135deg, #eb6d07 0%, #ff8120 100%) !important;
  color: #FFFFFF !important;
}

.expand-button:hover {
  box-shadow: 0 4px 12px rgba(235, 109, 7, 0.3) !important;
}

/* Tag de noticias */
.news-tag {
  background: rgba(235, 109, 7, 0.15) !important;
  color: #ff8120 !important;
}

/* Botón de tickets "Ver entrada" */
.ticket-button {
  background: linear-gradient(135deg, #eb6d07 0%, #ff8120 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 25px rgba(235, 109, 7, 0.35) !important;
}

.ticket-button:hover {
  box-shadow: 0 12px 30px rgba(235, 109, 7, 0.45) !important;
}

/* ====================================
   ENLACES Y NAVEGACIÓN
   ==================================== */

/* Botón activo del menú inferior (bottom-nav) */
.nav-button-active {
  color: #ff8120 !important;
}

.nav-button-active .nav-icon svg {
  filter: drop-shadow(0 0 8px rgba(235, 109, 7, 0.4)) !important;
}

a.promoter-link,
.nav-link.active {
  color: var(--promoter-primary) !important;
}

a.promoter-link:hover {
  color: var(--promoter-primary-hover) !important;
}

/* ====================================
   DESTACADOS
   ==================================== */

.highlight,
.badge-primary {
  background-color: var(--promoter-primary) !important;
  color: white !important;
}

/* ====================================
   CARDS Y CONTENEDORES
   ==================================== */

/* Tarjetas de shows - sombra con color del promoter (más visible) */
.show-card.show-card {
  /* Glow usando variable del promoter para asegurar color consistente */
  /*box-shadow: 0 0 44px var(--promoter-glow) !important;*/
  transition: box-shadow 0.28s ease, transform 0.28s ease !important;
}

.show-card.show-card:hover {
  /*border-color: rgba(235, 109, 7, 0.70) !important;*/
  /*box-shadow: 0 0 78px rgba(235, 109, 7, 0.48) !important;*/
}

.card-header.promoter-theme {
  background-color: var(--promoter-primary);
  color: white;
}

.card.featured {
  border-color: var(--promoter-primary) !important;
}

/* ====================================
   ELEMENTOS INTERACTIVOS
   ==================================== */

/* Checkboxes y radios personalizados */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--promoter-primary) !important;
  border-color: var(--promoter-primary) !important;
}

/* Progress bars */
.progress-bar {
  background-color: var(--promoter-primary) !important;
}

/* ====================================
   ESTADOS DE LOADING/SPINNER
   ==================================== */

.spinner-border.promoter-theme {
  border-color: var(--promoter-primary);
  border-right-color: transparent;
}

/* ====================================
   OVERRIDE DE CLASES YELLOW
   ==================================== */

/* Si tienes clases específicas con "yellow" en el nombre */
.bg-yellow,
.text-yellow,
.border-yellow {
  background-color: var(--promoter-primary) !important;
  color: var(--promoter-text-on-primary) !important;
  border-color: var(--promoter-primary) !important;
}

/* Botón de checkout (pago) */
.checkout-button,
.btn-checkout,
button.checkout-button {
  background: var(--promoter-primary, #eb6d07) !important;
  color: var(--promoter-text-on-primary, #FFFFFF) !important;
  border-color: var(--promoter-primary, #eb6d07) !important;
  box-shadow: 0 10px 30px rgba(235, 109, 7, 0.28) !important;
  transition: background .12s ease, transform .08s ease !important;
}

.checkout-button:hover,
.btn-checkout:hover,
button.checkout-button:hover {
  background: var(--promoter-primary-hover, #d16106) !important;
  transform: translateY(-1px) !important;
}

.checkout-button:disabled,
button.checkout-button[disabled],
.btn-checkout:disabled {
  opacity: 0.6 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Acción principal de reserva (botón de reservar con estilo del promoter) */
.reserve-action-primary,
.btn-reserve-primary,
button.reserve-action-primary {
  background: var(--promoter-primary, #eb6d07) !important;
  color: var(--promoter-text-on-primary, #FFFFFF) !important;
  border: 1px solid var(--promoter-primary, #eb6d07) !important;
  box-shadow: 0 8px 22px rgba(235, 109, 7, 0.28) !important;
  transition: background .12s ease, transform .08s ease !important;
}

.reserve-action-primary:hover,
.btn-reserve-primary:hover,
button.reserve-action-primary:hover {
  background: var(--promoter-primary-hover, #d16106) !important;
  transform: translateY(-1px) !important;
}

.reserve-action-primary:disabled,
button.reserve-action-primary[disabled],
.btn-reserve-primary:disabled {
  opacity: 0.65 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* ── Loco FanClub ────────────────────────────────── */

.fanclub-membership-cta {
  background: linear-gradient(135deg, #e88c0e 0%, #d97706 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 25px rgba(232, 140, 14, 0.35) !important;
}

.fanclub-membership-cta:hover {
  box-shadow: 0 14px 35px rgba(232, 140, 14, 0.45) !important;
}

.fanclub-star-icon {
  color: #fbbf24 !important;
}