/*
  IDENTIKO [LAB] — recorrido guiado del editor.

  Aparece una sola vez, la primera vez que alguien entra al editor. Se puede
  volver a ver desde el botón "Cómo funciona" del encabezado.

  El oscurecido NO es una capa sobre toda la página: es una sombra enorme
  alrededor del recuadro que resalta. Así el elemento destacado queda a la
  vista sin tener que tocar su z-index ni su contexto de apilado, que es donde
  esta clase de recorridos se suele romper.
*/

.tut-foco {
  position: fixed;
  z-index: 200;
  border-radius: 6px;
  pointer-events: none;
  border: 2px solid var(--azul);
  box-shadow:
    0 0 0 4px rgba(11, 85, 232, 0.25),
    0 0 0 9999px rgba(8, 8, 8, 0.72);
  transition: top 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* barra de abajo */
.tut-barra {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 201;
  width: min(680px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--negro);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: #fff;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.5);
}

/*
  Puntos de progreso. Reemplazan al "01 / 04": se lee de un vistazo cuánto
  falta, y cada punto lleva a su paso para quien quiera volver a uno puntual.
*/
.tut-progreso {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tut-punto {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.tut-punto[data-estado='hecho'] {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
}

/* El actual se alarga en vez de agrandarse: no empuja a los de al lado. */
.tut-punto[data-estado='actual'] {
  width: 22px;
  border-radius: 5px;
  background: var(--amarillo);
  border-color: var(--amarillo);
}

.tut-punto:hover { transform: scale(1.15); }
.tut-punto[data-estado='actual']:hover { transform: none; }

.tut-texto {
  flex: 1;
  min-width: 0;
}

.tut-titulo {
  display: block;
  font-family: var(--fuente-ui);
  font-size: 13px;
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}

.tut-detalle {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.tut-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tut-saltar {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  padding: 8px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tut-saltar:hover { color: #fff; }

.tut-atras {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--fuente-ui);
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 10px 13px;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}

.tut-atras:hover { border-color: #fff; color: #fff; }
.tut-atras[hidden] { display: none; }

.tut-siguiente {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fuente-ui);
  font-size: 12px;
  letter-spacing: 0.3px;
  background: var(--azul);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 11px 17px;
  transition: background 0.18s, transform 0.18s;
}

.tut-siguiente:hover { background: var(--azul-oscuro); transform: translateY(-1px); }

.tut-siguiente svg { width: 14px; height: 14px; }

/* el botón para volver a verlo, en el encabezado */
.tut-abrir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 720px) {
  .tut-barra {
    bottom: 76px; /* por encima de la barra fija de la selección */
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }
  .tut-texto { flex: 1 1 100%; order: 2; }
  .tut-progreso { order: 1; }
  .tut-acciones { order: 1; margin-left: auto; }
  .tut-detalle { font-size: 12px; }
  .tut-siguiente { padding: 9px 13px; }
  .tut-atras { padding: 9px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .tut-foco { transition: none; }
  .tut-siguiente:hover { transform: none; }
  .tut-punto { transition: none; }
  .tut-punto:hover { transform: none; }
}