/* ===========================================================
   onboarding.css — tour guiado de primera vez (Altto + Apple)
   =========================================================== */

.onb-root { position: fixed; inset: 0; z-index: var(--z-onb, 2600); }
.onb-root[hidden] { display: none; }

/* Backdrop translúcido navy con desenfoque */
.onb-backdrop {
  position: fixed; inset: 0;
  background: rgba(8,20,34,.55);
  backdrop-filter: saturate(140%) blur(3px);
  -webkit-backdrop-filter: saturate(140%) blur(3px);
  opacity: 0; transition: opacity .35s var(--ease, ease);
}
.onb-root.show .onb-backdrop { opacity: 1; }

/* Spotlight: anillo con sombra gigante que recorta el resto */
.onb-spot {
  position: fixed; border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(8,20,34,.62), 0 0 0 2px rgba(255,255,255,.9) inset;
  outline: 2px solid var(--azure-bright, #345f95);
  outline-offset: 3px;
  pointer-events: none;
  transition: all .42s var(--ease-out, cubic-bezier(.16,1,.3,1));
  opacity: 0;
}
.onb-root.show .onb-spot { opacity: 1; }
.onb-spot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 16px;
  outline: 2px solid var(--azure-bright, #345f95);
  animation: onb-pulse 1.8s var(--ease, ease) infinite;
}
@keyframes onb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,95,149,.45); }
  70%  { box-shadow: 0 0 0 12px rgba(52,95,149,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,95,149,0); }
}

/* Tooltip / coachmark */
.onb-pop {
  position: fixed; width: min(360px, calc(100vw - 32px));
  background: var(--bg, #fff); color: var(--fg, #15181d);
  border: 1px solid var(--line, #ececee);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-lg, 0 28px 56px -22px rgba(15,23,42,.22));
  padding: 18px 18px 14px;
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.onb-root.show .onb-pop { opacity: 1; transform: translateY(0) scale(1); }
.onb-step-no {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--azure, #264a78);
}
.onb-pop h3 { font-size: 17px; font-weight: 700; margin: 6px 0 6px; letter-spacing: -.02em; }
.onb-pop p { font-size: 13.5px; line-height: 1.55; color: var(--fg-muted, #5f6875); margin: 0; }
.onb-foot {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
}
.onb-dots { display: flex; gap: 6px; flex: 1; }
.onb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong, #dcdde1); transition: all .25s var(--ease); }
.onb-dot.on { background: var(--azure, #264a78); width: 20px; border-radius: 999px; }
.onb-btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong, #dcdde1);
  background: var(--bg, #fff); color: var(--fg, #15181d);
  transition: background .15s var(--ease), filter .15s var(--ease), transform .1s var(--ease);
}
.onb-btn:hover { background: var(--hover, #f4f5f7); }
.onb-btn:active { transform: scale(.97); }
.onb-btn.primary {
  background: linear-gradient(180deg, var(--azure, #264a78), var(--navy, #0b2340));
  border-color: var(--navy, #0b2340); color: #fff;
  box-shadow: 0 6px 16px -8px rgba(11,35,64,.55);
}
.onb-btn.primary:hover { filter: brightness(1.07); }
.onb-skip {
  position: fixed; top: 18px; right: 20px; z-index: 1;
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; backdrop-filter: blur(8px); transition: background .15s var(--ease);
}
.onb-skip:hover { background: rgba(255,255,255,.24); }

/* Welcome / final modal centrado */
.onb-modal {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 20px;
}
.onb-card {
  width: min(440px, calc(100vw - 32px));
  background: var(--bg, #fff); border: 1px solid var(--line, #ececee);
  border-radius: var(--radius-xl, 22px); box-shadow: var(--shadow-lg);
  padding: 34px 30px 26px; text-align: center;
  opacity: 0; transform: translateY(12px) scale(.97);
  transition: opacity .4s var(--ease-out), transform .45s var(--ease-out);
}
.onb-root.show .onb-card { opacity: 1; transform: translateY(0) scale(1); }
.onb-logo {
  width: 60px; height: 60px; border-radius: 17px; margin: 0 auto 18px;
  background: linear-gradient(150deg, var(--azure-bright, #345f95), var(--navy, #0b2340));
  box-shadow: 0 12px 28px -10px rgba(11,35,64,.6);
  display: grid; place-items: center; position: relative;
  animation: onb-float 4s var(--ease) infinite;
}
.onb-logo::after { content: ""; width: 24px; height: 24px; border-radius: 6px; background: #fff; opacity: .96; }
@keyframes onb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.onb-card .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--azure, #264a78); }
.onb-card h2 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; margin: 8px 0 10px; }
.onb-card p { font-size: 14px; line-height: 1.6; color: var(--fg-muted, #5f6875); margin: 0 auto 22px; max-width: 340px; }
.onb-card .onb-actions { display: flex; flex-direction: column; gap: 10px; }
.onb-card .onb-btn { width: 100%; justify-content: center; padding: 11px 16px; font-size: 14px; }

/* respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .onb-backdrop, .onb-spot, .onb-pop, .onb-card { transition: none; }
  .onb-spot::after, .onb-logo { animation: none; }
}