/* videollamada.css — la videollamada pregrabada del final del N1 (assets/js/videollamada.js, rama cierre-videollamada).
   Estética de videollamada: el empleado en un recuadro grande, tu cámara y micrófono apagados en una miniatura,
   subtítulos abajo y la barra de la llamada (Subtítulos · Saltear · Cortar). Sin micrófono: sólo se escucha. */
body.vl-abierta{overflow:hidden}
.vl{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:max(14px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  background:radial-gradient(120% 80% at 50% 0%,#0d1514 0%,var(--bg,#07090a) 70%);
  animation:vl-entra .45s cubic-bezier(.2,.8,.2,1) both;--vl-nivel:0}
@keyframes vl-entra{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.vl.vl-fin{animation:vl-sale .9s ease both}
@keyframes vl-sale{0%{opacity:1}60%{opacity:1;filter:grayscale(1) brightness(.6)}100%{opacity:0}}

.vl-tile{position:relative;width:min(100%,1080px);flex:1 1 auto;max-height:calc(100dvh - 120px);min-height:0;
  border-radius:22px;overflow:hidden;background:#0b0f0f;border:1px solid var(--borde,rgba(255,255,255,.09));
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.vl-foto,.vl-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.vl-clip{opacity:0;transition:opacity .3s ease}
.vl .vl-clip-reposo{opacity:1}
.vl.vl-hablando .vl-clip-hablando{opacity:1}
.vl.vl-hablando .vl-clip-reposo{opacity:0}
.vl-sombra{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,transparent 18%,transparent 55%,rgba(0,0,0,.78) 100%)}
/* hablando: un borde verde agua que late con el nivel real de la voz (como el "está hablando" de una videollamada) */
.vl-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 calc(1px + var(--vl-nivel) * 3px) rgba(79,227,198,calc(.15 + var(--vl-nivel) * .7));opacity:0;transition:opacity .25s}
.vl.vl-hablando .vl-tile::after{opacity:1}

.vl-arriba{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:8px;align-items:center}
.vl-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;font-size:13px;
  background:rgba(8,12,12,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);color:var(--texto,#f3f5f4)}
.vl-chip b{font-weight:500;color:var(--acento,#4fe3c6);font-variant-numeric:tabular-nums}
.vl-chip-demo{color:var(--warn,#f2c66d);border-color:rgba(242,198,109,.45)}
.vl-rec{width:8px;height:8px;border-radius:50%;background:var(--acento,#4fe3c6);box-shadow:0 0 0 0 rgba(79,227,198,.6);animation:vl-pulso 1.6s infinite}
@keyframes vl-pulso{0%{box-shadow:0 0 0 0 rgba(79,227,198,.55)}70%{box-shadow:0 0 0 8px rgba(79,227,198,0)}100%{box-shadow:0 0 0 0 rgba(79,227,198,0)}}

.vl-nombre{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 9px;border-radius:10px;
  background:rgba(8,12,12,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:500;font-size:14px}
.vl-ondas{display:inline-flex;gap:2px;align-items:center;height:14px}
.vl-ondas i{width:3px;height:4px;border-radius:2px;background:var(--acento,#4fe3c6);opacity:.5;transition:height .08s}
.vl.vl-hablando .vl-ondas i{opacity:1;animation:vl-onda .9s ease-in-out infinite}
.vl.vl-hablando .vl-ondas i:nth-child(2){animation-delay:.15s}.vl.vl-hablando .vl-ondas i:nth-child(3){animation-delay:.3s}.vl.vl-hablando .vl-ondas i:nth-child(4){animation-delay:.45s}
@keyframes vl-onda{0%,100%{height:4px}50%{height:calc(6px + var(--vl-nivel) * 10px + 3px)}}

/* tu miniatura: cámara y micrófono apagados (no hay micrófono: sólo escuchás) */
.vl-yo{position:absolute;right:14px;bottom:14px;width:clamp(96px,22%,168px);aspect-ratio:4/3;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:#121817;border:1px solid rgba(255,255,255,.12);color:var(--texto-3,#7f8986);font-size:12px}
.vl-yo>svg{width:22px;height:22px}
.vl-yo span{color:var(--texto-2,#b9c1bf);font-weight:500}
.vl-yo em{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:11px;color:var(--texto-3,#7f8986)}
.vl-yo em svg{width:12px;height:12px}
.vl svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.vl-subs{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(14px + 56px);width:min(92%,760px);margin:0;
  text-align:center;font-size:clamp(16px,1.6vw,20px);line-height:1.4;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.6)}
.vl-subs.vl-aparece{animation:vl-sub .3s ease both}
@keyframes vl-sub{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translateX(-50%)}}
.vl.vl-sin-subs .vl-subs{display:none}

.vl-barra{display:flex;gap:10px;justify-content:center;flex:0 0 auto}
.vl-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px;border-radius:999px;cursor:pointer;
  font:500 14.5px var(--font,system-ui);color:var(--texto,#f3f5f4);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.vl-btn svg{width:19px;height:19px}
.vl-btn:hover{background:rgba(255,255,255,.12)}
.vl-btn:focus-visible{outline:2px solid var(--acento,#4fe3c6);outline-offset:2px}
.vl-btn[aria-pressed="false"]{opacity:.55}
.vl-btn-fin{background:#e5534b;border-color:#e5534b;color:#fff}
.vl-btn-fin:hover{background:#d0443c}

@media (max-width:640px){
  .vl{gap:10px}
  .vl-tile{border-radius:18px;max-height:calc(100dvh - 96px)}
  .vl-subs{font-size:16px;bottom:calc(12px + 92px)}
  .vl-yo{width:92px}
  .vl-btn{height:46px;padding:0 14px}
  .vl-btn span{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .vl,.vl.vl-fin,.vl-subs.vl-aparece,.vl-rec,.vl.vl-hablando .vl-ondas i{animation:none}
  .vl-clip{display:none}
}