/* ══════════════════════════════════════════════════════════════════════
   DBAgile Onboarding v2 — Modal-based interactive coach
   ══════════════════════════════════════════════════════════════════════ */

/* ── Overlay (fondo gris — solo para pasos sin elemento) ──────────── */
#ob-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,.55);
}
#ob-overlay.active { display: block; }
body[data-theme="dark"] #ob-overlay { background: rgba(0,0,0,.7); }

/* ── Target highlight — el box-shadow ENORME crea el gris alrededor ─ */
.ob-highlight {
  position: relative !important;
  z-index: 9991 !important;
  pointer-events: auto !important;
  border-radius: 10px;
  cursor: pointer !important;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55), 0 0 0 4px var(--page-accent, #4e73df) !important;
  animation: ob-ring 1.5s ease-in-out infinite !important;
}
.ob-highlight * { pointer-events: auto !important; }
body[data-theme="dark"] .ob-highlight {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.7), 0 0 0 4px var(--page-accent, #4e73df) !important;
}
@keyframes ob-ring {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,.55), 0 0 0 4px var(--page-accent, #4e73df), 0 0 20px rgba(78,115,223,.3); }
  50% { box-shadow: 0 0 0 9999px rgba(0,0,0,.55), 0 0 0 6px var(--page-accent, #4e73df), 0 0 30px rgba(78,115,223,.15); }
}

/* ── Coach card (la tarjeta de instrucciones) ─────────────────────── */
#ob-card {
  display: none;
  position: fixed; z-index: 9992;
  background: var(--page-card-bg, #fff);
  border: 2px solid var(--page-accent, #4e73df);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.05);
  max-width: 440px; min-width: 320px;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  animation: ob-cardIn .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes ob-cardIn { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
#ob-card.active { display: block; }
body[data-theme="dark"] #ob-card { background: #1e293b; border-color: rgba(255,255,255,.1); box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* Stripe */
.ob-stripe { height: 4px; background: linear-gradient(90deg, var(--page-accent, #4e73df), var(--page-accent-dark, #224abe)); }

/* Step badge */
.ob-step { padding: 16px 20px 0; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--page-accent, #4e73df); }

/* Title */
.ob-title { padding: 6px 20px 0; font-size: 1rem; font-weight: 900; color: var(--page-text, #1e293b); letter-spacing: -.02em; line-height: 1.3; }
body[data-theme="dark"] .ob-title { color: #e2e8f0; }

/* Body */
.ob-body { padding: 10px 20px 14px; font-size: .82rem; line-height: 1.7; color: var(--page-muted, #64748b); }
body[data-theme="dark"] .ob-body { color: #94a3b8; }
.ob-body b { color: var(--page-text, #1e293b); }
body[data-theme="dark"] .ob-body b { color: #e2e8f0; }

/* Hint (action required) */
.ob-hint {
  padding: 10px 20px; font-size: .78rem; font-weight: 700;
  color: var(--page-accent, #4e73df);
  background: color-mix(in srgb, var(--page-accent, #4e73df) 6%, transparent);
  display: flex; align-items: center; gap: 8px;
}
.ob-hint i { animation: ob-point .8s ease-in-out infinite; }
@keyframes ob-point { 0%,100% { transform:translateX(0); } 50% { transform:translateX(4px); } }

/* Progress dots */
.ob-dots { display: flex; gap: 4px; padding: 0 20px; }
.ob-dot { width: 8px; height: 8px; border-radius: 8px; background: var(--ds-border, #cbd5e1); transition: all .2s; }
.ob-dot.active { background: var(--page-accent, #4e73df); width: 20px; }
.ob-dot.done { background: var(--page-accent, #4e73df); opacity: .3; }
body[data-theme="dark"] .ob-dot { background: rgba(255,255,255,.1); }

/* Footer */
.ob-footer { padding: 14px 20px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ds-border, #e2e8f0); flex-wrap: wrap; }
body[data-theme="dark"] .ob-footer { border-color: rgba(255,255,255,.06); }

/* Buttons */
.ob-btn { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; font-family: inherit; padding: 8px 18px; border-radius: 10px; border: none; cursor: pointer; transition: all .15s; }
.ob-btn-next { background: linear-gradient(135deg, var(--page-accent, #4e73df), var(--page-accent-dark, #224abe)); color: #fff; box-shadow: 0 3px 12px color-mix(in srgb, var(--page-accent) 30%, transparent); }
.ob-btn-next:hover { transform: translateY(-1px); box-shadow: 0 5px 18px color-mix(in srgb, var(--page-accent) 45%, transparent); }
.ob-btn-prev { background: transparent; color: var(--page-muted, #64748b); border: 1.5px solid var(--ds-border, #e2e8f0); }
body[data-theme="dark"] .ob-btn-prev { border-color: rgba(255,255,255,.1); }
.ob-btn-skip { background: none; border: none; color: var(--page-muted, #94a3b8); font-size: .72rem; font-weight: 600; cursor: pointer; padding: 4px; }
.ob-btn-skip:hover { color: #ef4444; }

/* ── Celebration ──────────────────────────────────────────────────── */
#ob-celebrate {
  display: none;
  position: fixed; inset: 0; z-index: 9995;
  background: rgba(0,0,0,.5);
  align-items: center; justify-content: center;
}
#ob-celebrate.active { display: flex; }
.ob-cel-card {
  background: var(--page-card-bg, #fff); border-radius: 24px;
  padding: 44px 36px; text-align: center; max-width: 400px;
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
  animation: ob-cardIn .4s .1s cubic-bezier(.22,1,.36,1) both;
}
body[data-theme="dark"] .ob-cel-card { background: #1e293b; }
.ob-cel-emoji { font-size: 3rem; margin-bottom: 14px; animation: ob-bounce .8s ease infinite; }
@keyframes ob-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.ob-cel-title { font-size: 1.2rem; font-weight: 900; color: var(--page-text); margin-bottom: 6px; }
body[data-theme="dark"] .ob-cel-title { color: #e2e8f0; }
.ob-cel-sub { font-size: .85rem; color: var(--page-muted); line-height: 1.6; margin-bottom: 20px; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #ob-card {
    max-width: calc(100vw - 24px) !important; min-width: 0 !important;
    left: 12px !important; right: 12px !important;
    bottom: 12px !important; top: auto !important;
    width: auto !important;
    border-radius: 14px;
  }
  .ob-title { font-size: .9rem !important; }
  .ob-body { font-size: .78rem !important; padding: 8px 16px 12px !important; }
  .ob-step { padding: 12px 16px 0 !important; }
  .ob-footer { padding: 10px 16px 14px !important; }
  .ob-dots { padding: 0 16px !important; }
  .ob-btn { padding: 7px 14px !important; font-size: .74rem !important; }
  .ob-hint { padding: 8px 16px !important; font-size: .74rem !important; }
  .ob-cel-card { padding: 32px 24px !important; margin: 16px !important; }
  .ob-cel-title { font-size: 1rem !important; }
  .ob-cel-sub { font-size: .8rem !important; }
}
</style>