/* La llamada con Pepe: una pantalla que ocupa el panel mientras dura, encima de
   todo, como el taller de cursos. Usa los colores del panel (también en oscuro).
   Sin estilos en línea: todo va por clase. */

.llamada {
  position: fixed; inset: 0; z-index: 55; overflow: auto;
  background: var(--fondo); color: var(--texto);
  display: flex; justify-content: center; align-items: flex-start; padding: 24px 16px;
}
.llamada[hidden] { display: none; }
body.llamada-abierta { overflow: hidden; }

.llamada-caja {
  width: 100%; max-width: 760px; display: grid; gap: 12px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 20px;
}
.llamada-caja .encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.llamada-caja h2, .llamada-caja h3, .llamada-caja p { margin: 0; }
.llamada-caja h2 { font-size: 20px; }
.llamada-caja [tabindex="-1"]:focus { outline: none; }

.llamada-reloj { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--tenue); font-size: 15px; }

.llamada .con-quien { color: var(--tenue); }
.llamada .con-quien strong { color: var(--texto); }

/* Una línea de estado, la que dice qué pasa ahora: «Pepe habla», «Te escucho». */
.llamada-estado {
  font-size: 18px; font-weight: 600; color: var(--acento);
  padding: 8px 12px; border-radius: 8px; background: var(--acento-suave);
}

.llamada-subtitulos { min-height: 160px; max-height: 45vh; background: var(--fondo); border-radius: 8px; padding: 10px; margin: 0; }
.llamada-subtitulos .quien { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
/* Lo que se va entendiendo antes de ser un turno, y lo que no llegó a Pepe. */
.burbuja.parcial { opacity: var(--apagado); font-style: italic; }
.burbuja.no-enviado { border: 1px dashed var(--borde); background: transparent; }

/* Qué se quiere hacer: platicar con el coach o practicar con un cliente. La elegida se ve marcada. */
.opciones-de-llamada { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.opciones-de-llamada .opcion { display: grid; gap: 4px; align-content: start; }
.opcion-de-llamada {
  width: 100%; text-align: left; font-size: 16px; padding: 12px;
  background: var(--superficie); color: var(--texto); border: 2px solid var(--borde);
}
.opcion-de-llamada[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-suave); }
.llamada .de-platica, .llamada .de-la-practica { display: grid; gap: 10px; }
.llamada .de-platica[hidden], .llamada .de-la-practica[hidden] { display: none; }

.campo-de-llamada { display: grid; gap: 4px; }
.campo-de-llamada > span { color: var(--tenue); font-size: 13px; }
.campo-de-llamada select, .campo-de-llamada input { width: 100%; }
.llamada .de-empresa, .llamada .de-practica { display: grid; gap: 10px; }
.llamada .de-empresa[hidden], .llamada .de-practica[hidden], .llamada .campo-de-llamada[hidden] { display: none; }

.controles-de-la-llamada { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.controles-de-la-llamada button[hidden] { display: none; }
.llamada .formulario[hidden] { display: none; }

/* Lo que solo lee un lector de pantalla: lo que Pepe dijo y no se pudo oír. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}