/* ─────────────────────────────────────────────────────────────────────────────
   Pantalla de llamada de voz (VC) — nueva interfaz, móvil y PC
   Se carga la última y usa #voiceCallPanel para ganar a las reglas antiguas.
   Base = móvil. PC (≥769px y sin lock-mobile-layout) se redefine abajo.
   ───────────────────────────────────────────────────────────────────────────── */
#voiceCallPanel {
  --vcx-bg: #000; --vcx-pill: #0a0a0c; --vcx-line: #26292F; --vcx-btn: #1d2026; --vcx-btn-h: #2a2d34;
  --vcx-red: #f23f43; --vcx-red-bg: #3a1417;
  background: var(--vcx-bg) !important; border: 0 !important; box-shadow: none !important;
  display: flex; flex-direction: column; overflow: hidden; color: #fff;
}
#voiceCallPanel.hidden { display: none !important; }

/* ── cabecera ── */
#voiceCallPanel .vc-header {
  position: relative; flex: none; height: 60px; padding: 0 12px; gap: 6px; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: flex-start;
}
#voiceCallPanel .vc-back-btn { display: flex !important; color: #fff; padding: 8px; border-radius: 12px; }
#voiceCallPanel .vc-back-btn:hover { background: var(--vcx-btn); }
#voiceCallPanel .vc-header-info { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; padding: 6px 4px; border-radius: 10px; }
#voiceCallPanel .vc-header-icon { color: #fff; display: flex; }
#voiceCallPanel .vc-channel-name { font-size: 1.12rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#voiceCallPanel .vc-header-chev { color: #c9cdd3; flex: none; margin-left: -2px; }
#voiceCallPanel .vc-header-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #fff; }
#voiceCallPanel .vc-hbtn {
  width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--vcx-btn); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#voiceCallPanel .vc-hbtn:active { transform: scale(.95); }
#voiceCallPanel .vc-h-pin, #voiceCallPanel .vc-h-members, #voiceCallPanel .vc-h-search-txt { display: none; }
#voiceCallPanel .vc-h-star.on { color: #f0b232; }
#voiceCallPanel .vc-h-star.on svg { fill: currentColor; }

/* ── zona central ── */
#voiceCallPanel .vc-content {
  position: relative; inset: auto; flex: 1; min-height: 0; padding: 0 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
#voiceCallPanel .vc-content:not(.multi) .vc-my-card {
  width: 100%; max-width: none; aspect-ratio: 16 / 9; max-height: 100%; margin: 0; padding: 0; border: 0 !important; border-radius: 16px;
  box-shadow: inset 0 0 0 3px transparent !important; display: flex; align-items: center; justify-content: center;
  background: var(--vc-tile, #3a3f8f) !important;
}
#voiceCallPanel .vc-my-card { border-radius: 16px; box-shadow: inset 0 0 0 3px transparent !important; border: 0 !important; transition: box-shadow .12s; }
#voiceCallPanel .vc-my-card.speaking { box-shadow: inset 0 0 0 3px #23a559 !important; }
#voiceCallPanel .vc-my-card .vc-my-banner, #voiceCallPanel .vc-my-card .vc-mic-indicator, #voiceCallPanel .vc-my-tag { display: none !important; }
#voiceCallPanel .vc-my-avatar-row { position: static; width: 19%; min-width: 64px; max-width: 190px; margin: 0 auto !important; padding: 0 !important; }
#voiceCallPanel .vc-avatar-wrap { width: 100%; height: auto; display: block; position: relative; }
#voiceCallPanel .vc-my-avatar { width: 100% !important; height: auto !important; aspect-ratio: 1; border: 0 !important; border-radius: 50%; font-size: clamp(1.4rem, 5vw, 3rem); background: rgba(0,0,0,.25); }
#voiceCallPanel .vc-my-avatar img { width: 100%; height: 100%; object-fit: cover; }
#voiceCallPanel .vc-my-status-badge, #voiceCallPanel .rtc-st { display: none !important; }

/* etiqueta con el nombre: [mic mute] [dispositivo] Nombre (sesión) */
#voiceCallPanel .vc-my-name, #voiceCallPanel .rtc-name {
  position: absolute; left: 8px; bottom: 8px; right: auto; margin: 0; padding: 4px 10px 4px 8px; max-width: calc(100% - 16px);
  display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; background: rgba(0,0,0,.72); color: #fff;
  font-size: .82rem; font-weight: 600; line-height: 1.25; text-shadow: none; white-space: nowrap; overflow: hidden; z-index: 2;
}
#voiceCallPanel .vc-nm-text { overflow: hidden; text-overflow: ellipsis; }
#voiceCallPanel .vc-nm-sess { color: #a3a8b0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
#voiceCallPanel .vc-nm-sess:empty { display: none; }
#voiceCallPanel .vc-nm-mic { display: none; flex: none; }
#voiceCallPanel .vc-my-name.is-muted .vc-nm-mic { display: block; }
#voiceCallPanel .vc-nm-dev { flex: none; opacity: .95; }
#voiceCallPanel .vc-nm-dev-m { display: none; }
html.vc-dev-mobile #voiceCallPanel .vc-nm-dev-pc { display: none; }
html.vc-dev-mobile #voiceCallPanel .vc-nm-dev-m { display: block; }
#voiceCallPanel .rtc-name { padding-left: 10px; }

/* ── barra inferior ── */
#voiceCallPanel .vc-bar {
  position: relative; flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
  padding: 10px 8px calc(12px + env(safe-area-inset-bottom, 0px));
}
#voiceCallPanel .vc-bar-l { display: flex; justify-content: flex-start; }
#voiceCallPanel .vc-bar-r { display: flex; justify-content: flex-end; gap: 8px; }
#voiceCallPanel #vcChatFab, #voiceCallPanel .vc-corner {
  position: relative; left: auto; bottom: auto; width: 40px; height: 40px; padding: 0; background: var(--vcx-pill); color: #fff;
  border: 1px solid var(--vcx-line); border-radius: 50%; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#voiceCallPanel .vc-corner { border-radius: 12px; }
#voiceCallPanel #vcChatFab:hover, #voiceCallPanel .vc-corner:hover { background: var(--vcx-btn); }
#voiceCallPanel #vcChatFab svg { width: 20px; height: 20px; }
#voiceCallPanel .vc-corner svg { width: 20px; height: 20px; }
#voiceCallPanel .vc-pop { display: none; }

#voiceCallPanel .vc-controls {
  position: static; transform: none; left: auto; bottom: auto; width: auto; margin: 0; padding: 6px;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px;
  background: var(--vcx-pill); border: 1px solid var(--vcx-line); border-radius: 18px;
}
#voiceCallPanel .vc-grp { position: relative; display: flex; }
#voiceCallPanel .vc-ctrl-btn {
  width: 36px; height: 38px; padding: 0; border: 0; border-radius: 12px; background: var(--vcx-btn); color: #fff;
  display: grid; place-items: center; transform: none; transition: background .12s; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#voiceCallPanel .vc-ctrl-btn svg { width: 20px; height: 20px; }
#voiceCallPanel .vc-ctrl-btn:hover { background: var(--vcx-btn-h); transform: none; }
#voiceCallPanel .vc-ctrl-btn:active { transform: scale(.95); }
#voiceCallPanel .vc-ctrl-btn.muted { background: var(--vcx-red-bg) !important; color: #ff5459 !important; }
#voiceCallPanel .vc-ctrl-btn.active { background: #fff !important; color: #111 !important; }
#voiceCallPanel .vc-ctrl-camera .ic-cam-on { display: none; }
#voiceCallPanel .vc-ctrl-camera.active .ic-cam-on { display: block; }
#voiceCallPanel .vc-ctrl-camera.active .ic-cam-off { display: none; }
#voiceCallPanel .vc-ctrl-hangup { width: 46px; background: var(--vcx-red) !important; color: #fff !important; }
#voiceCallPanel .vc-ctrl-hangup:hover { background: #d93538 !important; }
#voiceCallPanel .vc-sep { width: 1px; height: 28px; background: rgba(255,255,255,.14); margin: 0 1px; flex: none; }
#voiceCallPanel .vc-chev {
  position: absolute; top: -6px; right: -4px; z-index: 2; width: 17px; height: 17px; padding: 0; border: 1px solid var(--vcx-line); border-radius: 50%;
  background: var(--vcx-pill); color: #d4d7dc; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#voiceCallPanel .vc-chev:hover { background: var(--vcx-btn-h); color: #fff; }

/* modo inmersivo (móvil) */
#voiceCallPanel.vc-immersive .vc-header { display: none; }

/* ── menú de dispositivos ── */
#vcDevMenu {
  position: fixed; z-index: 2300; min-width: 220px; max-width: min(300px, calc(100vw - 16px)); max-height: 50vh; overflow-y: auto; padding: 6px;
  background: #1d2026; color: #fff; border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); font: 500 .86rem 'Inter', sans-serif;
}
#vcDevMenu[hidden] { display: none; }
#vcDevMenu .vdm-h { padding: 6px 10px 4px; color: #949ba4; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
#vcDevMenu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#vcDevMenu button:hover { background: rgba(255,255,255,.08); }
#vcDevMenu button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vcDevMenu button svg { flex: none; color: #23a559; visibility: hidden; }
#vcDevMenu button.sel svg { visibility: visible; }
#vcDevMenu .vdm-empty { padding: 10px; color: #949ba4; }

/* ── PC ── */
@media (min-width: 769px) {
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-header { height: 56px; padding: 0 24px; gap: 12px; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-back-btn, html:not(.lock-mobile-layout) #voiceCallPanel .vc-header-chev { display: none !important; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-header-info { cursor: default; padding: 0; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-channel-name { font-size: 1.05rem; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-header-tools { gap: 8px; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-hbtn { width: 34px; height: 34px; border-radius: 8px; background: transparent; color: #c9cdd3; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-hbtn:hover { background: rgba(255,255,255,.08); color: #fff; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-h-members { display: inline-flex; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-h-star.on { color: #f0b232; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-h-search {
    width: 220px; height: 34px; padding: 0 10px; justify-content: flex-start; border-radius: 8px; background: #17181c; color: #949ba4; font: 500 .86rem 'Inter', sans-serif;
  }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-h-search svg { width: 16px; height: 16px; flex: none; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-h-search-txt { display: inline; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-content { padding: 0 24px; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-content:not(.multi) .vc-my-card { width: min(100%, calc((100vh - 190px) * 16 / 9)); }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-my-avatar-row { width: 18%; max-width: 200px; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-my-name, html:not(.lock-mobile-layout) #voiceCallPanel .rtc-name { font-size: .85rem; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-bar { padding: 12px 16px 24px; }
  html:not(.lock-mobile-layout) #voiceCallPanel #vcChatFab { width: 52px; height: 52px; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-corner { width: 52px; height: 52px; border-radius: 16px; }
  html:not(.lock-mobile-layout) #voiceCallPanel #vcChatFab svg, html:not(.lock-mobile-layout) #voiceCallPanel .vc-corner svg { width: 22px; height: 22px; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-pop { display: grid; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-controls { gap: 8px; padding: 8px; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-ctrl-btn { width: 52px; height: 48px; border-radius: 14px; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-ctrl-btn svg { width: 22px; height: 22px; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-ctrl-hangup { width: 60px; }
  html:not(.lock-mobile-layout) #voiceCallPanel .vc-chev { top: -5px; right: -5px; }
}

/* ── caja «En el chat de voz» de la barra lateral (PC) ── */
#flVcDock .fl-vc-dev { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .82rem; color: #b5bac1; min-width: 0; }
#flVcDock .fl-vc-dev svg { flex: none; }
#flVcDock .fl-vc-dev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#flVcDock .fl-vc-av { margin-top: 8px; display: flex; gap: 6px; }
#flVcDock .fl-vc-av i { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #3a3f8f; color: #fff; font: 700 .8rem 'Inter', sans-serif; font-style: normal; }
#flVcDock .fl-vc-av img { width: 100%; height: 100%; object-fit: cover; }