/* ═══════════════════════════════════════════════════════════════════════════
   HEAVENSY — LA GRABADORA DE AUDIO (hvy-grabador.js)
   ═══════════════════════════════════════════════════════════════════════════
   ── BITÁCORA ──
   [v2026.10.10-1] hvy-grabador.css (NUEVO)
   2026-10-10 | La grabadora de Conversaciones y del Chat interno (vista previa aprobada por Alberto el
     10-10). La barra de escribir (.hvyg-host) esconde lo suyo y muestra la grabadora (.hvyg): la papelera,
     el reloj con el máximo, la línea de tiempo con la onda (canvas) y sus marcas, el aviso de lo que
     queda (.hvyg-chip), escuchar, pausar o seguir y enviar. El borde de la barra pasa a lila, a ámbar al
     acercarse el máximo y a rojo en los últimos segundos. En una barra angosta (celular, panel
     estrecho) se esconden «de 5:00», las marcas con su hora y el largo total al escuchar
     (@container). La nota (.hvyg-nota) va bajo la barra.
*/
:root {
  --hvyg-lila: #9961FF; --hvyg-lila-osc: #7c3aed; --hvyg-borde: #d9c8ff; --hvyg-fondo: #fcfaff;
  --hvyg-tinta: #1E2A5E; --hvyg-gris: #6b7280; --hvyg-gris-claro: #9ca3af;
  --hvyg-ambar: #d97706; --hvyg-ambar-osc: #b45309; --hvyg-ambar-suave: #fff7e6; --hvyg-ambar-borde: #fcd9a0;
  --hvyg-rojo: #dc2626; --hvyg-rojo-suave: #fef2f2; --hvyg-rojo-borde: #fecaca;
}

/* La barra de escribir mientras graba: solo la grabadora a la vista */
.hvyg-host > :not(.hvyg) { display: none !important; }
.hvyg-host { border-color: var(--hvyg-borde) !important; background: var(--hvyg-fondo) !important; }
.hvyg-host.hvyg-host--aviso { border-color: var(--hvyg-ambar-borde) !important; background: #fffdf8 !important; }
.hvyg-host.hvyg-host--final { border-color: var(--hvyg-rojo-borde) !important; background: #fffafa !important; }

.hvyg {
  container-type: inline-size; container-name: hvyg;
  display: flex; align-items: center; gap: 6px; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 40px;
  font-family: 'DM Sans', system-ui, sans-serif; outline: none;
}
.hvyg-btn {
  width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--hvyg-gris);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; font-size: 13px;
  transition: background .15s, color .15s;
}
.hvyg-btn:hover:not(:disabled) { background: #f1ecff; color: var(--hvyg-lila); }
.hvyg-btn:disabled { opacity: .35; cursor: default; }
.hvyg-btn:focus-visible, .hvyg-enviar:focus-visible { outline: 2px solid var(--hvyg-lila); outline-offset: 2px; }
.hvyg-basura:hover:not(:disabled) { background: var(--hvyg-rojo-suave); color: var(--hvyg-rojo); }
.hvyg-basura--confirma, .hvyg-basura--confirma:hover { background: var(--hvyg-rojo) !important; color: #fff !important; }
.hvyg-play { background: var(--hvyg-lila); color: #fff; }
.hvyg-play:hover:not(:disabled) { background: var(--hvyg-lila-osc); color: #fff; }
.hvyg-enviar {
  width: 34px; height: 34px; border: 0; border-radius: 50%; flex-shrink: 0; cursor: pointer; color: #fff; font-size: 13px;
  background: linear-gradient(90deg, #a855f7, #9333ea); box-shadow: 0 2px 6px rgba(147, 51, 234, .35);
  display: inline-flex; align-items: center; justify-content: center;
}
.hvyg-enviar:active:not(:disabled) { transform: scale(.95); }
.hvyg-enviar:disabled { opacity: .55; cursor: default; }

/* El reloj: lo que lleva y el máximo. El punto late con la voz (--hvyg-nivel, 0..1). */
.hvyg-reloj { display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; }
.hvyg-punto {
  --hvyg-nivel: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--hvyg-rojo); align-self: center;
  box-shadow: 0 0 0 calc(var(--hvyg-nivel) * 7px) rgba(220, 38, 38, .18); transition: box-shadow .08s linear;
}
.hvyg-t { font: 600 15px 'Poppins', sans-serif; font-variant-numeric: tabular-nums; color: var(--hvyg-tinta); min-width: 34px; }
.hvyg-de { font-size: 11px; color: var(--hvyg-gris-claro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hvyg--aviso .hvyg-t { color: var(--hvyg-ambar); }
.hvyg--final .hvyg-t { color: var(--hvyg-rojo); }

/* La línea de tiempo (grabando) y la onda (escuchando) */
.hvyg-caja { position: relative; flex: 1 1 auto; min-width: 40px; display: flex; }
.hvyg-linea { position: relative; flex: 1; min-width: 0; height: 40px; touch-action: none; }
.hvyg-linea canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hvyg-marcas { position: absolute; left: 0; right: 0; bottom: -1px; height: 10px; pointer-events: none; }
.hvyg-marca { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 8.5px; line-height: 1; color: #b5b9cc; font-variant-numeric: tabular-nums; }
.hvyg-chip {
  position: absolute; right: 0; bottom: calc(100% + 4px); display: none; align-items: center; gap: 5px; z-index: 2;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(30, 25, 80, .12);
}
.hvyg--aviso .hvyg-chip { display: inline-flex; background: var(--hvyg-ambar-suave); color: var(--hvyg-ambar-osc); border: 1px solid var(--hvyg-ambar-borde); }
.hvyg--final .hvyg-chip { display: inline-flex; background: var(--hvyg-rojo-suave); color: var(--hvyg-rojo); border: 1px solid var(--hvyg-rojo-borde); animation: hvygEmpuje .5s ease; }
@keyframes hvygEmpuje { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.hvyg-trev { font: 600 12.5px 'Poppins', sans-serif; font-variant-numeric: tabular-nums; color: var(--hvyg-tinta); flex-shrink: 0; min-width: 40px; text-align: right; white-space: nowrap; }
.hvyg-trev span { color: var(--hvyg-gris-claro); font-weight: 500; }

/* Qué se ve en cada estado */
.hvyg-play, .hvyg-trev, .hvyg-seguir { display: none; }
.hvyg--pausa .hvyg-reloj, .hvyg--fijo .hvyg-reloj, .hvyg--pausa .hvyg-pausa, .hvyg--fijo .hvyg-pausa,
.hvyg--pausa .hvyg-marcas, .hvyg--fijo .hvyg-marcas { display: none; }
.hvyg--pausa .hvyg-play, .hvyg--fijo .hvyg-play, .hvyg--pausa .hvyg-seguir, .hvyg--fijo .hvyg-seguir { display: inline-flex; }
.hvyg--pausa .hvyg-trev, .hvyg--fijo .hvyg-trev { display: block; }
.hvyg--pausa .hvyg-linea, .hvyg--fijo .hvyg-linea { cursor: pointer; }
.hvyg--pausa .hvyg-punto, .hvyg--fijo .hvyg-punto { animation: none; }
.hvyg--pidiendo .hvyg-pausa, .hvyg--pidiendo .hvyg-punto { opacity: .4; }
.hvyg--grabando .hvyg-punto { animation: hvygLate 1.1s infinite; }
@keyframes hvygLate { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hvyg--enviando .hvyg-btn { opacity: .4; pointer-events: none; }

/* La nota bajo la barra */
.hvyg-nota { display: flex; align-items: flex-start; gap: 7px; margin: 6px 6px 0; font: 12px/1.4 'DM Sans', system-ui, sans-serif; color: var(--hvyg-gris); }
.hvyg-nota[hidden] { display: none; }
.hvyg-nota i { margin-top: 2px; }
.hvyg-nota--silencio { color: var(--hvyg-ambar-osc); }
.hvyg-nota--max { color: var(--hvyg-lila-osc); }
.hvyg-nota--descartar { color: var(--hvyg-rojo); font-weight: 600; }
.hvyg-vivo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barra angosta */
@container hvyg (max-width: 430px) {
  .hvyg-de, .hvyg-marca { display: none; }
  .hvyg-trev span { display: none; }
  .hvyg { gap: 4px; }
}
@container hvyg (max-width: 300px) {
  .hvyg-t { font-size: 13px; min-width: 30px; }
  .hvyg-btn { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .hvyg--grabando .hvyg-punto, .hvyg--final .hvyg-chip { animation: none; }
}