/* LA PANTALLA DE LLAMADA (llamada.js; regla del director, 16-oct-2026). Como la de un teléfono: la cara grande, el
   nombre, cómo va la llamada y su tiempo, y abajo silenciar y colgar. Sin bordes ni sombras: se separa por un velo del
   color del fondo y su desenfoque, y todo sale de las variables del tema (claro y oscuro). Por encima de la interfaz y del
   visor (150), por debajo de los diálogos (200). */
.llamada-capa {
  position: fixed; inset: 0; z-index: 180;
  display: grid; place-items: center; padding: 24px 16px;
  /* Más tapado que el velo de una hoja: una llamada es una pantalla entera, y sin desenfoque (un WebKit sin
     composición) el chat de detrás no puede competir con la cara. Del color del fondo: negro en oscuro, blanco en claro. */
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2);
  color: var(--texto);
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.llamada-capa.abierta { opacity: 1; }
.llamada-capa.cerrando { opacity: 0; pointer-events: none; }
.llamada-caja {
  width: min(420px, 100%); min-height: min(560px, calc(100dvh - 48px));
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: clamp(24px, 9vh, 88px);
}
.llamada-cara { position: relative; width: 132px; height: 132px; flex: none; }
.llamada-cara > span:not(.llamada-aro),
.llamada-cara .chat-agente-avatar { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 48px; font-weight: 600; background: var(--panel-3); color: var(--texto); position: relative; z-index: 1; }
.llamada-cara img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El aro: respira mientras piensa y se abre con la voz que suena (--nivel, de 0 a 1). */
.llamada-aro {
  position: absolute; inset: -10px; border-radius: 50%; z-index: 0;
  background: var(--realce-fuerte);
  transform: scale(calc(1 + var(--nivel, 0) * .22)); opacity: 0;
  transition: opacity var(--dur-2) var(--ease), transform 90ms linear;
}
.llamada-capa.habla-el .llamada-aro,
.llamada-capa.hablas-tu .llamada-aro { opacity: 1; }
.llamada-capa.piensa .llamada-aro { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .llamada-capa.piensa .llamada-aro { animation: llamada-respira 1.8s var(--ease) infinite; }
}
@keyframes llamada-respira { 0%, 100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.12); opacity: 1; } }
.llamada-nombre { margin-top: 26px; font-size: 28px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; overflow-wrap: anywhere; }
.llamada-linea { margin-top: 8px; display: flex; gap: 8px; justify-content: center; align-items: baseline; font-size: 14px; color: var(--texto-suave); min-height: 20px; }
.llamada-tiempo { font-variant-numeric: tabular-nums; }
.llamada-tiempo:empty { display: none; }
.llamada-tiempo::before { content: '·'; margin-right: 8px; }
.llamada-capa[data-fase="error"] .llamada-estado { color: var(--peligro); }
/* Lo último que se dijo, como un subtítulo: dos líneas como mucho. */
.llamada-sub {
  margin-top: 18px; max-width: 340px; min-height: 40px; font-size: 13.5px; line-height: 1.45; color: var(--texto-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.llamada-sub b { font-weight: 600; color: var(--texto); }
.llamada-acciones { margin-top: auto; padding-bottom: clamp(16px, 6vh, 56px); display: flex; gap: 56px; justify-content: center; }
.llamada-boton { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.llamada-redondo {
  width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--realce-fuerte); color: var(--texto);
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.llamada-redondo svg { width: 26px; height: 26px; }
.llamada-redondo:hover:not(:disabled) { background: color-mix(in srgb, var(--texto) 18%, transparent); }
.llamada-redondo:active:not(:disabled) { transform: scale(.95); }
.llamada-redondo:disabled { opacity: .4; cursor: default; }
.llamada-redondo:focus-visible { outline: 1px solid var(--contraste); outline-offset: 3px; }
.llamada-redondo[aria-pressed="true"] { background: var(--contraste); color: var(--contraste-texto); }
/* Colgar es el rojo de la paleta en los dos temas, con el icono en blanco fijo (como el globo de lo que te espera). */
.llamada-redondo.colgar { background: var(--estado-espera); color: #fff; }
.llamada-redondo.colgar:hover:not(:disabled) { background: color-mix(in srgb, var(--estado-espera) 86%, #000); }
.llamada-redondo.colgar svg { width: 30px; height: 30px; }
.llamada-boton-rotulo { font-size: 12px; color: var(--texto-suave); }
/* En una llamada, la esquina (logo, fallos, comentarios, actualizar) se aparta, como con el visor de archivos. */
html.en-llamada #btn-marca, html.en-llamada #btn-bicho, html.en-llamada #btn-version { visibility: hidden; }
/* El icono de la llamada en la cabecera del chat, apagado si la voz no está activada. */
.chat-icono.sin-voz { opacity: .55; }
/* Lo que se dijo en una llamada se marca así en el chat: el aviso al centro lleva el teléfono delante. */
.msj-evento .evento-llamada { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
@media (max-width: 520px) {
  /* En el teléfono, como una llamada del teléfono: los botones abajo, al alcance del pulgar. */
  .llamada-caja { min-height: calc(100dvh - 48px); }
  .llamada-cara, .llamada-cara > span:not(.llamada-aro), .llamada-cara .chat-agente-avatar { width: 112px; height: 112px; }
  .llamada-nombre { font-size: 24px; }
  .llamada-acciones { gap: 44px; }
}
/* Las voces del equipo, en Configuración → Intelecto → Notas de voz. */
.voces-equipo { margin-top: 18px; display: grid; gap: 6px; max-width: 620px; }
.voces-equipo h4 { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.voz-fila { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 230px) auto; gap: 10px; align-items: center; font-size: 13px; }
.voz-fila .chat-agente-avatar { width: 28px; height: 28px; font-size: 12px; }
.voz-fila select { width: 100%; background: var(--realce); border: 0; color: var(--texto); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; }
.voz-fila select:focus { outline: none; box-shadow: 0 0 0 1px var(--texto-suave); }
.voz-fila .voz-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .voz-fila { grid-template-columns: 28px minmax(0, 1fr) auto; } .voz-fila select { grid-column: 2 / -1; } }