/* --- Botón Trigger del Portal --- */

.btn-portal-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 50px;
  background: linear-gradient(135deg, #9fcb2d 0%, #1f6d0a 100%);
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 25px rgb(31,109,10), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  overflow: hidden;
}

.btn-portal-trigger::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.btn-portal-trigger:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(159,203,45,0.45), 0 0 20px rgba(74, 144, 226, 0.4);
  color: #ffffff;
}

.btn-portal-trigger:hover::before {
  left: 100%;
}

.btn-portal-trigger:active {
  transform: translateY(0) scale(0.98);
}

/* --- Modal Estilo Cristal Oscuro --- */

.glass-modal-content {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(74, 144, 226, 0.1);
  overflow: hidden;
}

.glass-modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 20px 30px;
}

.glass-modal-header .modal-title {
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
}

.glass-modal-header .text-accent {
  color: #9cc62d;
}

.glass-modal-body {
  padding: 0;
  height: 80vh;
  background-color: #0f172a;
}

/* --- Iframe y Loader --- */

.portal-iframe {
  width: 100%;
  height: 100%;
  border: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Cuando el iframe carga, el JS le añade esta clase */

.portal-iframe.loaded {
  opacity: 1;
}

/* Loader centrado */

.portal-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.portal-loader p {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Personalización del spinner de Bootstrap */

.spinner-border.text-primary {
  color: #4a90e2 !important;
  width: 3rem;
  height: 3rem;
}