/* Overlay oscuro de fondo */
.tutorial-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 9998; backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; }
.tutorial-overlay.active { opacity: 1; }

/* Spotlight */
.tutorial-spotlight { position: absolute; box-shadow: 0 0 0 9999px rgba(0,0,0,.75); border-radius: 12px; z-index: 9999; pointer-events:none; opacity:0; transition: all .4s ease; }
.tutorial-spotlight.active { opacity: 1; }

/* Tooltip */
.tutorial-tooltip { position: fixed; background:#fff; padding:24px; border-radius:12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); border:1px solid rgba(2,6,23,.10); max-width:520px; width: calc(100% - 40px); opacity:0; transform: scale(.96) translateY(10px); z-index: 9999; transition: all .3s cubic-bezier(.34,1.56,.64,1); }
.tutorial-tooltip.active { opacity:1; transform: scale(1) translateY(0); }

/* Tooltip centrado */
.tutorial-tooltip.centered { top:50% !important; left:50% !important; transform: translate(-50%, -50%) scale(.96); }
.tutorial-tooltip.centered.active { transform: translate(-50%, -50%) scale(1) !important; }

/* Contenido */
.tutorial-progress { display:inline-block; background: var(--primary); color:#fff; padding:4px 12px; border-radius:12px; font-size:12px; font-weight:600; margin-bottom:12px; }
.tutorial-tooltip h3 { margin:0 0 12px; font-size:22px; color: var(--text); font-weight:700; }
.tutorial-tooltip p { margin:0 0 20px; color: var(--muted); line-height:1.6; font-size:15px; }
.tutorial-tooltip p strong { color: var(--primary); font-weight:600; }
.tutorial-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.tutorial-skip { color: var(--muted); background:transparent; border:none; cursor:pointer; font-size:13px; }

@media (max-width: 768px) {
  .tutorial-tooltip { max-width: calc(100vw - 40px); padding:20px; }
}