/* Vista Escuchar: visor de cámara a pantalla completa. */
#view-escuchar{position:fixed;inset:0;z-index:30;background:#000}
.stage{position:absolute;inset:0;overflow:hidden;background:#000;touch-action:none}
.stage video,.stage canvas.layer{position:absolute;inset:0;width:100%;height:100%}
#cam{object-fit:contain}
#imgv{object-fit:contain}
.vtop{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));
  background:linear-gradient(#000a,#0000);color:#fff}
.vtop .chip{background:#0009;color:#fff;border-color:#fff4}
.vtop .chip.ok{color:#7be3ae;border-color:#7be3ae88}
.vtop .chip.warn{color:#ffcf85;border-color:#ffcf8588}
.iconbtn{width:44px;height:44px;border-radius:50%;border:1px solid #fff3;background:#0008;color:#fff;display:grid;place-items:center;cursor:pointer}
.iconbtn svg{width:22px;height:22px}
.iconbtn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.vbot{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 14px) max(16px,env(safe-area-inset-left,0px));
  background:linear-gradient(#0000,#000c 40%);color:#fff;display:grid;gap:12px}
.vbot .seg{background:#0008;border-color:#fff3;max-width:300px;margin:0 auto;width:100%}
.vbot .seg button{color:#fffc}
.vbot .seg button[aria-pressed="true"]{color:var(--accent-ink)}
.vrow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.playbtn{width:68px;height:68px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer}
.playbtn svg{width:30px;height:30px}
.progress{height:3px;background:#fff3;border-radius:3px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--accent)}
#fx{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 150px);height:60px;width:100%;z-index:2;pointer-events:none}
.msg{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:min(86%,420px);background:#000d;color:#fff;border:1px solid #fff3;border-radius:16px;padding:18px;text-align:center}
.msg p{margin:0 0 12px}