/* Llamadas (rtc.js): solo lo nuevo del motor · indicador de calidad, estado de reconexión y selector de dispositivos.
   Los estilos base de tiles, panel y botones siguen en oficina.css. Visual definitiva pendiente: aquí solo lo funcional.
   Variables con valor de respaldo para que funcione aunque cambie la paleta. */

/* ── calidad de la conexión (tres barras, abajo a la derecha del recuadro de cada persona) ── */
.rtc-cal { position: absolute; right: 7px; top: 7px; display: flex; align-items: flex-end; gap: 2px; height: 12px; padding: 3px 5px; border-radius: 6px;
  background: rgba(10, 12, 18, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-sizing: content-box; pointer-events: auto; }
.rtc-cal[hidden] { display: none; }
.rtc-cal i { width: 3px; border-radius: 1px; background: var(--ok, #36c47c); opacity: .95; }
.rtc-cal i:nth-child(1) { height: 5px; } .rtc-cal i:nth-child(2) { height: 8px; } .rtc-cal i:nth-child(3) { height: 12px; }
.rtc-cal.regular i { background: var(--warn, #e6b23a); }
.rtc-cal.regular i:nth-child(3) { opacity: .25; }
.rtc-cal.mala i { background: var(--bad, #ef5350); }
.rtc-cal.mala i:nth-child(2), .rtc-cal.mala i:nth-child(3) { opacity: .25; }
.rtc-cal-tx.regular { color: var(--warn, #e6b23a); }
.rtc-cal-tx.mala { color: var(--bad, #ef5350); }

/* ── estado: Conectando… / Reconectando… sobre el recuadro ── */
.rtc-estado { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: var(--tx, #fff); background: rgba(10, 12, 18, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; }
.rtc-estado[hidden] { display: none; }
.rtc-tile.reconectando .rtc-av, .rtc-tile.reconectando video { filter: grayscale(.8) brightness(.7); }
.rtc-tile.reconectando .rtc-estado { animation: rtcLate 1.2s ease-in-out infinite; }
@keyframes rtcLate { 50% { opacity: .55; } }

/* ── selector de micro, cámara y altavoz (junto al panel de llamada) ── */
.rtc-disp { position: absolute; right: 16px; bottom: 156px; z-index: 4; width: min(320px, calc(100vw - 32px)); padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 9px;
  pointer-events: auto; color: var(--tx, #fff); background: var(--glass2, rgba(22, 25, 32, .9)); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  border: 1px solid var(--line2, rgba(255, 255, 255, .12)); border-radius: 18px; box-shadow: var(--sh2, 0 18px 50px rgba(0, 0, 0, .45)); animation: aparece .18s ease-out; }
.rtc-disp[hidden] { display: none; }
.rtc-disp-cab { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.rtc-disp-cab button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: var(--tx2, #aab); font-size: 18px; line-height: 1; cursor: pointer; }
.rtc-disp-cab button:hover { background: rgba(var(--tx-rgb, 255, 255, 255), .08); color: var(--tx, #fff); }
.rtc-disp label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--tx2, #aab); }
.rtc-disp select { width: 100%; min-width: 0; padding: 7px 9px; border-radius: 10px; font: inherit; font-size: 12.5px; color: var(--tx, #fff); background: var(--p3, rgba(255, 255, 255, .06));
  border: 1px solid var(--line2, rgba(255, 255, 255, .12)); outline: none; }
.rtc-disp select:focus { border-color: rgba(var(--acc-rgb, 124, 108, 242), .7); }
.rtc-disp small { font-size: 11px; color: var(--tx3, #889); line-height: 1.35; }
@media (max-width: 700px) { .rtc-disp { right: 8px; left: 8px; width: auto; bottom: 150px; } }