/* ══════════════════════════════════════════════════════════════════════
   Flare Onboarding v3 — look "objb" (ticketing): spotlight page-level +
   card minimal + mobile bottom-sheet impecable.
   Misma estética/tipografía/animaciones que el tour de project/ticketing
   (bases/_tk_onboard.html): #ob-spot = objb-spot, #ob-card = objbTip.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Overlay gris (SOLO pasos sin elemento / info) ─────────────────── */
#ob-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 19980;
  background: rgba(15,23,42,.55);
}
#ob-overlay.active { display: block; }
body[data-theme="dark"] #ob-overlay { background: rgba(0,0,0,.66); }

/* ── Spotlight page-level (inmune a stacking-contexts; ilumina aun dentro
      de modales). El recorte revela el elemento; el box-shadow dimea todo
      lo demás. pointer-events:none → no bloquea clicks. = objb-spot. ──── */
#ob-spot {
  display: none;
  position: fixed; z-index: 19990; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15,23,42,.66),
              0 0 0 3px var(--page-accent,#4e73df),
              0 0 0 8px rgba(78,115,223,.30);
  transition: top .22s cubic-bezier(.22,1,.36,1), left .22s cubic-bezier(.22,1,.36,1),
              width .22s cubic-bezier(.22,1,.36,1), height .22s cubic-bezier(.22,1,.36,1);
  animation: ob-spot-pulse 1.7s ease-in-out infinite;
}
#ob-spot.active { display: block; }
@keyframes ob-spot-pulse {
  0%,100% { box-shadow: 0 0 0 9999px rgba(15,23,42,.66), 0 0 0 3px var(--page-accent,#4e73df), 0 0 0 8px rgba(78,115,223,.30); }
  60%     { box-shadow: 0 0 0 9999px rgba(15,23,42,.66), 0 0 0 3px var(--page-accent,#4e73df), 0 0 0 14px rgba(78,115,223,0); }
}
body[data-theme="dark"] #ob-spot {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.72), 0 0 0 3px var(--page-accent,#4e73df), 0 0 0 8px rgba(78,115,223,.30);
}

/* El elemento resaltado ya NO dimea (lo hace #ob-spot): la clase queda como
   marcador (clearHighlight) + radio para que el recorte calce redondeado. */
.ob-highlight, .ob-highlight-modal { border-radius: 10px; }

/* ── Coach card (tarjeta de instrucciones) — estética objbTip ──────── */
#ob-card {
  display: none;
  position: fixed; z-index: 20000;
  background: var(--page-card-bg, #fff); color: #1f2937;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.40), 0 0 0 1px rgba(0,0,0,.04);
  width: 360px; max-width: calc(100vw - 28px); min-width: 300px;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  animation: ob-cardIn .2s cubic-bezier(.22,1,.36,1) both;
}
@keyframes ob-cardIn { from { opacity: 0; } to { opacity: 1; } }
#ob-card.active { display: block; }
body[data-theme="dark"] #ob-card { background: #1e293b; color: #e2e8f0; border-color: rgba(255,255,255,.08); box-shadow: 0 22px 60px rgba(0,0,0,.6); }

/* Stripe + dots ocultos (look limpio, como ticketing) */
.ob-stripe, .ob-dots { display: none !important; }

/* Contador "Paso N de M" — sutil arriba (= objb-count) */
.ob-step { padding: 15px 18px 0; font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: none; color: #94a3b8; }
.ob-step i { display: none; }
body[data-theme="dark"] .ob-step { color: #64748b; }

/* Title */
.ob-title { padding: 6px 18px 0; font-size: 1.02rem; font-weight: 800; color: #0f172a; letter-spacing: -.01em; line-height: 1.25; }
body[data-theme="dark"] .ob-title { color: #f1f5f9; }

/* Body */
.ob-body { padding: 7px 18px 13px; font-size: .83rem; line-height: 1.5; color: #334155; }
body[data-theme="dark"] .ob-body { color: #cbd5e1; }
.ob-body b { color: #0f172a; }
body[data-theme="dark"] .ob-body b { color: #f1f5f9; }

/* Hint (acción requerida) — = objb-do (caja de acento + manito que rebota) */
.ob-hint {
  margin: 0 18px 2px; padding: 8px 11px; font-size: .78rem; font-weight: 700;
  color: var(--page-accent, #4e73df);
  background: color-mix(in srgb, var(--page-accent, #4e73df) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--page-accent, #4e73df) 22%, transparent);
  border-radius: 9px; display: flex; align-items: center; gap: 8px;
}
.ob-hint i { animation: ob-hand 1s ease-in-out infinite; }
@keyframes ob-hand { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Footer */
.ob-footer { padding: 13px 18px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* Buttons — "Siguiente" sólido (= objb-next), "Salir" link tenue a la izquierda */
.ob-btn { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; font-family: inherit; padding: 8px 18px; border-radius: 9px; border: none; cursor: pointer; transition: filter .15s, opacity .15s, background .15s; }
.ob-btn-next { background: var(--page-accent, #4e73df); color: #fff; }
.ob-btn-next:hover { filter: brightness(.93); }
.ob-btn-next:disabled, .ob-btn-next[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }
.ob-btn-next:disabled:hover, .ob-btn-next[disabled]:hover { filter: grayscale(.3); }
.ob-btn-prev { background: transparent; color: #94a3b8; border: 1.5px solid var(--ds-border, #e2e8f0); padding: 8px 11px; }
body[data-theme="dark"] .ob-btn-prev { border-color: rgba(255,255,255,.12); color: #94a3b8; }
.ob-btn-skip { order: -1; margin-right: auto; background: none; border: none; color: #94a3b8; text-decoration: none; font-weight: 600; font-size: .72rem; cursor: pointer; padding: 4px; }
.ob-btn-skip:hover { color: #64748b; text-decoration: underline; }

/* ── Celebración ──────────────────────────────────────────────────── */
#ob-celebrate {
  display: none;
  position: fixed; inset: 0; z-index: 20010;
  background: rgba(15,23,42,.55);
  align-items: center; justify-content: center;
}
#ob-celebrate.active { display: flex; }
.ob-cel-card {
  background: var(--page-card-bg, #fff); color: #1f2937; border-radius: 18px;
  padding: 40px 32px; text-align: center; max-width: 380px; max-width: min(380px, calc(100vw - 32px));
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  animation: ob-cardIn .3s .05s cubic-bezier(.22,1,.36,1) both;
}
body[data-theme="dark"] .ob-cel-card { background: #1e293b; color: #e2e8f0; }
.ob-cel-emoji { font-size: 2.8rem; margin-bottom: 12px; animation: ob-bounce .8s ease infinite; }
@keyframes ob-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ob-cel-title { font-size: 1.12rem; font-weight: 800; color: #0f172a; margin-bottom: 6px; line-height: 1.3; }
body[data-theme="dark"] .ob-cel-title { color: #f1f5f9; }
.ob-cel-sub { font-size: .84rem; color: #475569; line-height: 1.55; margin-bottom: 20px; }
body[data-theme="dark"] .ob-cel-sub { color: #94a3b8; }

/* ── Mobile — bottom sheet impecable (iOS safe-area + scroll) ──────── */
@media (max-width: 640px) {
  #ob-card {
    width: auto !important; max-width: none !important; min-width: 0 !important;
    left: 10px !important; right: 10px !important;
    border-radius: 16px;
    /* alto acotado + scroll: textos largos nunca se salen de la pantalla */
    max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    /* posición POR DEFECTO (pasos info, sin elemento): abajo + safe-area. En los pasos
       con elemento, el JS (positionCard) pone top/bottom inline !important y pisa esto. */
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    top: auto;
  }
  .ob-step { padding: 14px 16px 0; }
  .ob-title { font-size: .98rem; padding: 5px 16px 0; }
  .ob-body { font-size: .82rem; padding: 6px 16px 12px; }
  .ob-hint { margin: 0 16px 2px; }
  .ob-footer { padding: 11px 16px 14px; }
  .ob-btn { padding: 11px 16px; font-size: .82rem; }     /* tap targets cómodos */
  .ob-btn-prev { padding: 11px 13px; }
  .ob-cel-card { padding: 30px 22px; }
  .ob-cel-title { font-size: 1.02rem; }
  .ob-cel-sub { font-size: .8rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOTOR objb-spot (cartel #objbTip) — VARIANTE DARK CENTRALIZADA
   ──────────────────────────────────────────────────────────────────────
   El CSS del motor objb-spot está copy-pasteado INLINE en ~21 templates
   (los *_onboard.html + los reales con tour in-place) y hardcodea la
   tarjeta BLANCA (#objbTip{background:#fff}) con texto oscuro y flechas
   blancas, SIN variante dark → en tema oscuro la card salía blanca y
   encandilaba sobre el velo. Como TODOS usan los MISMOS selectores
   (#objbTip / .objb-*), esta única regla global —scopeada a
   body[data-theme="dark"], mayor especificidad que el `#objbTip{…}` inline—
   cae sobre TODOS los tours a la vez. Los temas claros (dbagile/minimal) NO
   se tocan. (El motor DBOnboard #ob-card ya tiene su dark arriba.)
   ══════════════════════════════════════════════════════════════════════ */
body[data-theme="dark"] #objbTip {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) !important;
}
body[data-theme="dark"] #objbTip .objb-title  { color: #f1f5f9 !important; }
body[data-theme="dark"] #objbTip .objb-body   { color: #cbd5e1 !important; }
body[data-theme="dark"] #objbTip .objb-body b { color: #f8fafc !important; }
body[data-theme="dark"] #objbTip .objb-count  { color: #94a3b8 !important; }
body[data-theme="dark"] #objbTip .objb-omit   { color: #cbd5e1 !important; }
body[data-theme="dark"] #objbTip .objb-omit:hover { color: #93c5fd !important; }
body[data-theme="dark"] #objbTip .objb-skip   { color: #cbd5e1 !important; }   /* "Salir" legible en dark (más visible, 2026-07-08) */
body[data-theme="dark"] #objbTip .objb-skip:hover { color: #f1f5f9 !important; }
body[data-theme="dark"] #objbTip .objb-tipp {
  color: #2dd4bf !important;                         /* teal más brillante, legible sobre #1e293b */
  border-top-color: rgba(255,255,255,.12) !important;
}
/* Flecha (triángulo) del cartel → color de la card oscura, no #fff */
body[data-theme="dark"] #objbTip:not(.objb-above)::after { border-bottom-color: #1e293b !important; }
body[data-theme="dark"] #objbTip.objb-above::after       { border-top-color: #1e293b !important; }

/* Velo/recorte del spotlight en dark: un poco más profundo y limpio (near-black,
   no el slate "griseado" que enturbiaba sobre el fondo ya oscuro). Se mantiene el
   pulso del anillo cambiando el animation-name a una variante dark (no se puede
   pisar el box-shadow con !important sin matar la animación). */
body[data-theme="dark"] .objb-spot { animation-name: objbCutPulseDark !important; }
@keyframes objbCutPulseDark {
  0%,100% { box-shadow: 0 0 0 9999px rgba(2,6,23,.74), 0 0 0 3px var(--ds-blue,#4e73df), 0 0 0 8px rgba(96,165,250,.35); }
  60%     { box-shadow: 0 0 0 9999px rgba(2,6,23,.74), 0 0 0 3px var(--ds-blue,#4e73df), 0 0 0 14px rgba(96,165,250,0); }
}
body[data-theme="dark"] .objb-spot.objb-noring { box-shadow: 0 0 0 9999px rgba(2,6,23,.74) !important; }

/* ══════════════════════════════════════════════════════════════════════
   "SALIR" del tour MÁS LEGIBLE en TODOS los motores (2026-07-08)
   ──────────────────────────────────────────────────────────────────────
   El link "Salir" (cerrar el tour) venía muy tenue en los 5 motores
   (color #94a3b8, .72rem, weight 600, sin subrayado) → costaba leerlo.
   Lo subimos a un slate con buen contraste, un poco más grande, en negrita
   y SUBRAYADO (afordancia de link clara), SIN convertirlo en un botón que
   compita con el primario azul. Global + !important → cae sobre el CSS
   inline copy-pasteado en ~21 templates objb + los wizards sin tocarlos.
   Clases: objb=.objb-skip · DBOnboard=.ob-btn-skip · wizards=.onb-skip /
   .onbx-skip / .ev2onb-skip (+ [data-skip] como red de seguridad).
   ══════════════════════════════════════════════════════════════════════ */
.objb-skip, .ob-btn-skip, .onb-skip, .onbx-skip, .ev2onb-skip,
#objbTip [data-skip], .onb-tip [data-skip], .onbx-tip [data-skip], .ev2onb-tip [data-skip] {
  color: #475569 !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  opacity: 1 !important;
}
.objb-skip:hover, .ob-btn-skip:hover, .onb-skip:hover, .onbx-skip:hover, .ev2onb-skip:hover,
#objbTip [data-skip]:hover, .onb-tip [data-skip]:hover, .onbx-tip [data-skip]:hover, .ev2onb-tip [data-skip]:hover {
  color: #1e293b !important;
}
body[data-theme="dark"] .objb-skip, body[data-theme="dark"] .ob-btn-skip,
body[data-theme="dark"] .onb-skip, body[data-theme="dark"] .onbx-skip, body[data-theme="dark"] .ev2onb-skip,
body[data-theme="dark"] #objbTip [data-skip] {
  color: #cbd5e1 !important;
}
body[data-theme="dark"] .objb-skip:hover, body[data-theme="dark"] .ob-btn-skip:hover,
body[data-theme="dark"] .onb-skip:hover, body[data-theme="dark"] .onbx-skip:hover, body[data-theme="dark"] .ev2onb-skip:hover,
body[data-theme="dark"] #objbTip [data-skip]:hover {
  color: #f1f5f9 !important;
}