/*
 * ptt-voz.css — la sesión de voz por vuelo (Push-to-Talk).
 *
 * Hoja aparte, igual que tarjeta-azul.css: la carga SOLO atender.html, que es
 * la única pantalla con sesión de voz. No redefine ningún token de
 * DESIGN.md; usa los de styles.css (:root).
 *
 * Contexto de uso, que explica casi todas las decisiones de aquí (ver
 * docs/investigacion/PTT_VOZ_ATENCION.md §7): plataforma de aeropuerto, a
 * pleno sol, con guantes de rampa y ruido de turbina. De ahí que el color
 * NUNCA sea la única señal de estado: cada estado cambia también el icono y
 * el anillo, porque a contraluz un matiz de color no se distingue.
 *
 * ── LA FORMA, Y POR QUÉ CAMBIÓ ───────────────────────────────────────
 * Esto era un rectángulo fijo al pie de la pantalla con todo dentro —quién
 * hay, entrar, salir, manos libres, un pulsador de 128px—. Ocupaba media
 * pantalla en mobile, tapaba la lista de actividades y competía con el botón
 * flotante naranja. Ahora son dos piezas, siguiendo la lógica de ese botón:
 *
 *   .voz-burbuja  un círculo de la misma forma que .op-fab-toggle (más
 *                 grande: 72px), pegado al borde derecho y con su etiqueta
 *                 de texto al lado. Es el pulsador de hablar y el semáforo
 *                 de la radio. Es lo único siempre en pantalla.
 *   .voz-panel    todo lo demás, en una hoja igual que el resto de los
 *                 modales de la aplicación. Se abre bajo demanda desde el
 *                 botón "Radio" del menú flotante.
 */

/* ── Esconder lo escondido ────────────────────────────────────────────
   Esta hoja la cargan DOS pantallas con bases distintas: la de atención, que
   trae atender.css con su `[hidden] { display: none !important }` global, y el
   Home, que no lo trae. Y aquí abajo hay un montón de clases que fijan
   `display`, lo cual gana a la regla del navegador para [hidden] por venir de
   la hoja de autor.

   Sin esto, en el Home no se escondía NADA: los avisos previos salían estando
   ya dentro de la sala y —mucho peor— la alerta roja de "no te están oyendo"
   quedaba encendida permanentemente. Una alerta que siempre grita deja de
   significar algo, que es justo lo contrario de para lo que está.

   Un componente no puede depender de la hoja de otra pantalla para funcionar,
   así que la garantía viaja con él. */
.voz-burbuja[hidden],
.voz-burbuja-cuenta[hidden],
.voz-burbuja-candado[hidden],
.voz-burbuja-mudo[hidden],
.voz-pista-fijar[hidden],
.voz-onboarding[hidden],
.voz-ptt[hidden],
.voz-panel-overlay[hidden],
.voz-aviso[hidden],
.voz-alerta[hidden],
.voz-bloque[hidden],
.voz-salas[hidden],
.voz-sala[hidden],
.voz-participante[hidden],
.voz-acciones[hidden] {
  display: none !important;
}

/* ── Un solo código de colores ────────────────────────────────────────
   El mismo en la burbuja, su etiqueta y el panel. Antes la burbuja iba en
   verde, ámbar y rojo y el botón del panel en azul, gris y naranja: el mismo
   estado tenía dos colores según dónde se mirara, y el ámbar de "otro está
   hablando" se leía como "algo falla".

     listo       verde              puedes hablar
     escucha     azul               otro tiene la palabra (no es un fallo)
     aire        rojo               estás transmitiendo
     sin radio   casi negro, borde  no te oyen; distinto de TODO lo demás,
                 rojo               incluido el gris de "conectando"

   Son alias de los tokens de styles.css, no colores nuevos: se declaran aquí
   porque esta hoja la cargan dos pantallas y la garantía viaja con el
   componente (ver el bloque siguiente). */
:root {
  --voz-listo: var(--success);
  --voz-escucha: var(--info);
  --voz-aire: var(--error);
  --voz-sin-radio: var(--on-surface);
  --voz-sin-radio-borde: var(--error);
  --voz-conectando: var(--on-surface-variant);
}

/* ── La burbuja ───────────────────────────────────────────────────────
   Sombra y radio calcados de .op-fab-toggle (atender.css): son la misma
   familia de controles. El TAMAÑO ya no: 72px frente a los 56 del botón
   naranja. Es el mínimo con guantes de rampa (ver .voz-ptt), y es el botón
   que se aprieta decenas de veces por atención; el naranja se toca poco.

   `top` lo escribe acomodarBurbuja() en /js/ptt-voz.js; `right` se queda en
   el CSS porque el eje horizontal no se mueve nunca.

   z-index 30: por encima de .op-tabs (20), por debajo del botón naranja (35)
   y de los modales (40). Un diálogo que pide una decisión manda sobre esto.

   touch-action:none es obligatorio, no cosmético: sin él, arrastrar el dedo
   sobre la burbuja lo interpreta el navegador como scroll y CANCELA el
   pointer —o sea, el micrófono se cierra solo a mitad de frase, y además el
   arrastre vertical no llegaría a funcionar. */
.voz-burbuja {
  position: fixed;
  right: 16px;
  z-index: 30;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 16px rgba(20, 24, 38, 0.3);
  background: var(--outline);
  color: #fff;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

/* Mientras se arrastra crece un pelo, igual que el botón naranja: es la
   confirmación de que el gesto se entendió como "mover" y no como "hablar". */
.voz-burbuja[data-arrastrando='si'] {
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(20, 24, 38, 0.4);
  transition: none;
}

.voz-burbuja-ico {
  display: grid;
  place-items: center;
  pointer-events: none;
}

.voz-burbuja-ico .material-symbols-outlined { font-size: 36px; }
.voz-burbuja-ico .girag-svg-icon { width: 38px; height: 38px; }

/* Cuántos hay en la sala. Chapa pequeña en la esquina: el dato que antes
   justificaba una lista entera, en dos caracteres. */
.voz-burbuja-cuenta {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  /* Borde fijo y no `currentColor`: heredándolo, la chapa cambiaba de color
     con cada estado de la burbuja y parecía otra señal más. El número de
     personas en la sala no depende de si alguien está hablando. */
  border: 2px solid var(--outline);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

/* ── Manos libres: el candado ─────────────────────────────────────────
   Marca que el micrófono quedó FIJADO. Es la diferencia entre "si suelto
   dejo de hablar" y "si suelto SIGO hablando", que es el error caro de este
   modo: alguien creyendo que colgó mientras la sala le sigue oyendo.

   Va abajo a la izquierda para no pelearse con el contador de la sala, que
   vive arriba a la derecha. */
.voz-burbuja-candado {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  border: 2px solid var(--outline);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.voz-burbuja-candado .material-symbols-outlined { font-size: 13px; }

/* Escucha silenciada (⏸ del aviso del sistema). Abajo a la derecha, en la
   esquina libre. Es la respuesta a "¿por qué no oigo a nadie?" sin tener que
   abrir el panel. */
.voz-burbuja-mudo {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  border: 2px solid var(--outline);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.voz-burbuja-mudo .material-symbols-outlined { font-size: 15px; }

/* Silenciada, el círculo además se apaga un poco: de lejos, sin distinguir
   la insignia, se ve que algo está distinto. */
.voz-burbuja[data-silenciada='si'] .voz-burbuja-ico { opacity: 0.7; }

/* ── La etiqueta de texto ─────────────────────────────────────────────
   Una píldora a la IZQUIERDA del círculo con lo que hace ahora mismo:
   "Mantén para hablar", "Habla Juan", "Al aire", "Sin radio · toca",
   "Entrar a esta radio". Antes eso solo existía en el aria-label y quien no
   usa lector de pantalla tenía que adivinarlo.

   Mismo color que el círculo (es la misma señal) y texto blanco en negrita:
   a pleno sol lo que se lee es el contraste, no el matiz.

   pointer-events:none: es parte del botón solo para moverse con él. Si
   recibiera toques, apretar al lado de la burbuja abriría el micrófono.

   Se esconde mientras dura un gesto (data-gesto, data-arrastrando): sale en
   el mismo sitio que la pista de fijar, y las dos a la vez se pisaban. */
.voz-burbuja-etiqueta {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  max-width: calc(100vw - 72px - 16px - 10px - 16px);
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--voz-listo);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(20, 24, 38, 0.28);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.voz-burbuja-etiqueta:empty,
.voz-burbuja[data-gesto='si'] .voz-burbuja-etiqueta,
.voz-burbuja[data-arrastrando='si'] .voz-burbuja-etiqueta {
  display: none;
}

.voz-burbuja[data-estado='escuchando'] .voz-burbuja-etiqueta { background: var(--voz-escucha); }
.voz-burbuja[data-estado='transmitiendo'] .voz-burbuja-etiqueta { background: var(--voz-aire); }
.voz-burbuja[data-estado='conectando'] .voz-burbuja-etiqueta,
.voz-burbuja[data-estado='reconectando'] .voz-burbuja-etiqueta { background: var(--voz-conectando); }

.voz-burbuja[data-estado='caido'] .voz-burbuja-etiqueta {
  background: var(--voz-sin-radio);
  border-color: var(--voz-sin-radio-borde);
}

.voz-burbuja[data-estado='entrar'] .voz-burbuja-etiqueta {
  background: var(--surface-container-lowest);
  color: var(--primary);
  border-color: var(--primary);
}

/* Al aire el círculo crece (ver más abajo) y la etiqueta, que va dentro,
   crecería con él y se saldría de sitio. Se compensa la escala para que
   mida lo mismo que en los demás estados. */
.voz-burbuja[data-estado='transmitiendo'] .voz-burbuja-etiqueta {
  transform: translateY(-50%) scale(calc(1 / 1.3));
  transform-origin: right center;
}

/* Con el micrófono fijado, la burbuja lleva además un anillo punteado: el
   candado es pequeño y a contraluz se pierde, pero el borde discontinuo se
   reconoce de lejos aunque no se distinga el icono. */
.voz-burbuja[data-fijado='si'] {
  outline: 3px dashed var(--on-surface-variant);
  outline-offset: 3px;
}

.voz-burbuja[data-estado='transmitiendo'][data-fijado='si'] {
  outline-color: var(--error);
}

/* ── La pista del gesto de fijar ──────────────────────────────────────
   Aparece a la IZQUIERDA mientras se arrastra el dedo, como la de las notas
   de voz de WhatsApp. Es lo único que enseña que el gesto existe: sin ella
   nadie lo descubre. --avance va de 0 a 1 y lo escribe el pointermove.

   Se desplaza y se opaca con transform/opacity, que resuelve el compositor:
   esto corre con el dedo puesto y no puede costar un reflow por evento. */
.voz-pista-fijar {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-container-lowest);
  border: 2px solid var(--outline-variant);
  box-shadow: var(--shadow-elevated);
  color: var(--on-surface-variant);
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%) translateX(calc(var(--avance, 0) * -10px));
  opacity: calc(0.45 + var(--avance, 0) * 0.55);
}

.voz-pista-fijar .material-symbols-outlined { font-size: 18px; }

/* El candado de la pista se enciende conforme se acerca el umbral: es la
   única forma de saber cuánto falta sin soltar y probar. */
.voz-pista-fijar .material-symbols-outlined:last-child {
  color: color-mix(in srgb, var(--success) calc(var(--avance, 0) * 100%), var(--outline));
}

/* ── El semáforo ──────────────────────────────────────────────────────
   Tres señales por estado —color, icono y etiqueta de texto— porque a
   contraluz y con guantes el color solo no basta. El icono y el texto los
   cambia renderBurbuja() en /js/ptt-voz.js; aquí van el color y el anillo.
   Los colores son los del código único de arriba (--voz-*). */

/* Libre: puedes hablar. Verde, sin anillo — el estado de reposo no grita. */
.voz-burbuja[data-estado='libre'] { background: var(--voz-listo); }

/* Escuchando: otro tiene la palabra. Azul con anillo fino, para que se note
   que pasa algo sin confundirse con "estás al aire". Era ámbar, y el ámbar
   se leía como aviso de fallo; además quedaba pegado al naranja del botón
   flotante. El azul es el mismo de "Hablando ahora" en el panel. Icono
   blanco sobre --info (#1a4fb0): ~7:1. */
.voz-burbuja[data-estado='escuchando'] {
  background: var(--voz-escucha);
  color: #fff;
  box-shadow: 0 6px 16px rgba(20, 24, 38, 0.3), 0 0 0 3px rgba(26, 79, 176, 0.4);
}

/* Entrar: se está en la radio de OTRA atención, no en la de esta. Blanco con
   borde azul marino: es un botón "apagado" que invita a encenderlo, y no se
   parece a ningún estado de "puedes hablar". */
.voz-burbuja[data-estado='entrar'] {
  background: var(--surface-container-lowest);
  color: var(--primary);
  box-shadow: 0 6px 16px rgba(20, 24, 38, 0.3), inset 0 0 0 3px var(--primary);
}

/* Al aire. Rojo pleno y anillo grueso que late: es el estado en el que
   equivocarse significa creer que no te oyen cuando sí.

   El anillo es un ::after que escala, NO un box-shadow animado. Animar el
   `spread` de una sombra obliga al hilo principal a rasterizar el círculo y su
   caja en cada fotograma: 60 repintados por segundo, y en manos libres el
   micrófono puede quedar abierto 90 segundos seguidos (CORTE_AUTOMATICO_MS),
   o sea ~5.400 repintados por transmisión en una tableta a pleno sol con el
   brillo al máximo. `transform` y `opacity` los resuelve el compositor sin
   tocar el hilo principal ni gastar esa batería.

   El ::after va DETRÁS (z-index -1) y con pointer-events:none para no robarle
   el toque al botón, que es lo único que no puede fallar aquí. */
.voz-burbuja[data-estado='transmitiendo'] {
  background: var(--voz-aire);
  isolation: isolate;
  /* Crece mientras se transmite. En pruebas de plataforma el operador no
     veía que el botón había "agarrado": a 56px el cambio de color bajo el
     pulgar pasaba inadvertido y soltaban creyendo que ya estaba. Grande y
     rojo, se ve alrededor del dedo y se entiende que hay que mantenerlo.
     Con la burbuja ya en 72px basta con 1.3 (≈94px, lo mismo que daba 1.5
     sobre 56); más tapaba media columna de actividades.
     `transform` y no width/height: lo resuelve el compositor y no mueve
     nada más de la pantalla. Crece casi todo hacia la izquierda (origen
     pegado al borde derecho) para que el anillo que late no se corte contra
     el borde de la pantalla. */
  transform: scale(1.3);
  transform-origin: 90% 50%;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.14s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .voz-burbuja[data-estado='transmitiendo'] { transition: none; }
}

.voz-burbuja[data-estado='transmitiendo']::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(186, 26, 26, 0.4);
  pointer-events: none;
  animation: voz-latido-burbuja 1.1s ease-in-out infinite;
}

@keyframes voz-latido-burbuja {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.22); opacity: 0.45; }
}

.voz-burbuja[data-estado='conectando'],
.voz-burbuja[data-estado='reconectando'] {
  background: var(--voz-conectando);
}

/* Reconectando: gira el icono. No es decoración — distingue de un vistazo
   "todavía no te oyen" de "ya te oyen". */
.voz-burbuja[data-estado='reconectando'] .voz-burbuja-ico {
  animation: voz-gira 1.4s linear infinite;
}

@keyframes voz-gira { to { transform: rotate(360deg); } }

/* Sin radio: no te están oyendo. Casi negro con anillo rojo grueso y FIJO,
   icono blanco de sin señal y la etiqueta "Sin radio · toca". Era un gris
   claro con borde rojo, y a pleno sol se confundía con el gris de
   "conectando": la caída pasaba por un rato de espera. El negro no se parece
   a ningún otro estado y es el de más contraste con cualquier fondo. */
.voz-burbuja[data-estado='caido'] {
  background: var(--voz-sin-radio);
  color: #fff;
  box-shadow: 0 6px 16px rgba(20, 24, 38, 0.35), 0 0 0 5px var(--voz-sin-radio-borde);
}

/* En pantallas muy estrechas la burbuja encoge, pero no por debajo de 64px:
   sigue siendo el objetivo que se busca con guantes. El breakpoint es 340px,
   el mismo de .op-fab-toggle en atender.css, para que los dos cambien a la
   vez. */
@media (max-width: 340px) {
  .voz-burbuja { right: 12px; width: 64px; height: 64px; }
  .voz-burbuja-ico .material-symbols-outlined { font-size: 32px; }
  .voz-burbuja-ico .girag-svg-icon { width: 34px; height: 34px; }
  .voz-burbuja-etiqueta { font-size: 12px; padding: 6px 10px; max-width: calc(100vw - 64px - 12px - 10px - 12px); }
}

/* Texto solo para lectores de pantalla (el estado cantado). */
.voz-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── El panel ─────────────────────────────────────────────────────────
   Hereda .modal-overlay/.modal-sheet de tarjeta-azul.css: mismo fondo, mismas
   esquinas, misma animación que cualquier otra hoja de la aplicación. Aquí
   solo va el espaciado propio. */
.voz-panel { display: flex; flex-direction: column; gap: 12px; }

/* Interruptor de los tonos del radio, en la cabecera junto a cerrar. Mide 44px
   —el mínimo táctil— y NO va en la fila de acciones: allí un tercer botón
   dejaba a los tres en ~115px y "Manos libres" se partía en dos líneas.
   El estado no se fía solo del color: cambia el icono (volume_up / volume_off)
   y lleva aria-pressed, que es lo que lee un lector de pantalla. */
.voz-barra-btn {
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.voz-barra-btn:hover { background: var(--surface-container-high); }

/* Silenciado: se apaga de verdad, para que se note de un vistazo que este
   vuelo va sin tonos. */
.voz-barra-btn[aria-pressed='false'] {
  background: var(--surface-container);
  color: var(--outline);
}

.voz-bloque {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Las atenciones en las que estás ──────────────────────────────────
   Solo aparece con más de una sala, o en el Home, donde no hay atención
   propia y esta lista ES el panel. Cada fila dice de qué vuelo se trata, qué
   está pasando ahí y trae su propia salida: poder irse de una sin irse de
   todas es la mitad del sentido de tener varias. */
.voz-salas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voz-sala {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  border: 2px solid transparent;
}

.voz-sala .material-symbols-outlined { flex: none; font-size: 22px; color: var(--on-surface-variant); }

.voz-sala-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.voz-sala-nombre { font-size: 14px; font-weight: 800; color: var(--on-surface); overflow-wrap: anywhere; }
.voz-sala-estado { font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }

/* La atención abierta es la única donde se puede hablar, así que se marca:
   con tres salas iguales en la lista, no saber en cuál se transmite sería
   justo el error que este diseño evita. */
.voz-sala[data-propia='si'] {
  border-color: var(--primary);
  background: var(--surface-container);
}

/* Esta regla NO puede ir después de [data-propia]: pisaba el borde azul de la
   atención abierta y dejaba la lista sin decir en cuál se puede hablar. */
.voz-sala[data-fase='caido'] { border-color: var(--error); }
.voz-sala[data-fase='caido'] .voz-sala-estado { color: var(--error); font-weight: 800; }

.voz-sala-salir {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--error);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.voz-sala-salir:hover { background: var(--error-container); }
.voz-sala-salir .material-symbols-outlined { color: inherit; font-size: 20px; }

/* ── Avisos ───────────────────────────────────────────────────────────
   .voz-aviso es la advertencia que se LEE antes de entrar; .voz-alerta es
   el grito de "no te están oyendo" y por eso va en rojo pleno. */
.voz-aviso {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--warning-container);
  color: var(--on-warning-container);
  border-left: 5px solid var(--warning);
  font-size: 13px;
  line-height: 1.4;
}

.voz-aviso .material-symbols-outlined { flex: none; font-size: 22px; }
.voz-aviso-titulo { font-weight: 800; display: block; margin-bottom: 2px; }
.voz-aviso p { margin: 0; }

.voz-aviso--info {
  background: var(--info-container);
  color: var(--on-info-container);
  border-left-color: var(--info);
}

.voz-alerta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--error);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  text-transform: uppercase;
}

.voz-alerta .material-symbols-outlined { flex: none; font-size: 26px; }

/* ── Quién habla ──────────────────────────────────────────────────────
   En grande y con el nombre completo: es lo que el operador mira para
   saber si puede hablar o si está pisando a alguien. */
.voz-hablante {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  border: 2px solid transparent;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.voz-hablante-etiqueta {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-surface-variant);
}

.voz-hablante-nombre {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--on-surface);
  overflow-wrap: anywhere;
}

.voz-hablante[data-activo='si'] {
  background: var(--info-container);
  border-color: var(--info);
}

.voz-hablante[data-activo='si'] .voz-hablante-nombre { color: var(--on-info-container); }

/* ── El botón de hablar del panel ─────────────────────────────────────
   96px de alto y ancho completo de la hoja. El mínimo con guantes de rampa
   son ~72px (no los 44px de una interfaz normal), así que esto lo supera con
   holgura. Antes eran 128px porque era el ÚNICO sitio donde se podía hablar;
   ahora el pulsador de todos los días es la burbuja y este es el objetivo
   cómodo de escritorio y el que queda a mano con el panel abierto.

   touch-action:none es obligatorio, no cosmético: sin él, arrastrar el dedo
   sobre el botón lo interpreta el navegador como scroll y CANCELA el
   pointer, o sea el micrófono se cierra solo a mitad de frase.
   user-select/-webkit-touch-callout evitan que mantener pulsado dispare la
   selección de texto o el menú contextual de iOS encima del botón. */
.voz-ptt {
  width: 100%;
  min-height: 96px;
  /* Libre: el mismo verde que la burbuja. Era azul marino, y "puedes
     hablar" tenía un color en el círculo y otro aquí. */
  border: 3px solid var(--voz-listo);
  border-radius: var(--radius-lg);
  background: var(--voz-listo);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  padding: 10px;
}

.voz-ptt .material-symbols-outlined { font-size: 44px; }

.voz-ptt-texto {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.2;
}

.voz-ptt-sub {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
  text-align: center;
}

/* Transmitiendo. Rojo pleno + anillo grueso + texto distinto: tres señales
   para un solo estado, porque equivocarse aquí significa creer que te oyen.
   Era naranja y la burbuja rojo: ahora "al aire" es rojo en los dos. */
.voz-ptt[data-estado='transmitiendo'] {
  background: var(--voz-aire);
  border-color: var(--on-error-container);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(186, 26, 26, 0.35);
}

/* Otro está hablando: el botón NO se deshabilita (en un PTT real se puede
   pisar a otro, y a veces hay que hacerlo). Azul, el mismo de la burbuja y
   de "Hablando ahora". */
.voz-ptt[data-estado='ajeno'] {
  background: var(--voz-escucha);
  border-color: var(--voz-escucha);
  color: #fff;
}

.voz-ptt[data-estado='bloqueado'] {
  background: var(--surface-container);
  border-color: var(--outline-variant);
  color: var(--on-surface-variant);
  cursor: not-allowed;
}

/* El latido solo existe para reforzar "estás al aire" en visión periférica.
   Es decorativo: el color, el icono y el texto ya dicen lo mismo, así que
   suprimirlo no quita información (ver el bloque de prefers-reduced-motion
   al final). */
@keyframes voz-latido {
  0%, 100% { box-shadow: 0 0 0 4px rgba(186, 26, 26, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(186, 26, 26, 0.18); }
}

.voz-ptt[data-estado='transmitiendo'] { animation: voz-latido 1.1s ease-in-out infinite; }

/* ── Entrar / salir / manos libres ────────────────────────────────── */
.voz-entrar {
  width: 100%;
  min-height: 72px;
  border: 3px solid var(--primary);
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px;
}

.voz-entrar[disabled] { opacity: 0.6; cursor: progress; }
.voz-entrar .material-symbols-outlined { font-size: 28px; }
.voz-entrar-ico { display: grid; place-items: center; }
.voz-entrar-ico .girag-svg-icon { width: 28px; height: 28px; }

.voz-acciones {
  display: flex;
  gap: 8px;
}

.voz-accion {
  flex: 1 1 0;
  min-height: 48px;
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 8px;
}

.voz-accion .material-symbols-outlined { font-size: 20px; }

/* Manos libres activo: cambia el MODO del botón grande (de mantener
   pulsado a tocar para abrir/cerrar), así que tiene que verse encendido. */
.voz-accion[aria-pressed='true'] {
  background: var(--info-container);
  border-color: var(--info);
  color: var(--on-info-container);
}

.voz-accion--salir { border-color: var(--error); color: var(--on-error-container); }

/* ── Primera vez: cómo se habla ───────────────────────────────────────
   Tres pasos con icono grande. Se lee una vez, de pie en plataforma: pocas
   palabras, el verbo en negrita y el icono en el color de "listo" para que
   se asocie con el círculo verde que se va a apretar. */
.voz-onboarding {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.voz-onboarding-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--on-surface);
}

.voz-onboarding-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voz-onboarding-paso {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
}

.voz-onboarding-paso .material-symbols-outlined {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: var(--voz-listo);
  color: #fff;
}

.voz-onboarding-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.voz-onboarding-texto strong { font-size: 16px; font-weight: 800; color: var(--on-surface); }
.voz-onboarding-texto span { font-size: 13px; line-height: 1.35; color: var(--on-surface-variant); }

/* "Entendido" hereda .voz-entrar (72px, ancho completo): el mismo objetivo
   grande que "Encender radio", en el mismo verde de "listo". */
.voz-onboarding-ok { border-color: var(--voz-listo); background: var(--voz-listo); }

/* ── Participantes ────────────────────────────────────────────────── */
.voz-participantes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.voz-participante {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  font-size: 12px;
  font-weight: 700;
  color: var(--on-surface);
  overflow-wrap: anywhere;
}

.voz-participante[data-hablando='si'] {
  background: var(--info-container);
  border-color: var(--info);
  color: var(--on-info-container);
}

.voz-participante[data-yo='si'] {
  border-style: dashed;
  border-color: var(--outline);
}

.voz-participante .material-symbols-outlined { font-size: 16px; }

.voz-nota {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--on-surface-variant);
}

.voz-nota strong { color: var(--on-surface); }

/* El contenedor de los <audio> de los demás participantes: existe en el DOM
   pero no se ve ni ocupa sitio. No lleva [hidden] porque un elemento
   display:none no reproduce audio de forma fiable en todos los navegadores. */
.voz-audios {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ── prefers-reduced-motion ───────────────────────────────────────────
   Igual que el resto de la aplicación. Se suprime el latido y se deja el
   anillo FIJO en su tamaño grande: el estado "al aire" sigue viéndose
   exactamente igual de fuerte, solo deja de moverse. */
@media (prefers-reduced-motion: reduce) {
  .voz-ptt[data-estado='transmitiendo'] {
    animation: none;
    box-shadow: 0 0 0 8px rgba(186, 26, 26, 0.3);
  }

  /* La burbuja deja de latir y de girar, pero el anillo se queda FIJO en su
     tamaño grande: "estás al aire" sigue viéndose exactamente igual de
     fuerte, solo deja de moverse. */
  .voz-burbuja[data-estado='transmitiendo']::after {
    animation: none;
    transform: scale(1.12);
    opacity: 0.85;
  }

  .voz-burbuja[data-estado='reconectando'] .voz-burbuja-ico { animation: none; }
  .voz-burbuja[data-arrastrando='si'] { transform: none; }
}