/* ════════════════════════════════════════════════════════════════════════════ pin-musica.css — la pastilla de música ambiente ---------------------------------------------------------------------------- Elección del usuario entre cinco propuestas (29-09-2026): una pastilla FIJA abajo a la derecha. Se eligió justamente por estar fuera del flujo: es la única de las cinco que se dibuja igual en las tres puertas y adentro de Beneficios sin tocar el layout de ninguna — y la única que sobrevive al cambio de pestaña en `entrar.html`, donde el pie entero se oculta al mirar los comercios adheridos. 🔴 HOJA PROPIA, NO `styles.css` NI `pin-puerta.css`. Son cuatro páginas las que la cargan y ninguna hoja compartida las cubre a las cuatro: `pin-puerta.css` la cargan las tres puertas pero no Beneficios, y `styles.css` la cargan 14 páginas que no tienen música. Escrito en una de ellas, esto le movería la huella a pantallas que no cambiaron. 🔴 NADA DE `backdrop-filter`. Regla de oro del sistema de diseño, heredada del panel de Datos: sobre una tarjeta cuesta caro en repintado. La propuesta que se mostró lo tenía y se sacó acá — el fondo va sólido. 🔴 SÓLO DE 1024 PARA ARRIBA. El pedido es «solo en pc». La hoja lo esconde y además `pin-musica.js` ni siquiera se monta en un teléfono, así que los archivos de audio no se bajan: son dos mitades del mismo candado y hacen falta las dos (alguien puede achicar la ventana de una computadora). ════════════════════════════════════════════════════════════════════════════ */ .pin-mus { position: fixed; z-index: 30; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; background: #fff; border: 1px solid rgba(0, 114, 66, .16); box-shadow: 0 2px 10px rgba(22, 40, 30, .10); color: #4a5b52; font-family: var(--pin-font, 'Fira Sans', system-ui, sans-serif); /* Que no tape el número de versión: ése va centrado abajo y sin puntero. */ } /* El botón de play/pausa: el único elemento con peso de color de la pastilla. */ .pin-mus-b { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: #007242; color: #fff; cursor: pointer; } .pin-mus-b:hover { background: #00623a; } /* Anterior y siguiente: sin fondo, para que el play siga siendo el que manda. El área de clic es de 24 px aunque el ícono mida 13. */ .pin-mus-p { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: none; color: #6b7d73; cursor: pointer; } .pin-mus-p:hover { background: rgba(0, 114, 66, .10); color: #007242; } .pin-mus-b:focus-visible, .pin-mus-p:focus-visible { outline: 2px solid #00925a; outline-offset: 2px; } .pin-mus-v { -webkit-appearance: none; appearance: none; width: 62px; height: 3px; margin: 0 2px; border-radius: 999px; background: rgba(0, 114, 66, .42); cursor: pointer; } .pin-mus-v::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; border: 0; border-radius: 999px; background: #007242; } .pin-mus-v::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 999px; background: #007242; } .pin-mus-v:focus-visible { outline: 2px solid #00925a; outline-offset: 4px; } /* ── El nombre del tema: un cartelito ARRIBA, que no mueve nada ──────────── ⚰️ Antes crecia DENTRO de la pastilla y la empujaba hacia la izquierda. Con el puntero encima —justo cuando uno va a apretar algo— los botones se corrian solos y habia que volver a buscarlos. Reporte del usuario: «es molesto, porque hay que nuevamente desplazarse a la izquierda para seleccionar una accion del reproductor». 🔴 Ahora va `position: absolute` FUERA del flujo de la pastilla: el reproductor mide siempre lo mismo y los botones no se mueven nunca. 🔴 Y `pointer-events: none`, para que el cartel no se coma un clic que iba dirigido a otra cosa mientras esta a la vista. ⚠️ Va ARRIBA y no abajo: abajo chocaria con el numero de version, que esta anclado al pie de la ventana. */ .pin-mus-tit { position: absolute; right: 0; bottom: calc(100% + 7px); pointer-events: none; white-space: nowrap; padding: 4px 11px; border-radius: 999px; background: #fff; border: 1px solid rgba(0, 114, 66, .16); box-shadow: 0 2px 10px rgba(22, 40, 30, .10); font-size: 11.5px; line-height: 1.3; color: #4a5b52; opacity: 0; transition: opacity .22s ease; } /* Sólo al cambiar de tema. NADA de `:hover`: pasar el puntero por encima es justo lo que uno hace para apretar un boton, no para leer el titulo. */ .pin-mus-abierta .pin-mus-tit { opacity: 1; } /* El