/**
 * guided_tour.css
 *
 * Overrides visuales para Driver.js con clases del módulo guided_tour.
 */

:root {
  --gt-primary: #BD0000;
  --gt-primary-hover: #ba6969;
  --gt-text: #212529;
  --gt-text-muted: #212529;
  --gt-bg: #ffffff;
  --gt-border: #e5e7eb;
  --gt-radius: 16px;
  --gt-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  --gt-z: 99999;
}

.driver-active *:not(.driver-overlay):not(.driver-overlay *) {
  pointer-events: auto !important;
}

.driver-popover.guided-tour__popover {
  background: var(--gt-bg) !important;
  border: 1px solid var(--gt-border) !important;
  border-radius: var(--gt-radius) !important;
  box-shadow: var(--gt-shadow) !important;
  color: var(--gt-text) !important;
  max-width: 400px !important;
  min-width: 320px !important;
  padding: 0 !important;
  z-index: var(--gt-z) !important;
}

.driver-popover.guided-tour__popover .driver-popover-title {
  color: var(--gt-text) !important;
  display: block !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 20px 8px !important;
}

.guided-tour__step-indicator {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gt-border) !important;
}

.guided-tour__step-indicator-dot {
  animation: gt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background: var(--gt-primary);
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.guided-tour__step-indicator-text {
  color: var(--gt-text-muted);
  font-size: 12px;
  font-weight: 500;
}

@keyframes gt-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.driver-popover.guided-tour__popover .driver-popover-description {
  color: var(--gt-text) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 20px 16px !important;
}

.guided-tour__text {
  margin: 0 !important;
}

.guided-tour__text h3,
.guided-tour__text strong {
  color: var(--gt-text) !important;
  display: block;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  margin: 0 0 8px !important;
}

.guided-tour__progress-dots {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 20px;
}

.guided-tour__progress-dot {
  background: #e5e7eb;
  border-radius: 9999px;
  height: 6px;
  transition: all 0.2s ease;
  width: 6px;
}

.guided-tour__progress-dot--active {
  background: var(--gt-primary);
  width: 24px;
}

.guided-tour__progress-dot--past {
  background: rgba(30, 58, 95, 0.4);
}

.driver-popover.guided-tour__popover .driver-popover-footer {
  align-items: center !important;
  background: #f9fafb !important;
  border-radius: 0 0 var(--gt-radius) var(--gt-radius) !important;
  border-top: 1px solid var(--gt-border) !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
}

.driver-popover.guided-tour__popover .driver-popover-progress-text {
  display: none !important;
}

.driver-popover.guided-tour__popover .driver-popover-navigation-btns {
  display: flex !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.guided-tour__footer-cancel {
  background: transparent !important;
  border: none !important;
  color: var(--gt-text-muted) !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  transition: color 0.15s ease !important;
}

.guided-tour__footer-cancel:hover {
  color: var(--gt-text) !important;
}

.driver-popover.guided-tour__popover .driver-popover-prev-btn,
.driver-popover.guided-tour__popover .driver-popover-next-btn {
  align-items: center !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 10px 20px !important;
  text-shadow: none !important;
  transition: background 0.15s ease !important;
}

.driver-popover.guided-tour__popover .driver-popover-prev-btn {
  background: var(--gt-primary) !important;
  border: 1.5px solid var(--gt-primary) !important;
  color: #ffffff !important;
  align-items: center !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 10px 20px !important;
  text-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.driver-popover.guided-tour__popover .driver-popover-prev-btn:hover {
  background: var(--gt-primary-hover) !important;
  border-color: var(--gt-primary-hover) !important;
}

.driver-popover.guided-tour__popover .driver-popover-next-btn {
  background: var(--gt-primary) !important;
  color: #ffffff !important;
}

.driver-popover.guided-tour__popover .driver-popover-next-btn:hover {
  background: var(--gt-primary-hover) !important;
}

.driver-popover.guided-tour__popover .driver-popover-close-btn {
  background: transparent !important;
  border: none !important;
  color: var(--gt-text-muted) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  padding: 4px 8px !important;
  right: 8px !important;
  top: 8px !important;
  opacity: 1 !important;
}

.driver-popover.guided-tour__popover .driver-popover-close-btn:hover {
  color: var(--gt-text) !important;
  opacity: 1 !important;
}

.driver-popover.guided-tour__popover .driver-popover-arrow {
  display: none !important;
  border-width: 25px !important;
}

.driver-popover.guided-tour__popover .driver-popover-arrow-side-top::after {
  border-top-color: var(--gt-bg) !important;
}

.driver-popover.guided-tour__popover .driver-popover-arrow-side-bottom::after {
  border-bottom-color: var(--gt-bg) !important;
}

.driver-popover.guided-tour__popover .driver-popover-arrow-side-left::after {
  border-left-color: var(--gt-bg) !important;
}

.driver-popover.guided-tour__popover .driver-popover-arrow-side-right::after {
  border-right-color: var(--gt-bg) !important;
}

/* Sombra sutil para que la flecha destaque sobre fondos oscuros */
.driver-popover.guided-tour__popover .driver-popover-arrow-side-top {
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.12)) !important;
}

.driver-popover.guided-tour__popover .driver-popover-arrow-side-bottom {
  filter: drop-shadow(0 -3px 3px rgba(0, 0, 0, 0.12)) !important;
}



.driver-active-element {
  border-radius: 2px !important;
  outline: 3px solid var(--gt-primary) !important;
  outline-offset: 1px !important;
}

@media (max-width: 480px) {
  .driver-popover.guided-tour__popover {
    max-width: calc(100vw - 24px) !important;
    min-width: auto !important;
  }
}

/* ── Botón de replay (TourTriggerBlock) ──────────────────────────────────── */

/* Estilo: botón primario */
.guided-tour-trigger--button .guided-tour-trigger__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--gt-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.guided-tour-trigger--button .guided-tour-trigger__btn:hover {
  background: var(--gt-primary-hover) !important;
}

/* Estilo: enlace */
.guided-tour-trigger--link .guided-tour-trigger__btn {
  background: none !important;
  border: none !important;
  color: var(--gt-primary) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  font-size: 14px !important;
  padding: 0 !important;
}

/* Estilo: FAB (botón flotante en esquina inferior derecha) */
/* BASE FAB (común para ambos) */
.guided-tour-trigger--fab {
  position: fixed !important;
  bottom: 24px !important;
  z-index: 9990 !important;
}

/* MODIFICADORES DE POSICIÓN */
.guided-tour-trigger--fab-derecha {
  right: 24px !important;
}

.guided-tour-trigger--fab-izquierda {
  left: 24px !important;
}

/* BOTÓN FAB (compartido) */
.guided-tour-trigger--fab .guided-tour-trigger__btn {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: var(--gt-primary) !important;
  color: #fff !important;
  border: none !important;
  font-size: 22px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}

/* HOVER */
.guided-tour-trigger--fab .guided-tour-trigger__btn:hover {
  background: var(--gt-primary-hover) !important;
  transform: scale(1.08) !important;
}

/* LABEL OCULTO EN FAB */
.guided-tour-trigger--fab .guided-tour-trigger__label {
  display: none !important;
}

.guided-tour-trigger__icon {
  font-style: normal !important;
  font-weight: 700 !important;
}

/* Visual helpers */

.guided-tour--transitioning .driver-popover {
  opacity: 0 !important;
  transition: none !important;
  pointer-events: none !important;
}