/* Lo que NO está en el prototipo y se agregó a pedido, en un archivo propio.

   Va acá y no en miniapp.css porque miniapp.css es copia byte a byte del <style> del
   prototipo y una suite lo afirma: cualquier regla que se cuele ahí rompe esa igualdad.
   Va acá y no en cascaron.css porque cascaron.css es sólo layout del teléfono.

   Separado así, "qué se agregó por encima del prototipo" es un archivo que se lee
   entero en veinte segundos, en vez de un diff contra 13750 bytes.

   Todo lo de acá usa las variables del prototipo. Ni un color nuevo. */

/* El botón de sonido. El prototipo lo tiene en la .soundbar del documento, que es
   andamio y no se porta; adentro del teléfono no había ninguno, y el sonido terminó
   colgado del interruptor de movimiento. Son dos molestias distintas: quien apaga las
   animaciones porque lo marean no está pidiendo silencio. */
.derecha{display:inline-flex;align-items:center;gap:8px;}

.son{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;cursor:pointer;line-height:1;font-size:13px;
  border:1px solid var(--line);border-radius:99px;background:var(--paper);
  color:var(--muted);
}
.son[aria-pressed="true"]{
  color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft);
}
.son:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}