/* 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-wrap { position: relative; width: 30%; max-width: 150px; min-width: 56px; aspect-ratio: 1; flex: none; }
.rtc-av { width: 100%; height: 100%; 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-wrap { display: none; }
.rtc-tile.is-screen .rtc-video { object-fit: contain; }
.rtc-tile.mirror .rtc-video, .rtc-selfvid.mirror { transform: scaleX(-1); }
.rtc-st { position: absolute; right: -2px; bottom: -2px; width: 28%; min-width: 18px; max-width: 36px; aspect-ratio: 1; border-radius: 50%; background: #111214; padding: 3px; box-sizing: border-box; object-fit: contain; z-index: 2; }
.rtc-st-i { width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; border-radius: 50%; object-fit: contain; }
.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; }

/* ── móvil: cuadrícula de fichas que rellena la pantalla (1-2 apiladas, 3+ en 2 columnas) ── */
@media (max-width: 768px) {
  .vc-content { padding: 12px; }
  .vc-content.multi { display: grid !important; grid-template-columns: 1fr !important; grid-auto-rows: minmax(0, 1fr); gap: 8px; align-content: stretch; align-items: stretch; justify-content: stretch; overflow: hidden; }
  .vc-content[data-n="3"].multi, .vc-content[data-n="4"].multi, .vc-content[data-n="5"].multi, .vc-content[data-n="6"].multi,
  .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(2, minmax(0, 1fr)) !important; }
  .vc-content[data-n="3"].multi .rtc-tile:last-child, .vc-content[data-n="5"].multi .rtc-tile:last-child, .vc-content[data-n="7"].multi .rtc-tile:last-child, .vc-content[data-n="9"].multi .rtc-tile:last-child { grid-column: 1 / -1; }
  .vc-content.multi .vc-my-card { width: 100% !important; height: 100%; max-width: none !important; min-height: 0; aspect-ratio: auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
  .vc-content.multi .rtc-tile { aspect-ratio: auto; width: 100%; height: 100%; min-height: 0; }
  .vc-content.multi .vc-my-avatar-row { padding: 0; }
  .vc-content.multi .vc-avatar-wrap, .vc-content.multi .vc-my-avatar { width: clamp(52px, 22vw, 96px); height: clamp(52px, 22vw, 96px); }
  .vc-content.multi .vc-my-status-badge { width: 18px; height: 18px; }
  .vc-content.multi .vc-my-name { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 8px; background: rgba(0,0,0,.65); font-size: .78rem; font-weight: 600; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; }
  .vc-content.multi .vc-mic-indicator { width: 28px; height: 28px; top: 8px; right: 8px; }
  .vc-content.multi .rtc-name { left: 8px; bottom: 8px; font-size: .78rem; padding: 3px 8px; }
  .vc-content.multi .rtc-flags { right: 8px; bottom: 8px; }
  /* yo solo (sin otros): con cámara/pantalla la ficha no se colapsa */
  .vc-content:not(.multi) .vc-my-card.has-video { width: 100%; max-width: none; height: 100%; max-height: 100%; }
  .vc-content:not(.multi) .vc-my-name { z-index: 2; }
  .vc-my-card.has-video .vc-my-name { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 8px; background: rgba(0,0,0,.65); font-size: .8rem; z-index: 2; }
  /* llamada de MD */
  .rtc-grid { grid-auto-rows: minmax(0, 1fr); align-content: stretch; gap: 8px; padding-bottom: 8px; }
  .rtc-grid:not([data-n="1"]):not([data-n="2"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rtc-grid .rtc-tile { aspect-ratio: auto; height: 100%; min-height: 0; }
  .rtc-grid[data-n="3"] .rtc-tile:last-child, .rtc-grid[data-n="5"] .rtc-tile:last-child { grid-column: 1 / -1; }
}
html.lock-mobile-layout .vc-content { padding: 12px; }
html.lock-mobile-layout .vc-content.multi { display: grid !important; grid-template-columns: 1fr !important; grid-auto-rows: minmax(0, 1fr); gap: 8px; align-content: stretch; align-items: stretch; justify-content: stretch; overflow: hidden; }
html.lock-mobile-layout .vc-content.multi:not([data-n="2"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html.lock-mobile-layout .vc-content[data-n="3"].multi .rtc-tile:last-child, html.lock-mobile-layout .vc-content[data-n="5"].multi .rtc-tile:last-child { grid-column: 1 / -1; }
html.lock-mobile-layout .vc-content.multi .vc-my-card { width: 100% !important; height: 100%; max-width: none !important; min-height: 0; aspect-ratio: auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
html.lock-mobile-layout .vc-content.multi .rtc-tile { aspect-ratio: auto; width: 100%; height: 100%; min-height: 0; }
html.lock-mobile-layout .vc-content.multi .vc-my-avatar-row { padding: 0; }
html.lock-mobile-layout .vc-content.multi .vc-avatar-wrap, html.lock-mobile-layout .vc-content.multi .vc-my-avatar { width: clamp(52px, 22vw, 96px); height: clamp(52px, 22vw, 96px); }
html.lock-mobile-layout .vc-content.multi .vc-my-name, html.lock-mobile-layout .vc-my-card.has-video .vc-my-name { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 8px; background: rgba(0,0,0,.65); font-size: .78rem; font-weight: 600; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; }
html.lock-mobile-layout .vc-content.multi .vc-mic-indicator { width: 28px; height: 28px; top: 8px; right: 8px; }
html.lock-mobile-layout .vc-content:not(.multi) .vc-my-card.has-video { width: 100%; max-width: none; height: 100%; max-height: 100%; }

/* 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; }

/* ── iconos de estado en la lista de ocupantes + aforo lleno ── */
.rtc-occ-avw { position: relative; width: 22px; height: 22px; flex: none; }
.rtc-occ-st { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: #111214; padding: 1px; box-sizing: content-box; object-fit: contain; }
.voice-limit-badge.full .voice-limit-current { color: #ed4245; }

/* ── vista ampliada de una ficha / transmisión (PC y móvil) ── */
.rtc-tile, .vc-my-card { cursor: pointer; }
.rtc-tile.focused, .vc-my-card.focused { cursor: default; }
.rtc-focus-btn { position: absolute; top: 8px; left: 8px; z-index: 6; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rtc-focus-btn:hover { background: rgba(0,0,0,.82); }
.rtc-focus-btn svg { pointer-events: none; }
.rtc-focus-btn .ic-col { display: none; }
.focused > .rtc-focus-btn .ic-exp { display: none; }
.focused > .rtc-focus-btn .ic-col { display: block; }
@media (hover: hover) {
  .rtc-tile:not(.focused) > .rtc-focus-btn, .vc-my-card:not(.focused) > .rtc-focus-btn { opacity: 0; transition: opacity .12s; }
  .rtc-tile:hover > .rtc-focus-btn, .vc-my-card:hover > .rtc-focus-btn { opacity: 1; }
}
html:root .vc-content.focus-mode, html:root .rtc-grid.focus-mode {
  display: flex !important; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; justify-content: flex-start;
  gap: 8px !important; overflow: hidden !important; grid-template-columns: none !important; --fper: 5; --fth: 66px; --frows: 1;
}
html:root .rtc-grid.focus-mode { padding-bottom: 8px; }
html:root .focus-mode .rtc-tile.focused, html:root .focus-mode .vc-my-card.focused {
  order: -1; flex: 0 0 100% !important; width: 100% !important; max-width: none !important; min-height: 0 !important; max-height: none !important;
  height: calc(100% - var(--frows) * (var(--fth) + 8px)) !important; aspect-ratio: auto !important; box-sizing: border-box; margin: 0;
}
html:root .focus-alone .rtc-tile.focused, html:root .focus-alone .vc-my-card.focused { height: 100% !important; }
html:root .focus-mode .rtc-tile:not(.focused), html:root .focus-mode .vc-my-card:not(.focused) {
  flex: 0 0 calc((100% - (var(--fper) - 1) * 8px) / var(--fper)) !important; width: calc((100% - (var(--fper) - 1) * 8px) / var(--fper)) !important;
  max-width: none !important; height: var(--fth) !important; min-height: 0 !important; aspect-ratio: auto !important; border-radius: 10px; box-sizing: border-box; margin: 0;
}
/* miniaturas: avatar y textos pequeños, sin botón */
html:root .focus-mode .rtc-tile:not(.focused) .rtc-av-wrap { width: 36px; min-width: 0; }
html:root .focus-mode .rtc-tile:not(.focused) .rtc-st { min-width: 12px; padding: 1px; }
html:root .focus-mode .rtc-tile:not(.focused) .rtc-name, html:root .focus-mode .vc-my-card:not(.focused) .vc-my-name { left: 4px; bottom: 4px; font-size: .64rem; padding: 2px 5px; max-width: calc(100% - 8px); }
html:root .focus-mode .rtc-tile:not(.focused) .rtc-flags { right: 4px; bottom: 4px; transform: scale(.8); transform-origin: bottom right; }
html:root .focus-mode :not(.focused) > .rtc-focus-btn, html:root .focus-mode .vc-mic-indicator { display: none !important; }
html:root .focus-mode .vc-my-card:not(.focused) .vc-my-avatar-row { width: 36px !important; min-width: 0 !important; padding: 0 !important; }
html:root .focus-mode .vc-my-card:not(.focused) .vc-avatar-wrap, html:root .focus-mode .vc-my-card:not(.focused) .vc-my-avatar { width: 36px !important; height: 36px !important; font-size: 1rem; }
html:root .focus-mode .vc-my-card:not(.focused) .vc-my-status-badge { width: 14px; height: 14px; border-width: 1.5px; }
html:root .focus-mode .vc-my-card.focused .vc-mic-indicator { display: flex !important; }
/* ampliada: se ve entera (sin recortar) */
.rtc-tile.focused .rtc-video, .vc-my-card.focused .rtc-selfvid { object-fit: contain; background: #000; }
@media (min-width: 769px) {
  html:not(.lock-mobile-layout):root .vc-content.focus-mode, html:not(.lock-mobile-layout):root .rtc-grid.focus-mode { --fper: 6; --fth: 100px; }
  html:not(.lock-mobile-layout):root .focus-mode .rtc-tile:not(.focused) .rtc-av-wrap, html:not(.lock-mobile-layout):root .focus-mode .vc-my-card:not(.focused) .vc-my-avatar-row,
  html:not(.lock-mobile-layout):root .focus-mode .vc-my-card:not(.focused) .vc-avatar-wrap, html:not(.lock-mobile-layout):root .focus-mode .vc-my-card:not(.focused) .vc-my-avatar { width: 52px !important; }
  html:not(.lock-mobile-layout):root .focus-mode .vc-my-card:not(.focused) .vc-my-avatar { height: 52px !important; }
}

/* ── muchas personas (más de 9): cuadrícula con scroll, fichas de tamaño fijo ── */
html:root .vc-content.many.multi:not(.focus-mode), html:root .rtc-grid.many:not(.focus-mode) {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; grid-auto-rows: 120px !important;
  align-content: start !important; justify-content: stretch !important; overflow-y: auto !important; overflow-x: hidden !important; gap: 8px !important;
}
html:root .vc-content.many.multi:not(.focus-mode) .rtc-tile, html:root .vc-content.many.multi:not(.focus-mode) .vc-my-card,
html:root .rtc-grid.many:not(.focus-mode) .rtc-tile { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; grid-column: auto !important; min-height: 0; }
@media (min-width: 769px) {
  html:root .vc-content.many.multi:not(.focus-mode), html:root .rtc-grid.many:not(.focus-mode) { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; grid-auto-rows: 150px !important; }
}

/* ampliar: solo con cámara o pantalla activas */
.rtc-tile:not(.has-video) > .rtc-focus-btn, .vc-my-card:not(.has-video) > .rtc-focus-btn { display: none !important; }
.rtc-tile:not(.has-video), .vc-my-card:not(.has-video) { cursor: default; }