/* Voz y videollamadas: fichas, ventana de llamada de MD, aviso de llamada, ocupantes */
.rtc-tile { position: relative; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; min-width: 0; background: #3a3f8f; box-shadow: inset 0 0 0 3px transparent; transition: box-shadow .12s; }
.rtc-tile.speaking { box-shadow: inset 0 0 0 3px #23a559; }
.rtc-av { width: 30%; max-width: 150px; min-width: 56px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(0,0,0,.25); color: #fff; font-weight: 700; font-size: 1.6rem; }
.rtc-av img { width: 100%; height: 100%; object-fit: cover; }
.rtc-video { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.rtc-tile.has-video .rtc-video { display: block; }
.rtc-tile.has-video .rtc-av { display: none; }
.rtc-tile.is-screen .rtc-video { object-fit: contain; }
.rtc-tile.mirror .rtc-video, .rtc-selfvid.mirror { transform: scaleX(-1); }
.rtc-name { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 60px); background: rgba(0,0,0,.65); color: #fff; padding: 4px 9px; border-radius: 8px; font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtc-flags { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 4px; }
.rtc-flag { width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.65); color: #ed4245; display: grid; place-items: center; }

/* dentro del panel de canal de voz */
.rtc-selfvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; z-index: 0; border-radius: inherit; }
.vc-my-card.has-video .vc-my-avatar-row { display: none !important; }
.vc-my-card.has-video .vc-my-name { z-index: 2; }
.vc-content.multi { display: grid !important; gap: 12px; align-content: center; justify-content: center; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-y: auto; }
.vc-content[data-n="3"].multi, .vc-content[data-n="4"].multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-content[data-n="5"].multi, .vc-content[data-n="6"].multi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vc-content[data-n="7"].multi, .vc-content[data-n="8"].multi, .vc-content[data-n="9"].multi, .vc-content[data-n="10"].multi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vc-content.multi .vc-my-card { width: 100% !important; max-width: none !important; }
.rtc-remotes { display: contents; }
.vc-content:not(.multi) .rtc-remotes { display: none; }
.vc-ctrl-btn.active { background: #fff !important; color: #111 !important; }
@media (max-width: 768px) { .vc-content.multi { grid-template-columns: 1fr !important; } }
html.lock-mobile-layout .vc-content.multi { grid-template-columns: 1fr !important; }

/* ventana de llamada de MD */
#rtcOverlay { display: none; position: fixed; inset: 0; z-index: 2100; background: #000; color: #fff; flex-direction: column; }
#rtcOverlay.open { display: flex; }
.rtc-top { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 20px; flex: none; }
.rtc-title { font-weight: 700; font-size: 1.05rem; }
.rtc-status { color: #949ba4; font-size: .9rem; }
.rtc-grid { flex: 1; min-height: 0; display: grid; gap: 12px; padding: 0 20px; align-content: center; justify-content: center; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-y: auto; }
.rtc-grid[data-n="1"] { grid-template-columns: minmax(0, 720px); }
.rtc-grid[data-n="5"], .rtc-grid[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rtc-bar { flex: none; display: flex; gap: 10px; justify-content: center; align-items: center; padding: 18px 0 max(22px, env(safe-area-inset-bottom)); }
.rtc-btn { width: 54px; height: 50px; border-radius: 15px; border: 0; background: #1d2026; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .12s; }
.rtc-btn:hover { background: #2a2d34; }
.rtc-btn.off { background: #ed4245; }
.rtc-btn.on { background: #fff; color: #111; }
.rtc-btn.end { background: #ed4245; width: 64px; }
.rtc-btn.end:hover { background: #c93538; }
@media (max-width: 768px) { .rtc-grid { grid-template-columns: 1fr; padding: 0 12px; } .rtc-grid[data-n="2"] .rtc-tile { aspect-ratio: 4 / 3; } }

/* aviso de llamada entrante */
#rtcIncoming { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 2200; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 300px; max-width: calc(100vw - 24px); background: #1d2026; color: #fff; border-radius: 16px; box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); animation: rtc-in .25s ease-out; }
@keyframes rtc-in { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.rtc-in-av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 700; flex: none; animation: rtc-pulse 1.4s infinite; }
.rtc-in-av img { width: 100%; height: 100%; object-fit: cover; }
@keyframes rtc-pulse { 0% { box-shadow: 0 0 0 0 rgba(35,165,89,.6); } 100% { box-shadow: 0 0 0 14px rgba(35,165,89,0); } }
.rtc-in-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rtc-in-txt b { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtc-in-txt span { font-size: .8rem; color: #949ba4; }
.rtc-in-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.rtc-in-btn.ok { background: #23a559; } .rtc-in-btn.no { background: #ed4245; }

/* quién está en cada canal de voz (barra lateral) */
#vcConnectedUsers { display: none !important; }
.rtc-occ { list-style: none; margin: 0 0 4px; padding: 0 0 0 30px; }
.rtc-occ-u { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 6px; font-size: .86rem; color: var(--text-muted, #b5bac1); min-width: 0; }
.rtc-occ-av { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: .55rem; font-weight: 700; color: #fff; flex: none; box-shadow: 0 0 0 2px transparent; }
.rtc-occ-av img { width: 100%; height: 100%; object-fit: cover; }
.rtc-occ-u.speaking .rtc-occ-av { box-shadow: 0 0 0 2px #23a559; }
.rtc-occ-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtc-occ-tag { font-size: .6rem; font-weight: 800; background: #ed4245; color: #fff; padding: 1px 5px; border-radius: 4px; }
.rtc-occ-i { color: #ed4245; display: inline-flex; }