/* Estilos propios del asistente (crear.html). */

/* Indicador de pasos del encabezado */
.indicador { display: flex; align-items: center; gap: .4rem; opacity: .45; }
.indicador span {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(106, 84, 132, .2);
}
.indicador[data-estado="hecho"] { opacity: .8; }
.indicador[data-estado="hecho"] span { background: #d3f4e4; }
.indicador[data-estado="actual"] { opacity: 1; }
.indicador[data-estado="actual"] span { background: #8a6bb8; color: #fff; }
/* en el celular solo se lee el nombre del paso actual */
@media (max-width: 639px) {
  .indicador:not([data-estado="actual"]) b { display: none; }
}

/* Vista previa: en el celular es un panel a pantalla completa que se abre con un botón */
@media (max-width: 1023px) {
  #panel-vista {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: none;
    place-items: center;
    padding: 1rem;
    background: rgba(106, 84, 132, .7);
    backdrop-filter: blur(4px);
  }
  #panel-vista.abierta { display: grid; }
}

.late { animation: late 1.4s ease-in-out infinite; }
@keyframes late { 50% { transform: scale(1.15) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .late { animation: none; } }