/* Widget de voz — sólo lo que el sistema de diseño no cubría.
   Todo sale de los tokens de estilos.css: cero colores y cero radios nuevos. */

.loomi-aviso {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 12px;            /* mismo radio que .btn */
  background: var(--aviso-fondo, #fff3e6);
  color: var(--aviso-texto, #7a3d00);
  font-size: 13px;
  line-height: 1.4;
}
.loomi-aviso[hidden] { display: none; }

.loomi-codigo { display: flex; gap: 8px; width: 100%; }
.loomi-codigo input {
  flex: 1;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--blanco);
  color: var(--tinta);
  font: inherit;
  font-size: 14px;
}
.loomi-codigo input:focus-visible { outline: 2px solid var(--azul); outline-offset: -1px; }

.loomi-btn-llamar { width: 100%; }

.loomi-nota {
  margin: 9px 0 0;
  font-size: 11.5px;
  color: var(--gris-2);
  text-align: center;
}

/* El punto verde de "en llamada" reutiliza el token ok del sistema. */
#loomi-voz-estado.viva::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--ok, #2fb36a);
  flex: none;
  animation: loomi-late 1.8s ease-in-out infinite;
}
@keyframes loomi-late {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  #loomi-voz-estado.viva::before { animation: none; }
}