/* ═══ VC_PANTALLA_TRES_2026_08 · la videollamada de tres ═══════════════
   Esto va en la hoja de estilos, no en el javascript, y con !important, a
   proposito: asi arregla la pantalla SEA CUAL SEA la version del
   javascript que este publicada. El fallo que se veia era este: la
   rejilla llegaba hasta el borde de abajo, y la barra de botones se
   comia el cuadrante inferior — la persona salia partida por la mitad. */

/* LA BARRA TAPABA EL CUADRANTE DE ABAJO. Yo le habia dado un hueco fijo
   de 136 px, y me quede corto: cuando hay cinco botones no caben en una
   fila, baja uno a la segunda, y la barra pasa a medir mas del doble.

   Adivinar la altura de la barra es el error. Aqui se reparte de verdad:
   la tarjeta es una columna, la barra ocupa LO QUE NECESITE, y la pantalla
   se queda con todo lo que sobra. Sea cual sea el numero de botones. */
.vcs-rtc-card.vcs-rtc-fs {
  display: flex !important; flex-direction: column !important;
  /* align-items: stretch es OBLIGATORIO aqui. La tarjeta de la llamada
     viene con align-items: center de la hoja general, y en una columna eso
     hace que los hijos NO se estiren a lo ancho: toman el ancho de su
     contenido. El area de video se quedaba con ancho cero y la pantalla
     salia entera en negro. */
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: initial !important;
}
.vcs-rtc-fs .vcs-rtc-stage {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  /* Cinturon: pase lo que pase, el area de las personas nunca se queda
     sin sitio. Si algun dia otra regla la aplasta, se vera igual. */
  min-height: 45dvh !important;
}
.vcs-rtc-fs .vcs-rtc-bar {
  position: relative !important;
  bottom: auto !important; left: auto !important; right: auto !important;
  width: 100% !important; box-sizing: border-box !important;
  flex: 0 0 auto !important;
}
/* Y la cabecera se queda flotando encima, sin robar sitio. */
.vcs-rtc-fs .vcs-rtc-top { position: absolute !important; top: 0; left: 0; right: 0; z-index: 3;
  padding: calc(14px + env(safe-area-inset-top)) 16px 22px !important; }

/* La rejilla llena el escenario entero, que ya tiene su sitio justo. */
.vc3-grid {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  bottom: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 5px !important; padding: 5px !important;
}
/* Cada persona llena su cuadrante entero: la imagen se recorta si hace
   falta, pero NO deja franjas ni sale a medias. */
.vc3-grid .tj {
  position: relative !important; border-radius: 18px !important;
  overflow: hidden !important; min-height: 0 !important; min-width: 0 !important;
  display: grid !important; place-items: center !important;
  background: linear-gradient(160deg, #101c3a, #070d1e) !important;
  border: 1px solid rgba(226,232,240,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -20px 40px -24px rgba(0,0,0,.85) !important;
}
/* LA FRANJA DELGADA. Esta era la causa: el recuadro centra lo que hay
   dentro (place-items: center), y una cosa centrada NO se estira — toma su
   tamaño natural. Asi que el "100% de alto" del video no se podia resolver
   y el navegador le daba su altura propia: la de un video apaisado dentro
   de un recuadro alto, o sea una franja en mitad del recuadro.

   Con position:absolute el video deja de ser una cosa centrada y pasa a
   pegarse a los cuatro bordes. Ahi ya no hay nada que interpretar. */
.vc3-grid .tj video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
  background: #070d1e;
}
/* TU recuadro: flotando en la esquina, pequeño, como en WhatsApp.

   OJO con el punto de apoyo, que aqui es lo que decide si queda en su
   sitio o se va volando:
     · .vc3-yo cuelga del escenario, que ocupa la pantalla entera, asi que
       se separa del fondo lo que mide la barra mas un poco.
     · .tj.yo cuelga de la REJILLA, y la rejilla ya termina encima de la
       barra: si le pusiera la misma separacion se subiria el doble y
       quedaria en mitad de la pantalla. A ese le basta con 10 px. */
.vc3-grid .tj.yo, .vc3-yo {
  position: absolute !important;
  right: 12px !important; left: auto !important; top: auto !important;
  width: 96px !important; height: 138px !important;
  grid-column: auto !important; grid-row: auto !important;
  border-radius: 16px !important; overflow: hidden !important; z-index: 6 !important;
  background: linear-gradient(160deg, #101c3a, #070d1e) !important;
  display: grid !important; place-items: center !important;
  border: 1px solid rgba(226,232,240,.4) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px rgba(0,0,0,.6) !important;
}
/* Cada uno con su punto de apoyo. */
.vc3-yo { bottom: 10px !important; }
.vc3-grid .tj.yo { bottom: 10px !important; right: 10px !important; }
.vc3-grid .tj.yo video, .vc3-yo video {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}
.vc3-grid .tj.yo .cara, .vc3-yo .cara { width: 48px !important; height: 48px !important; }
/* Tu propia imagen, en espejo: si te ves al reves, levantas la mano
   derecha y en pantalla se mueve la izquierda. */
#rtc-local-vid { transform: scaleX(-1); }
/* El nombre, en etiqueta redondeada. */
.vc3-grid .tj .nm, .vc3-yo .nm {
  position: absolute !important; left: 10px !important; bottom: 10px !important;
  max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: .76rem; font-weight: 650; color: #fff;
  padding: 4px 10px; border-radius: 99px; background: rgba(4,8,20,.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none;
}
.vc3-yo .nm { left: 6px !important; bottom: 5px !important; font-size: .62rem; padding: 2px 7px; }
.vc3-grid .tj .esp {
  position: absolute !important; right: 10px !important; bottom: 10px !important;
  font-size: .68rem; font-style: normal; font-weight: 700; color: #F6D268;
  padding: 4px 10px; border-radius: 99px; background: rgba(4,8,20,.62);
}
/* De lado, los dos cuadrantes se ponen uno al lado del otro. */
@media (orientation: landscape) {
  .vc3-grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: 1fr !important; }
  .vc3-grid .tj.yo, .vc3-yo { width: 126px !important; height: 88px !important; }
  .vc3-yo, .vc3-grid .tj.yo { bottom: 10px !important; }
}

/* ── Los botones: la plata de VivuCap ──────────────────────────────────
   La misma banda de luz que cruza la marca en la portada. Van sin el
   prefijo de pantalla completa: tienen que verse igual en la llamada de
   voz, en la entrante y en la de video. */
@keyframes vc3-brillo { 0%,100% { background-position: -70% 0, 0 0 } 50% { background-position: 170% 0, 0 0 } }
/* Cinco botones en UNA sola fila: 56 px y menos hueco. Asi la barra es
   baja y a la gente le queda toda la pantalla para verse. */
.vcs-rtc-cbtn {
  width: 56px !important; height: 56px !important; border-radius: 50% !important;
  color: #fff; padding: 0;
  background-repeat: no-repeat; background-size: 220% 100%, 100% 100%;
  background-position: -70% 0, 0 0;
  background-image:
    linear-gradient(101deg, transparent 22%, rgba(255,255,255,.24) 36%, rgba(206,216,228,.10) 44%, transparent 56%),
    linear-gradient(160deg, rgba(226,232,240,.20), rgba(148,163,184,.07)) !important;
  border: 1px solid rgba(226,232,240,.34) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.34) !important;
  transition: transform .18s cubic-bezier(.2,.9,.3,1), filter .18s;
}
.vcs-rtc-cbtn svg { width: 23px; height: 23px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.vcs-rtc-cbtn:active { transform: scale(.9); filter: brightness(1.25); }
.vcs-rtc-cbtn.on {
  color: #0a1020 !important; border-color: rgba(255,255,255,.9) !important;
  background-image:
    linear-gradient(101deg, transparent 24%, rgba(255,255,255,.62) 36%, rgba(226,232,240,.24) 44%, transparent 56%),
    linear-gradient(160deg, #FAFCFF, #CBD5E1 52%, #94A3B8) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 20px -6px rgba(203,213,225,.55) !important;
  animation: vc3-brillo 5.5s ease-in-out infinite;
}
.vcs-rtc-cbtn.on svg { filter: none; }
.vcs-rtc-cbtn.accept {
  width: 64px !important; height: 64px !important; color: #04130b !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  background-image:
    linear-gradient(101deg, transparent 24%, rgba(255,255,255,.3) 36%, transparent 54%),
    linear-gradient(160deg, #5CF0BC, #34D399 55%, #12B981) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 24px -8px rgba(52,211,153,.7) !important;
  animation: vc3-brillo 5.5s ease-in-out infinite;
}
.vcs-rtc-cbtn.accept svg { width: 27px; height: 27px; filter: none; }
.vcs-rtc-cbtn.decline {
  width: 64px !important; height: 64px !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  background-image:
    linear-gradient(101deg, transparent 24%, rgba(255,255,255,.26) 36%, transparent 54%),
    linear-gradient(160deg, #FF5C97, #F0307A 55%, #C81C5E) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 24px -8px rgba(240,48,122,.72) !important;
}
.vcs-rtc-cbtn.decline svg { width: 27px; height: 27px; }
.vcs-rtc-cwrap { gap: 6px !important; min-width: 0 !important; }
.vcs-rtc-cwrap em { font-size: .64rem !important; white-space: nowrap; font-weight: 500 !important;
  color: rgba(226,232,240,.82) !important; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.vcs-rtc-actions { gap: 10px 8px !important; flex-wrap: nowrap !important; }
.vcs-rtc-fs .vcs-rtc-bar {
  gap: 10px 8px !important; flex-wrap: nowrap !important;
  padding: 14px 10px calc(14px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(0deg, rgba(0,0,0,.86), rgba(0,0,0,.5)) !important;
  box-shadow: inset 0 1px 0 rgba(226,232,240,.13);
}
/* El nombre, en UNA linea. Con dos nombres largos ocupaba dos renglones y
   se comia la parte de arriba del primer cuadrante. Si no cabe, se corta
   con puntos suspensivos: es un rotulo, no un titulo. */
.vcs-rtc-fs .vcs-rtc-top .vcs-rtc-name {
  font-size: 1.02rem !important; line-height: 1.25 !important;
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important; max-width: 100% !important;
  font-weight: 600; letter-spacing: -.015em;
  background: linear-gradient(101deg, #FFFFFF 18%, #CBD5E1 42%, #FFFFFF 66%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.vcs-rtc-fs .vcs-rtc-top .vcs-rtc-sub { font-size: .82rem; font-weight: 500;
  color: #67E8F9 !important; letter-spacing: .02em; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* ═══ VC_BOTONES_LLAMADA_2026_09 · aire entre los botones ══════════════
   Los botones se tocaban. Y no era cosa de bajar el hueco unos pixeles:
   era que estaban MAL REPARTIDOS.

   En la videollamada hay seis: Video, Filter, Effect, Mute, Add y End.
   Seis circulos de 56 px con 8 px de hueco piden 376 px de ancho, y un
   telefono normal tiene 360. No cabian, asi que se apretaban unos contra
   otros y las etiquetas de debajo se tocaban entre ellas. Poner "menos
   hueco" era justo lo contrario de lo que hacia falta.

   Lo que se hace aqui:

   1. CINCO O SEIS BOTONES SE REPARTEN EN DOS FILAS DE TRES. Es lo que
      hacen los telefonos de verdad, y por algo: en una sola fila no cabe
      un dedo entre uno y otro. La barra crece, si — pero la pantalla ya
      reparte el sitio sola (la rejilla es flexible), asi que a las caras
      no les quita nada que no sobre.

   2. CON CUATRO O MENOS, UNA SOLA FILA con las columnas del MISMO ancho.
      El hueco deja de ser un numero fijo y pasa a ser lo que sobra,
      repartido a partes iguales. Se ve ordenado en cualquier pantalla.

   3. LAS ETIQUETAS SE CORTAN EN SU COLUMNA. Antes "Golden Hour" debajo
      de un boton de 56 px se salia por los dos lados y chocaba con la
      etiqueta de al lado. Un rotulo que invade al vecino se lee peor que
      un rotulo cortado.

   4. LOS DE CONTESTAR Y COLGAR, cuando estan solos, mas grandes y bien
      separados: son los dos que no se pueden equivocar.

   Se cuenta con nth-last-child, que es CSS puro y funciona en todos los
   telefonos — sin javascript, y sin tocar nada fuera de esta barra. */

.vcs-rtc-actions,
.vcs-rtc-fs .vcs-rtc-bar {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 18px 6px !important;
  padding-left: clamp(10px, 4vw, 26px) !important;
  padding-right: clamp(10px, 4vw, 26px) !important;
}
.vcs-rtc-fs .vcs-rtc-bar {
  padding-top: 16px !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}
/* Columna: todas iguales, y ninguna empuja a la de al lado. */
.vcs-rtc-cwrap {
  flex: 1 1 0 !important; min-width: 0 !important;
  gap: 9px !important; text-align: center;
}
.vcs-rtc-cwrap em {
  display: block; max-width: 100%; padding: 0 2px; box-sizing: border-box;
  font-size: clamp(.58rem, 2.6vw, .7rem) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vcs-rtc-cbtn {
  width: clamp(50px, 14.5vw, 62px) !important;
  height: clamp(50px, 14.5vw, 62px) !important;
}
.vcs-rtc-cbtn svg { width: 24px; height: 24px; }

/* Cinco o seis: dos filas de tres. */
/* El hueco de 6 px cuenta: tres columnas del 33,333 % mas dos huecos
   piden mas del 100 % y la tercera se caeria a otra fila. Se le resta. */
.vcs-rtc-cwrap:first-child:nth-last-child(n+5),
.vcs-rtc-cwrap:first-child:nth-last-child(n+5) ~ .vcs-rtc-cwrap {
  flex: 0 0 calc((100% - 12px) / 3) !important;
}
.vcs-rtc-cwrap:first-child:nth-last-child(n+5) .vcs-rtc-cbtn,
.vcs-rtc-cwrap:first-child:nth-last-child(n+5) ~ .vcs-rtc-cwrap .vcs-rtc-cbtn {
  width: clamp(54px, 15.5vw, 64px) !important;
  height: clamp(54px, 15.5vw, 64px) !important;
}

/* Uno o dos —contestar y colgar—: grandes y lejos uno del otro. */
.vcs-rtc-cwrap:first-child:nth-last-child(-n+2),
.vcs-rtc-cwrap:first-child:nth-last-child(-n+2) ~ .vcs-rtc-cwrap {
  flex: 0 1 46% !important;
}
.vcs-rtc-cwrap:first-child:nth-last-child(-n+2) .vcs-rtc-cbtn,
.vcs-rtc-cwrap:first-child:nth-last-child(-n+2) ~ .vcs-rtc-cwrap .vcs-rtc-cbtn {
  width: clamp(64px, 19vw, 78px) !important;
  height: clamp(64px, 19vw, 78px) !important;
}
.vcs-rtc-cwrap:first-child:nth-last-child(-n+2) .vcs-rtc-cbtn svg,
.vcs-rtc-cwrap:first-child:nth-last-child(-n+2) ~ .vcs-rtc-cwrap .vcs-rtc-cbtn svg {
  width: 30px; height: 30px;
}
/* El de hablar por radio se queda con su fila entera, como estaba. */
.vcs-rtc-fs .vcs-rtc-bar .vcs-rtc-ptt { flex: 0 0 100% !important; order: -1; }