/* Palabra del estado en el centro del Aura. El contenedor del canvas debe tener position: relative. */
.aura-etiqueta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 34%;
  text-align: center;
  font: 500 var(--aura-etiqueta-tam, 15px) / 1.2 "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.01em;
  color: var(--aura-etiqueta, #e6f6ff);
  text-shadow: 0 0 14px color-mix(in srgb, currentColor 45%, transparent), 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  user-select: none;
  transition: opacity 0.14s ease, color 0.4s ease;
}
.aura-etiqueta.cambiando {
  opacity: 0;
}
.aura-etiqueta[data-colores="estado"][data-estado="esperando"]  { --aura-etiqueta: #cbd5e1; }
.aura-etiqueta[data-colores="estado"][data-estado="escuchando"] { --aura-etiqueta: #99f6e4; }
.aura-etiqueta[data-colores="estado"][data-estado="pensando"]   { --aura-etiqueta: #fcd34d; }
.aura-etiqueta[data-colores="estado"][data-estado="hablando"]   { --aura-etiqueta: #a5dcff; }
.aura-etiqueta[data-colores="estado"][data-estado="durmiendo"]  { --aura-etiqueta: #94a3b8; }
.aura-etiqueta[data-estado="error"]                             { --aura-etiqueta: #fda4af; }
.aura-etiqueta[data-estado="pensando"]:not(.cambiando) {
  animation: aura-etiqueta-pensando 1.4s ease-in-out infinite;
}
@keyframes aura-etiqueta-pensando {
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .aura-etiqueta[data-estado="pensando"] { animation: none; }
}