/* =========================================================
   Interfaz de llamada de audio/video — misma lógica visual
   que el prototipo de videollamada P2P, sin barra de navegación
   ni pantallas de configuración: solo lo que se ve mientras
   entra, se contesta y transcurre una llamada real.
   ========================================================= */
#vistaLlamada{
  --bg-deep:#0b0a16; --bg-panel:rgba(255,255,255,0.1); --stroke:rgba(139,92,246,0.3);
  --text-hi:#FFFFFF; --text-lo:rgba(245,247,250,0.7);
  --accent:#8b5cf6; --accent-2:#ec4899; --live-red:#FF453A; --ok-green:#10b981; --warn-yellow:#FEBC2E;
  --safe-top: env(safe-area-inset-top,0px); --safe-bottom: env(safe-area-inset-bottom,0px);
  position:fixed; inset:0; z-index:200; display:none;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  color:var(--text-hi); background:radial-gradient(circle at 50% 20%, #1e113a 0%, #0f172a 60%, #05070c 100%);
}
#vistaLlamada.activa{display:block;}
#vistaLlamada *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
#vistaLlamada button{font-family:inherit; border:none; background:none; color:inherit; cursor:pointer;}
#vistaLlamada svg{display:block;}
#vistaLlamada .hidden{display:none!important;}

#vistaLlamada .ambient{position:fixed; inset:0; z-index:0; overflow:hidden; background:radial-gradient(circle at 50% 20%, #2e1065 0%, #0f172a 65%, #030408 100%);}
#vistaLlamada .orb{position:absolute; border-radius:50%; filter:blur(70px); opacity:.65;}
#vistaLlamada .orb1{width:360px;height:360px;background:radial-gradient(circle,#8b5cf6,transparent 70%);top:-80px;left:-60px;animation:vlDriftA 14s ease-in-out infinite;}
#vistaLlamada .orb2{width:320px;height:320px;background:radial-gradient(circle,#ec4899,transparent 70%);bottom:-70px;right:-60px;animation:vlDriftB 16s ease-in-out infinite;}
@keyframes vlDriftA{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(50px,70px) scale(1.2);}}
@keyframes vlDriftB{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-60px,-40px) scale(1.15);}}

.screen-llamada{position:fixed; inset:0; z-index:10; display:none; flex-direction:column; height:100dvh; height:100vh;}
.screen-llamada.active{display:flex;}

/* ---------- Pantalla de llamada entrante ---------- */
#pantallaEntrante{z-index:40; align-items:center; justify-content:space-between; padding:calc(var(--safe-top) + 40px) 30px calc(var(--safe-bottom) + 30px);}
.incoming-top{text-align:center;}
.incoming-tag{color:var(--text-lo); font-size:14px; font-weight:600; letter-spacing:.3px; margin-bottom:26px;}
.incoming-avatar-wrap{position:relative; width:132px; height:132px; margin:0 auto 22px; display:flex; align-items:center; justify-content:center;}
.incoming-avatar{width:112px;height:112px;border-radius:50%;background:linear-gradient(145deg, #7c3aed, #ec4899);border:2px solid rgba(255,255,255,0.3);box-shadow: 0 0 30px rgba(139,92,246,0.6);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:700;color:var(--text-hi);z-index:2;overflow:hidden;}
.incoming-avatar img{width:100%;height:100%;object-fit:cover;}
.radar-ring{position:absolute; inset:0; border-radius:50%; border:2px solid rgba(139,92,246,.6); animation:vlRingExpand 1.8s ease-out infinite;}
.radar-ring.r2{animation-delay:.6s;} .radar-ring.r3{animation-delay:1.2s;}
@keyframes vlRingExpand{0%{transform:scale(.75);opacity:.9;}100%{transform:scale(1.5);opacity:0;}}
.incoming-name{font-size:26px; font-weight:700; text-align:center;}
.incoming-num{font-size:14px; color:var(--text-lo); text-align:center; margin-top:4px;}
.incoming-actions{display:flex; justify-content:space-between; width:100%; max-width:300px;}
.in-act{display:flex; flex-direction:column; align-items:center; gap:9px;}
.in-act button{width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.in-act button svg{width:26px; height:26px; fill:#fff;}
.in-act.decline button{background:var(--live-red);}
.in-act.accept button{background:var(--ok-green);}
.in-act span{font-size:12px; color:var(--text-lo); font-weight:600;}
.in-act button:active{transform:scale(.9);}

/* ---------- Contenedor principal de la llamada ---------- */
.call-full{position:fixed; inset:0; z-index:20; display:none; flex-direction:column; height:100dvh; height:100vh; transition:opacity .38s ease, transform .38s cubic-bezier(.34,1.3,.64,1);}
.call-full.active{display:flex;}
#vistaLlamada.minimizada .call-full{opacity:0; transform:scale(.88); pointer-events:none;}

.top-bar{padding:calc(var(--safe-top) + 10px) 14px 10px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0;}
.top-btn{width:36px;height:36px;border-radius:50%;background:var(--bg-panel);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;color:var(--text-hi);flex-shrink:0;transition:background .15s, transform .12s;}
.top-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.top-btn:active{transform:scale(.9); background:rgba(255,255,255,.16);}
.status-pill{display:flex;align-items:center;gap:7px;padding:6px 14px;border-radius:20px;background:var(--bg-panel);backdrop-filter:blur(14px);border:1px solid var(--stroke);font-size:13px;font-weight:600;}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--live-red);animation:vlLiveDot 1.6s ease-out infinite;}
@keyframes vlLiveDot{0%{box-shadow:0 0 0 0 rgba(255,69,58,.55);}70%{box-shadow:0 0 0 7px rgba(255,69,58,0);}100%{box-shadow:0 0 0 0 rgba(255,69,58,0);}}
.call-timer{font-variant-numeric:tabular-nums; color:var(--text-lo); font-weight:500;}

.stage-wrap{flex:1; padding:6px 14px 10px; display:flex; min-height:0; position:relative;}

/* Escenario dedicado de audio */
.audio-stage {
  position: absolute;
  inset: 6px 14px 10px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #2e1065 0%, #0f172a 70%, #05070c 100%);
  border-radius: 28px;
  border: 1.5px solid rgba(139, 92, 246, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.audio-pulse-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
  animation: audioPulse 3s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
}
.audio-pulse-ring.r1 { width: 150px; height: 150px; animation-delay: 0s; }
.audio-pulse-ring.r2 { width: 220px; height: 220px; animation-delay: 0.8s; }
.audio-pulse-ring.r3 { width: 290px; height: 290px; animation-delay: 1.6s; }

@keyframes audioPulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  50% { transform: scale(1.18); opacity: 0.4; }
  100% { transform: scale(1.4); opacity: 0; }
}

.audio-avatar-glow {
  position: relative;
  z-index: 2;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 45px rgba(139, 92, 246, 0.65);
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.audio-avatar {
  font-size: 38px;
  font-weight: 800;
  color: #ffffff;
}

.audio-user-name {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  z-index: 2;
}

.audio-status-tag {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--morado-300);
  background: rgba(124, 58, 237, 0.18);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(124, 58, 237, 0.3);
  z-index: 2;
}
.stage{flex:1; border-radius:28px; background:linear-gradient(160deg,#18122B,#090A10); border:1.5px solid rgba(139, 92, 246, 0.35); overflow:hidden; position:relative; display:flex; flex-direction:column; box-shadow:0 30px 60px rgba(0,0,0,.6);}
#remoteVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0A0C12;}
.remote-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:2;}
.remote-fallback .av{width:96px;height:96px;border-radius:50%;background:linear-gradient(145deg,#2a3040,#12151d);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;overflow:hidden;}
.remote-fallback .av img{width:100%;height:100%;object-fit:cover;}
.remote-fallback p{color:var(--text-lo);font-size:13.5px;font-weight:600;}
.stage-chrome{position:relative;z-index:3;display:flex;align-items:center;gap:8px;padding:12px 14px;background:linear-gradient(to bottom, rgba(0,0,0,.45), transparent); flex-shrink:0;}
.chrome-dot{width:9px;height:9px;border-radius:50%;} .chrome-dot.live{background:var(--live-red); box-shadow:0 0 8px rgba(255,69,58,.7);}
.chrome-bar{flex:1;height:24px;border-radius:8px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);margin-left:2px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;font-weight:600;}
.chrome-bar svg{width:11px;height:11px;stroke:rgba(255,255,255,.7);fill:none;stroke-width:2;}

.connecting-overlay{position:absolute; inset:14px; border-radius:26px; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:rgba(5,7,12,.7); backdrop-filter:blur(20px); opacity:1; transition:opacity .5s ease;}
.connecting-overlay.hide{opacity:0; pointer-events:none;}
.pulse-rings{position:relative;width:84px;height:84px;display:flex;align-items:center;justify-content:center;}
.pulse-rings .core{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,var(--accent),var(--accent-2));box-shadow:0 0 20px rgba(58,169,255,.6);}
.pulse-rings .ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(58,169,255,.5);animation:vlRingExpand2 1.8s ease-out infinite;}
.pulse-rings .ring.r2{animation-delay:.6s;} .pulse-rings .ring.r3{animation-delay:1.2s;}
@keyframes vlRingExpand2{0%{transform:scale(.4);opacity:.8;}100%{transform:scale(1.6);opacity:0;}}
.connecting-text{font-size:14px;font-weight:500;color:var(--text-lo);}

.shockwave{position:absolute;inset:0;z-index:25;pointer-events:none;display:flex;align-items:center;justify-content:center;}
.shockwave span{position:absolute;width:60px;height:60px;border-radius:50%;border:2px solid var(--ok-green);animation:vlShockGo .9s ease-out forwards;}
@keyframes vlShockGo{0%{transform:scale(.3);opacity:1;}100%{transform:scale(9);opacity:0;}}
.flash-red{position:absolute;inset:0;z-index:26;pointer-events:none;background:var(--live-red);opacity:0;animation:vlFlashGo .5s ease-out forwards;}
@keyframes vlFlashGo{0%{opacity:.55;}100%{opacity:0;}}

.self-pip{position:absolute;width:104px;height:148px;top:16px;right:16px;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#1B1E27,#0E1015);border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:22;display:flex;align-items:center;justify-content:center;touch-action:none;}
#localVideo{width:100%;height:100%;object-fit:cover;display:none;}
.self-pip.cam-on #localVideo{display:block;}
.self-pip .avatar-fill{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;}
.self-pip.cam-on .avatar-fill{display:none;}
.self-pip.mirror #localVideo{transform:scaleX(-1);}
.mute-badge{position:absolute;left:6px;bottom:6px;width:22px;height:22px;border-radius:50%;background:var(--live-red);display:none;align-items:center;justify-content:center;}
.self-pip.muted .mute-badge{display:flex;}
.mute-badge svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;}

.more-menu{position:absolute;top:calc(var(--safe-top) + 52px);right:14px;width:210px;border-radius:16px;background:rgba(24,26,34,.92);backdrop-filter:blur(24px) saturate(160%);border:1px solid var(--stroke);box-shadow:0 20px 46px rgba(0,0,0,.5);overflow:hidden;z-index:30;opacity:0;transform:translateY(-8px) scale(.95);pointer-events:none;transition:opacity .2s ease, transform .2s cubic-bezier(.3,1.2,.5,1);}
.more-menu.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.menu-item{display:flex;align-items:center;gap:11px;padding:12px 14px;font-size:14.5px;font-weight:500;color:var(--text-hi);border-bottom:1px solid rgba(255,255,255,.06);}
.menu-item:last-child{border-bottom:none;}
.menu-item:active{background:rgba(255,255,255,.06);}
.menu-item svg{width:17px;height:17px;stroke:var(--text-lo);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.menu-item .mi-val{margin-left:auto;font-size:12px;color:var(--text-lo);font-weight:600;}

.action-sheet-overlay{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.5);display:none;align-items:flex-end;justify-content:center;}
.action-sheet-overlay.show{display:flex;}
.action-sheet{width:100%;max-width:480px;background:rgba(18,20,27,.97);backdrop-filter:blur(20px);border:1px solid var(--stroke);border-radius:24px 24px 0 0;padding:18px 20px calc(20px + var(--safe-bottom));max-height:72vh;display:flex;flex-direction:column;gap:14px;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.9,.4,1);}
.action-sheet-overlay.show .action-sheet{transform:translateY(0);}
.as-title{font-size:16px;font-weight:700;text-align:center;}
.modal-handle{width:36px;height:4px;border-radius:3px;background:rgba(255,255,255,.2);margin:0 auto 4px;}
.vol-row{display:flex;align-items:center;gap:12px;}
.vol-row svg{width:20px;height:20px;stroke:var(--text-hi);fill:none;stroke-width:2;flex-shrink:0;}
.vol-row input[type=range]{flex:1;accent-color:var(--accent);height:4px;}
.speaker-toggle-row{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);}
.quality-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.quality-grid button{padding:12px 4px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid var(--stroke);color:var(--text-lo);font-size:12.5px;font-weight:700;}
.quality-grid button.active{background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;}

.chat-sheet{height:60vh;}
.chat-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 0;}
.chat-bubble{max-width:75%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.4;}
.chat-bubble.me{align-self:flex-end;background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#fff;border-bottom-right-radius:5px;}
.chat-bubble.them{align-self:flex-start;background:rgba(255,255,255,.08);border-bottom-left-radius:5px;}
.chat-input-row{display:flex;gap:8px;padding-top:4px;}
.chat-input-row input{flex:1;background:rgba(255,255,255,.08);border:1px solid var(--stroke);border-radius:20px;padding:11px 16px;color:var(--text-hi);font-size:14px;outline:none;}
.chat-send{width:42px;height:42px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.chat-send svg{width:18px;height:18px;fill:#fff;}

.controls-wrap{flex-shrink:0;padding:10px 14px calc(14px + var(--safe-bottom));display:flex;justify-content:center;}
.controls{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:34px;background:rgba(255,255,255,.07);backdrop-filter:blur(24px) saturate(160%);border:1px solid var(--stroke);box-shadow:0 18px 40px rgba(0,0,0,.4);}
.ctrl-btn{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--text-hi);display:flex;align-items:center;justify-content:center;position:relative;transition:background .18s, transform .12s;flex-shrink:0;}
.ctrl-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ctrl-btn:active{transform:scale(.9);}
.ctrl-btn.off{background:#fff;color:#0A0C12;}
.ctrl-btn.end-call{width:58px;height:50px;border-radius:26px;background:var(--live-red);}
.ctrl-btn.end-call svg{width:21px;height:21px;}
.ctrl-btn.end-call:active{background:#E0362C;}
.mic-wave{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:2px;height:10px;}
.mic-wave span{width:2.5px;border-radius:2px;background:var(--ok-green);animation:vlWaveBar .9s ease-in-out infinite;}
.mic-wave span:nth-child(1){height:4px;} .mic-wave span:nth-child(2){height:9px;animation-delay:.15s;}
.mic-wave span:nth-child(3){height:6px;animation-delay:.3s;} .mic-wave span:nth-child(4){height:10px;animation-delay:.45s;}
@keyframes vlWaveBar{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1);}}

.call-mini{position:fixed;right:16px;bottom:calc(24px + var(--safe-bottom));width:66px;height:66px;border-radius:50%;z-index:250;background:linear-gradient(155deg,#1c2030,#0c0e14);border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 34px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.55);pointer-events:none;transition:opacity .38s ease, transform .38s cubic-bezier(.34,1.3,.64,1);touch-action:none;overflow:hidden;}
#vistaLlamada.minimizada .call-mini{opacity:1;transform:scale(1);pointer-events:auto;}
#miniVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
.call-mini.has-video #miniVideo{display:block;}
.call-mini .mini-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(58,169,255,.55);animation:vlRingExpand 2.2s ease-out infinite;}
.call-mini svg{width:22px;height:22px;stroke:var(--text-hi);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:2;}
.mini-dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--live-red);border:2px solid #0c0e14;z-index:3;}
.mini-timer{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:600;color:var(--text-lo);white-space:nowrap;}

#vistaLlamada .toast{position:fixed;left:50%;top:calc(var(--safe-top) + 12px);transform:translateX(-50%) translateY(-140%);background:rgba(20,22,30,.92);border:1px solid var(--stroke);color:var(--text-hi);padding:11px 18px;border-radius:30px;font-size:13px;font-weight:600;z-index:300;backdrop-filter:blur(20px);transition:transform .32s cubic-bezier(.34,1.3,.64,1);display:flex;align-items:center;gap:8px;max-width:88vw;}
#vistaLlamada .toast.show{transform:translateX(-50%) translateY(0);}
#vistaLlamada .toast svg{width:15px;height:15px;stroke:var(--ok-green);fill:none;stroke-width:2.4;flex-shrink:0;}