/* Tutorial de bienvenida (assets/js/tutorial.js) */

.tut { position: fixed; inset: 0; z-index: 9000; }
.tut__velo { position: absolute; inset: 0; }

/* El hueco iluminado: la sombra enorme oscurece todo lo demás. */
.tut__foco {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 2px var(--se-verde), 0 0 24px rgba(var(--se-verde-rgb), .45), 0 0 0 9999px rgba(6, 9, 8, .74);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
  pointer-events: none;
}
.tut__foco[hidden] { display: none; }
.tut:has(.tut__foco[hidden]) .tut__velo { background: rgba(6, 9, 8, .74); }

.tut__ventana {
  position: fixed;
  width: min(340px, calc(100vw - 32px));
  padding: 18px 18px 14px;
  border: 1px solid var(--se-linea);
  border-radius: 14px;
  background: var(--se-papel);
  color: var(--se-tinta);
  font-family: var(--se-fuente);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  transition: left .25s ease, top .25s ease;
  animation: tut-entra .22s ease both;
}
.tut__ventana::before {
  content: "";
  position: absolute;
  left: calc(var(--flecha, 50%) - 7px);
  width: 14px; height: 14px;
  background: var(--se-papel);
  border: 1px solid var(--se-linea);
  transform: rotate(45deg);
}
.tut__ventana[data-lado="abajo"]::before { top: -8px; border-right: 0; border-bottom: 0; }
.tut__ventana[data-lado="arriba"]::before { bottom: -8px; border-left: 0; border-top: 0; }
.tut__ventana[data-lado="centro"]::before { display: none; }

@keyframes tut-entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .tut__ventana, .tut__foco { animation: none; transition: none; }
}

.tut__paso { margin: 0 0 4px; font: 500 11px var(--se-fuente-mono); color: var(--se-verde-tinta); letter-spacing: .04em; }
[data-tema="oscuro"] .tut__paso { color: var(--se-verde); }
.tut__titulo { margin: 0 0 6px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.tut__texto { margin: 0; font-size: 14px; line-height: 1.5; color: var(--se-tinta-2); }

.tut__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.tut__botones { display: flex; gap: 6px; }
.tut__saltar {
  padding: 6px 2px;
  border: 0; background: none;
  color: var(--se-tinta-2);
  font: 13px var(--se-fuente);
  cursor: pointer;
}
.tut__saltar:hover { color: var(--se-tinta); text-decoration: underline; }
.tut__btn {
  padding: 8px 14px;
  border: 1px solid var(--se-linea-fuerte);
  border-radius: 10px;
  background: transparent;
  color: var(--se-tinta);
  font: 500 13px var(--se-fuente);
  cursor: pointer;
}
.tut__btn--principal { border-color: var(--se-verde); background: var(--se-verde); color: var(--se-sobre-verde); font-weight: 600; }
.tut__btn--principal:hover { background: var(--se-verde-claro); }