/* [VOZ-UX] El recorrido de la voz. UNA hoja para las DOS vias.
 *
 * Vive aparte de `voice.css` y `voz-agente.css` por lo mismo que el vocabulario vive aparte
 * de los dos modulos: si cada via tuviera su propio estilo del recorrido, el mismo paso se
 * veria distinto segun por donde se llegue, y la pantalla ensenaria que son cosas distintas
 * cuando son la misma.
 *
 * NINGUN COLOR NUEVO: se leen los tokens que el chat ya declara. Una variable que no existe
 * NO falla —hereda—, asi que cada una lleva su valor de reserva al lado.
 *
 * Marca buscable: voz_estados_ux
 */

/* ── EL ROTULO DE LA VIA ────────────────────────────────────────────────────────────────
   Va siempre visible, tambien cuando no pasa nada: la pregunta «¿en cual de las dos estoy?»
   se hace justo ANTES de apretar. Y no se distingue por color: el color no dice que hacer, y
   quien no distingue colores no ve nada. */
.bm-voz-modo-caja { margin-top: 8px; }
.bm-voz-modo {
  display: flex; flex-direction: column; gap: 2px;
  border-left: 3px solid var(--bm-accent, #7A2C36);
  padding: 6px 10px; background: rgba(0, 0, 0, .03); border-radius: 0 6px 6px 0;
}
.bm-voz-modo b { font-size: 12px; letter-spacing: .01em; }
.bm-voz-modo span { font-size: 11.5px; opacity: .78; line-height: 1.45; }
/* La via en vivo se marca ademas con un borde distinto: dos senales para el mismo hecho, una
   de ellas legible sin color. */
.bm-voz-modo-tiempo_real { border-left-style: double; border-left-width: 4px; }

/* ── LA RUTA ────────────────────────────────────────────────────────────────────────────
   Vertical y no horizontal: cuatro pasos en fila obligan a abreviar los nombres hasta que
   dejan de decir nada, y el panel de la voz es angosto en cualquier telefono. */
.bm-voz-ruta-caja { margin-top: 8px; }
.bm-voz-ruta { list-style: none; margin: 0; padding: 0; }
.bm-voz-paso {
  display: grid; grid-template-columns: 16px 1fr; align-items: baseline;
  column-gap: 8px; padding: 3px 0; opacity: .5;
}
.bm-voz-marca {
  grid-row: 1 / span 2; align-self: center;
  width: 9px; height: 9px; margin-left: 3px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.bm-voz-nombre { font-size: 12.5px; font-weight: 600; }
.bm-voz-que { grid-column: 2; font-size: 11px; opacity: .8; line-height: 1.3; }

/* Hecho: se apaga pero no desaparece — ver de donde se viene es la mitad de un recorrido. */
.bm-voz-hecho { opacity: .62; }
.bm-voz-hecho .bm-voz-marca { background: currentColor; }

/* Activo: a pleno y con el punto latiendo. El latido es la unica animacion, y se apaga con
   `prefers-reduced-motion`. */
.bm-voz-activo { opacity: 1; }
.bm-voz-activo .bm-voz-marca {
  background: var(--bm-accent, #7A2C36);
  box-shadow: inset 0 0 0 1.5px var(--bm-accent, #7A2C36);
  animation: bm-voz-latido 1.1s ease-in-out infinite;
}
@keyframes bm-voz-latido {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-voz-activo .bm-voz-marca { animation: none; }
}

/* La nota de los dos pasos fundidos. Solo aparece cuando los dos estan activos: fuera de ese
   momento explicaria algo que no se esta viendo. */
.bm-voz-nota { font-size: 10.5px; opacity: .7; line-height: 1.4; margin: 4px 0 0; }

/* ── LOS CONTROLES ──────────────────────────────────────────────────────────────────────
   Un boton que no aplica se ESCONDE en vez de deshabilitarse: uno gris invita a apretarlo y
   no dice por que no se puede. */
.bm-voz-controles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.bm-voz-accion {
  font: inherit; font-size: 11.5px; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: inherit; opacity: .85;
}
.bm-voz-accion:hover { opacity: 1; }
.bm-voz-accion[hidden] { display: none; }
/* El foco TIENE que verse: estos botones se alcanzan con Tab desde el microfono. */
.bm-voz-accion:focus-visible { outline: 2px solid var(--bm-accent, #7A2C36); outline-offset: 2px; }
.bm-voz-accion[aria-pressed="true"] { background: currentColor; }
.bm-voz-accion[aria-pressed="true"] > * { color: #fff; }

/* ── LOS ERRORES ────────────────────────────────────────────────────────────────────────
   Que paso y que hacer, en ese orden y en dos renglones. Un error de voz que dice «error»
   deja sin nada que hacer, y en voz es peor que en texto: no queda nada en pantalla para
   releer. */
.bm-voz-error {
  display: flex; flex-direction: column; gap: 2px; margin-top: 8px;
  border-left: 3px solid #991B1B; padding: 6px 10px; border-radius: 0 6px 6px 0;
  background: rgba(153, 27, 27, .06);
}
.bm-voz-error b { font-size: 12px; }
.bm-voz-error span { font-size: 11.5px; opacity: .85; line-height: 1.45; }

@media (max-width: 480px) {
  .bm-voz-que { display: none; }   /* en un telefono el nombre del paso alcanza */
}