/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ============================================================
   Declaration Guided Tour
   ============================================================ */

.guide-spotlight-target {
  position: relative;
  z-index: 100;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.52);
  border-radius: 8px;
  outline: 2px solid #6366f1;
  outline-offset: 4px;
  scroll-margin-top: 80px;
  transition: box-shadow 0.3s ease, outline-color 0.3s ease;
}

.guide-widget {
  position: fixed;
  bottom: 24px;
  right: 1rem;
  z-index: 10002; /* por encima del contenedor de FABs (z-[10001]) */
  width: 340px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: guide-widget-in 0.22s ease;
}

@keyframes guide-widget-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.guide-widget-bar {
  height: 3px;
  background: #e5e7eb;
}

.guide-widget-bar-fill {
  height: 3px;
  background: #6366f1;
  transition: width 0.35s ease;
}

.guide-fab {
  /* Posicionamiento delegado al contenedor flex del layout */
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: #6366f1;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.42);
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  animation: guide-fab-in 0.22s ease;
}

@keyframes guide-fab-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

.guide-fab:hover {
  background: #4f46e5;
  transform: scale(1.07);
  box-shadow: 0 6px 22px rgba(99, 102, 241, 0.52);
}

.guide-fab:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 3px;
}

.panel-fab-wrapper {
  padding-top: 6px;
  padding-right: 6px;
}

.panel-fab-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.panel-fab-close:hover {
  color: #374151;
  background: #f3f4f6;
  border-color: #d1d5db;
}

.panel-fab-close:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .panel-fab-close {
    border-color: #374151;
    background: #1f2937;
    color: #9ca3af;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  }

  .panel-fab-close:hover {
    color: #e5e7eb;
    background: #374151;
    border-color: #4b5563;
  }
}

@media (prefers-color-scheme: dark) {
  .guide-widget {
    background: #1e1e2e;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.3);
  }
}

/* Pulso para el elemento disparador mientras la guía espera una acción del usuario */
.guide-trigger-pulse {
  animation: guide-trigger-pulse 1.8s ease-in-out infinite;
}

@keyframes guide-trigger-pulse {
  0%, 100% { outline-color: #6366f1; outline-offset: 4px; }
  50%       { outline-color: #f59e0b; outline-offset: 8px; }
}