/* grabar.css — 09/10 · 🔴 Grabar / ⬆️ Subir la llamada en Caller y la ventanita de «Grabando» */
.btn.rec{background:#C62828;color:#fff}
.btn.rec.on{background:#111;color:#fff;box-shadow:0 0 0 3px rgba(198,40,40,.35)}
.grab-nota{font-size:13px;color:var(--muted);font-weight:600;align-self:center}
.grab-barra p{margin:6px 0 8px}
.grab-barra details{margin:6px 0 4px}
.grab-barra summary{font-weight:800;cursor:pointer}
.grab-lista:empty{display:none}
.grab-lista{margin-top:10px;display:grid;gap:8px}
.grab-item{background:var(--panel2);border:1.5px solid var(--linea);border-radius:14px;padding:10px 12px}
.grab-meta{font-size:14px;font-weight:600;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.grab-item audio{width:100%;margin-top:8px;height:40px}
.grab-item video{width:100%;max-height:220px;margin-top:8px;border-radius:10px;background:#000}
.grab-borrar{margin-left:auto;border:none;background:none;font-size:16px;cursor:pointer;padding:2px 4px}

/* La ventanita: fija abajo, por encima de todo, y no se va cuando el pipeline se refresca o cambiás de pestaña */
.grab-vent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:440px;margin:0 auto;z-index:300;
  background:#111;color:#fff;border:2px solid var(--oro);border-radius:20px;padding:12px 14px;box-shadow:0 18px 40px -12px rgba(0,0,0,.55);font-size:16px}
.grab-vent[hidden]{display:none}
.gv-cab{display:flex;align-items:center;gap:10px}
.gv-tit{font-size:18px;font-weight:800}
.gv-reloj{margin-left:auto;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.gv-min{background:none;border:1.5px solid rgba(255,255,255,.4);color:#fff;border-radius:999px;width:32px;height:32px;font-size:16px;cursor:pointer}
.gv-punto{width:14px;height:14px;border-radius:50%;background:var(--oro);flex:none}
.grab-vent[data-modo="grabando"] .gv-punto{background:#FF3B30;animation:gv-late 1.1s ease-in-out infinite}
.grab-vent[data-modo="listo"] .gv-punto{background:#34C759}
.grab-vent[data-modo="error"] .gv-punto{background:#FF9500}
.grab-vent[data-modo="subiendo"] .gv-punto,.grab-vent[data-modo="prep"] .gv-punto{animation:gv-late 1.6s ease-in-out infinite}
@keyframes gv-late{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.gv-quien{font-weight:700;margin-top:6px;color:var(--oro-marca)}
.gv-nivel{height:8px;border-radius:999px;background:rgba(255,255,255,.15);margin-top:10px;overflow:hidden}
.gv-nivel i{display:block;height:100%;width:0;background:linear-gradient(90deg,#34C759,#FFD600 70%,#FF3B30);transition:width .12s linear}
.grab-vent:not([data-modo="grabando"]) .gv-nivel{display:none}
.gv-estado{font-size:14px;font-weight:600;line-height:1.4;margin-top:8px;color:rgba(255,255,255,.85)}
.gv-estado b{color:#fff}
.gv-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gv-acc:empty{display:none}
.gv-acc .btn{flex:1;justify-content:center}
.gv-acc .btn.linea{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.gv-stop{background:#FF3B30;color:#fff;font-size:17px;padding:14px 18px}
/* achicada: queda una pastillita con el punto y el reloj */
.grab-vent.chica{left:auto;right:12px;width:auto;padding:8px 12px;border-radius:999px}
.grab-vent.chica .gv-cuerpo,.grab-vent.chica .gv-tit{display:none}
.grab-vent.chica .gv-reloj{font-size:18px;margin-left:0}
.grab-vent.chica .gv-min{transform:rotate(180deg)}
body.grab-on #toast{bottom:calc(190px + env(safe-area-inset-bottom))}
body.grab-on #app{padding-bottom:180px}