/* HogaresRD overrides for Driver.js + the welcome-modal styling.
   Loaded after public/css/lib/driver.css so these tokens win.
   Matches the cream/ink palette in core.css. */

/* Driver.js popover — adopt our card style */
.driver-popover {
  background: var(--bg-card, #fff) !important;
  color: var(--text, #0f172a) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.driver-popover-title {
  color: var(--text, #0f172a) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.5rem !important;
}
.driver-popover-description {
  color: var(--text-muted, #475569) !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
}
.driver-popover-footer button.driver-popover-next-btn,
.driver-popover-footer button.driver-popover-prev-btn {
  background: var(--brand, #2563eb) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0.45rem 1rem !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-shadow: none !important;
}
.driver-popover-footer button.driver-popover-prev-btn {
  background: transparent !important;
  color: var(--text-muted, #64748b) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
}
.driver-popover-progress-text {
  color: var(--text-muted, #64748b) !important;
  font-size: 0.78rem !important;
}
.driver-popover-close-btn {
  color: var(--text-muted, #64748b) !important;
  opacity: 0.7;
}
.driver-popover-close-btn:hover { opacity: 1; }
.driver-popover-arrow-side-top.driver-popover-arrow,
.driver-popover-arrow-side-bottom.driver-popover-arrow,
.driver-popover-arrow-side-left.driver-popover-arrow,
.driver-popover-arrow-side-right.driver-popover-arrow {
  border-color: var(--bg-card, #fff) !important;
}

/* Highlight ring around the active element */
.driver-active-element {
  outline: 3px solid var(--brand, #2563eb) !important;
  outline-offset: 2px !important;
  border-radius: 8px !important;
}

/* ── HogaresRD welcome modal ─────────────────────────────────────── */
.hrd-tour-welcome {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.hrd-tour-welcome__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.hrd-tour-welcome__card {
  position: relative;
  background: var(--bg-card, #fff);
  color: var(--text, #0f172a);
  border-radius: 16px;
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  padding: 2rem 1.6rem;
  width: min(420px, calc(100vw - 2rem));
  animation: hrdTourPop 0.18s ease-out;
}
@keyframes hrdTourPop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Help (?) button in the topbar */
#tourHelpBtn {
  background: transparent;
  border: 1px solid var(--border, #e2e8f0);
  color: var(--text-muted, #475569);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#tourHelpBtn:hover {
  background: var(--bg-section, #f1f5f9);
  color: var(--text, #0f172a);
  border-color: var(--text-muted, #64748b);
}
#tourHelpBtn:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 2px;
}

/* Mobile: shrink the welcome card padding */
@media (max-width: 480px) {
  .hrd-tour-welcome__card { padding: 1.4rem 1.1rem; }
  .driver-popover { max-width: calc(100vw - 2rem) !important; }
}