/* ═══ AMBIENTE SONORO — control compartido ══════════════════════════
   Mismo componente que el del hub (arcos, fijo abajo a la derecha),
   extraído para las páginas a las que se llega DESDE el hub: registro
   y sus hermanas, Biblioteca, funnel-quiz y COMPRENDE.

   Decisión de Diego (2026-09-22): el Laboratorio y Respirando conservan
   su `♪` en la navbar. No unificar. Esta hoja es para las páginas que
   NO tenían control todavía.

   Todas las páginas destino son oscuras (medido: ritual #1C1A18,
   Biblioteca #2A2621, COMPRENDE #15130F), así que un solo tratamiento
   sirve. El acento se toma del token que exista en cada paleta —
   `--cobre-organico` en COMPRENDE/Respirando, dorado en el resto.
   ═══════════════════════════════════════════════════════════════════ */
.ambient {
  --amb-accent: var(--cobre-organico, #C9A84C);
  --amb-quiet: rgba(242, 237, 228, 0.42);
  --amb-hover: rgba(242, 237, 228, 0.9);
  --amb-cadencia: var(--breath, var(--breath-dur, 6s));

  position: fixed;
  right: max(0.9rem, env(safe-area-inset-right));
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 44px;                       /* objetivo táctil mínimo */
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 18, 16, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--amb-quiet);
  cursor: pointer;
  transition: color 400ms ease, background-color 400ms ease;
}
.ambient__mark { width: 22px; height: 22px; overflow: visible; }
.ambient__mark :is(circle, path) {
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
}
.ambient__core { fill: currentColor; stroke: none; }

.ambient__arc   { opacity: 0; transition: opacity 400ms ease; }
.ambient__slash { opacity: 1; transition: opacity 300ms ease; }
.ambient[aria-pressed="true"] { color: var(--amb-accent); }
.ambient[aria-pressed="true"] .ambient__arc   { opacity: 1; }
.ambient[aria-pressed="true"] .ambient__slash { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .ambient:hover { color: var(--amb-hover); background: rgba(20, 18, 16, 0.85); }
  .ambient[aria-pressed="true"]:hover { color: var(--amb-accent); }
}

/* Los arcos respiran a la cadencia de la página mientras suena. */
@media (prefers-reduced-motion: no-preference) {
  .ambient[aria-pressed="true"] .ambient__arc {
    animation: ambientArcoRespira var(--amb-cadencia) cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .ambient[aria-pressed="true"] .ambient__arc--far { animation-delay: -0.35s; }
}
@keyframes ambientArcoRespira {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}