/* Sonido original, "Usar este sonido" (2026-11-01, mockups/videos-sonido-original.html): la línea y el disco del feed, la página del sonido, la cámara con el sonido arriba y la fila
   del editor. Un solo acento, íconos de trazo, nada de emoji. Los colores cuelgan de piel.css. */

/* ── Feed: la línea del pie y el disco de la columna ── */
.vd-cancion { display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 8px 0 0; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-shadow: inherit; }
.vd-cancion .trazo { width: 15px; height: 15px; flex: none; }
.vd-cancion span { overflow: hidden; text-overflow: ellipsis; }
.vd-cancion.apagada { opacity: .75; cursor: default; }
.vd-cancion.apagada span { text-decoration: line-through; text-decoration-thickness: 1px; }
.vd-col .vd-disco { min-width: 56px; }
.vd-disco .disco { width: 44px; height: 44px; border-radius: 50%; border: 5px solid #2A2724; background: #3A3632; display: grid; place-items: center; color: #fff; animation: sn-gira 4s linear infinite; animation-play-state: paused; }
.vd-item.sonando .vd-disco .disco { animation-play-state: running; }
.vd-disco .disco i { width: 28px; height: 28px; border-radius: 50%; background: var(--acc); color: var(--acc-ink, #fff); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 500; }
.vd-disco .disco .trazo { width: 14px; height: 14px; stroke: currentColor; }
.vd-disco.apagado { cursor: default; }
.vd-disco.apagado .disco { animation: none; opacity: .55; }
.vd-disco.apagado .disco i { background: #6B675F; }
@keyframes sn-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vd-disco .disco { animation: none; } }
.ng-video .vd-cancion { margin-top: 4px; }

/* ── La página ── */
.sn-panel { position: fixed; inset: 0; z-index: 1400; display: none; flex-direction: column; background: var(--bg, #F1EEE8); color: var(--ink, #1F1D1A); }
.sn-panel.abierto { display: flex; }
.sn-cargando { flex: 1; display: grid; place-items: center; }
.sn-barra { display: flex; justify-content: space-between; align-items: center; padding: calc(8px + var(--sa-arriba, 0px)) 8px 4px; flex: none; }
.sn-barra > span { display: flex; gap: 2px; }
.sn-ico { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 50%; }
.sn-cuerpo { flex: 1; overflow-y: auto; padding: 4px 16px calc(16px + var(--sa-abajo, 0px)); max-width: 640px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.sn-cab { display: flex; gap: 14px; }
.sn-cab h3 { font-weight: 500; font-size: 20px; line-height: 1.2; margin: 0; }
.sn-cab p { color: var(--muted, #6B675F); font-size: 14px; margin: 4px 0 0; overflow-wrap: anywhere; }
.sn-cab small { display: block; color: var(--muted, #6B675F); font-size: 13px; margin-top: 8px; }
.sn-cab small b { color: var(--ink, #1F1D1A); font-weight: 500; }
.sn-creado { display: flex !important; align-items: center; gap: 6px; margin-top: 6px !important; }
.sn-creado .trazo { width: 15px; height: 15px; flex: none; }
.sn-tapa { position: relative; flex: none; width: 104px; height: 104px; border: 0; padding: 0; border-radius: 18px; overflow: hidden; display: grid; place-items: center; background: var(--acc); color: var(--acc-ink, #fff); font: inherit; font-size: 30px; font-weight: 500; cursor: pointer; }
.sn-tapa:disabled { background: var(--muted2, #A19C94); cursor: default; }
.sn-tapa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sn-tapa .play { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; }
.sn-acciones { display: flex; gap: 10px; margin-top: 14px; }
.sn-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; flex: 1; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.sn-btn.acc { background: var(--acc); color: var(--acc-ink, #fff); }
.sn-btn.sec { background: var(--field, #F4F1EB); color: var(--ink, #1F1D1A); }
.sn-btn.ico { flex: 0 0 46px; padding: 0; }
.sn-btn.ico[aria-pressed="true"] .trazo { fill: currentColor; }
.sn-btn.off { background: var(--field, #F4F1EB); color: var(--muted2, #A19C94); cursor: default; }
.sn-btn.ancho { width: 100%; margin-top: 12px; }
.sn-aviso { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--surf2, #F4F1EB); font-size: 13px; color: var(--muted, #6B675F); line-height: 1.4; }
.sn-aviso b { color: var(--ink, #1F1D1A); font-weight: 500; }
.sn-aviso .trazo { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.sn-pest { display: flex; gap: 18px; margin-top: 16px; border-bottom: 1px solid var(--line, rgba(31,29,26,.08)); }
.sn-pest button { padding: 0 0 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted, #6B675F); font: inherit; font-size: 14px; cursor: pointer; }
.sn-pest button.on { color: var(--ink, #1F1D1A); font-weight: 500; border-bottom-color: var(--ink, #1F1D1A); }
.sn-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 12px -16px 0; }
.sn-celda { position: relative; aspect-ratio: 9 / 16; border: 0; padding: 0; overflow: hidden; background: #14130F; cursor: pointer; }
.sn-celda img, .sn-celda video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sn-celda small { position: absolute; left: 6px; bottom: 6px; color: #fff; font-size: 12px; display: flex; gap: 3px; align-items: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.sn-celda small .trazo { width: 12px; height: 12px; }
.sn-celda em { position: absolute; left: 6px; top: 6px; font-style: normal; font-size: 12px; color: var(--acc-ink, #fff); background: var(--acc); border-radius: 6px; padding: 1px 6px; }
.sn-vacio { grid-column: 1 / -1; padding: 28px 16px; text-align: center; color: var(--muted, #6B675F); font-size: 14px; }
.sn-mas { grid-column: 1 / -1; width: calc(100% - 32px); margin: 12px 16px 0; }

/* ── La cámara con el sonido arriba (grabadora-video.js) ── */
.grab-sonido[hidden], .grab-lados[hidden] { display: none; }
.grab-sonido { position: absolute; left: 50%; top: calc(76px + var(--sa-arriba, 0px)); transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 6px; max-width: 76%; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; }
.grab-sonido .trazo { width: 15px; height: 15px; flex: none; }
.grab-sonido span { overflow: hidden; text-overflow: ellipsis; }
.grab-lados { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 320px; margin: 0 auto 10px; }
.grab-lado { display: grid; justify-items: center; gap: 4px; border: 0; background: none; color: #fff; font: inherit; font-size: 12px; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.grab-lado .trazo { width: 26px; height: 26px; }
.grab-tramo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 16px 16px calc(16px + var(--sa-abajo, 0px)); border-radius: 22px 22px 0 0; background: #1F1D1A; color: #fff; }
.grab-tramo h4 { margin: 0; font-weight: 500; font-size: 15px; }
.grab-tramo p { margin: 4px 0 10px; font-size: 13px; color: rgba(255,255,255,.7); }
.grab-tramo input { width: 100%; accent-color: var(--acc); }
.grab-tramo button { width: 100%; min-height: 46px; margin-top: 12px; border: 0; border-radius: 999px; background: var(--acc); color: var(--acc-ink, #fff); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }

/* ── La fila del sonido prestado en el editor y los guardados (editor-sonido.js) ── */
.sn-vol { flex-wrap: wrap; }
.sn-vol > span:first-child { flex: 1 0 100%; width: auto; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-vol input { flex: 1; min-width: 0; }
.ed-guardados { margin: 0 0 8px; }
.ed-guardados button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 13px; text-align: left; margin-bottom: 6px; cursor: pointer; }
.ed-guardados button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-guardados p { font-size: 13px; color: rgba(255,255,255,.62); margin: 0 0 8px; }
.ed-guardados .trazo { width: 16px; height: 16px; flex: none; }

/* ── Detalles del botón central ── */
.cr-prestado { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 8px; padding: 5px 10px; border-radius: 999px; background: var(--surf2, #F4F1EB); font-size: 13px; }
.cr-prestado .trazo { width: 15px; height: 15px; flex: none; }
.cr-prestado span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Biblioteca de sonidos (2026-11-04, SONIDOS-BIBLIOTECA.md, mockups/sonidos-biblioteca.html): la hoja "Elegir un sonido" (js/sonidos-hoja.js) ──
   Panel propio por encima del editor (z 1600) y de la grabadora (z 3000). */
.sh-panel { position: fixed; inset: 0; z-index: 3200; display: none; }
.sh-panel.abierto { display: block; }
.sh-velo { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.sh-hoja { position: absolute; left: 0; right: 0; bottom: 0; top: max(64px, 12dvh); max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; border-radius: 28px 28px 0 0; background: var(--surf, #fff); color: var(--ink, #1F1D1A); box-shadow: 0 -20px 50px rgba(0,0,0,.25); padding: 10px 16px calc(12px + var(--sa-abajo, 0px)); box-sizing: border-box; }
.sh-asa { width: 40px; height: 4px; border-radius: 2px; background: rgba(31,29,26,.18); margin: 0 auto 10px; flex: none; }
.sh-cab { display: flex; align-items: center; justify-content: center; position: relative; flex: none; }
.sh-cab h3 { margin: 0; font-weight: 500; font-size: 16px; }
.sh-x { position: absolute; right: -8px; top: -8px; width: 40px; height: 40px; border: 0; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.sh-buscar { display: flex; align-items: center; gap: 10px; height: 44px; border-radius: 999px; background: var(--field, #F4F1EB); padding: 0 14px; margin-top: 12px; color: var(--muted, #6B675F); flex: none; }
.sh-buscar .trazo { width: 18px; height: 18px; flex: none; }
.sh-buscar input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink, #1F1D1A); outline: none; }
.sh-pest { display: flex; gap: 22px; margin-top: 14px; border-bottom: 1px solid var(--line, rgba(31,29,26,.08)); flex: none; }
.sh-pest button { padding: 0 0 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted, #6B675F); font: inherit; font-size: 15px; cursor: pointer; }
.sh-pest button.on { color: var(--ink, #1F1D1A); font-weight: 500; border-bottom-color: var(--ink, #1F1D1A); }
.sh-lista { flex: 1; overflow-y: auto; margin: 4px -8px 0; padding: 0 8px; -webkit-overflow-scrolling: touch; }
.sh-titulo { margin: 14px 0 2px; font-size: 13px; color: var(--muted, #6B675F); }
.sh-fila { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; }
.sh-fila.sonando { background: var(--surf2, #F4F1EB); }
.sh-tapa { position: relative; flex: none; width: 48px; height: 48px; border: 0; padding: 0; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--acc); color: var(--acc-ink, #fff); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.sh-tapa.nota { background: var(--ink, #1F1D1A); }
.sh-tapa.nota > .trazo { width: 22px; height: 22px; }
.sh-tapa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-tapa .play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.35); color: #fff; opacity: 0; transition: opacity .15s; }
.sh-tapa .play .trazo { width: 20px; height: 20px; }
.sh-fila.sonando .sh-tapa .play, .sh-tapa:hover .play, .sh-tapa:focus-visible .play { opacity: 1; }
.sh-tapa:disabled { opacity: .5; cursor: default; }
.sh-txt { flex: 1; min-width: 0; }
.sh-txt b { display: block; font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-txt small { display: block; color: var(--muted, #6B675F); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.sh-lic { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--surf2, #F4F1EB); color: var(--muted, #6B675F); font-style: normal; font-size: 12px; vertical-align: 1px; }
.sh-lic.propia { background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); }
.sh-usar { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ink, #1F1D1A); color: var(--bg, #fff); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.sh-guardar { flex: none; width: 36px; height: 36px; border: 0; background: none; color: var(--muted2, #A19C94); display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.sh-guardar[aria-pressed="true"] { color: var(--ink, #1F1D1A); }
.sh-guardar[aria-pressed="true"] .trazo { fill: currentColor; }
.sh-vacio { padding: 28px 12px; text-align: center; color: var(--muted, #6B675F); font-size: 14px; }
.sh-vacio.chico { padding: 10px 8px; text-align: left; font-size: 13px; }
.sh-pie { flex: none; }
.sh-licencia, .sh-aviso { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line, rgba(31,29,26,.08)); font-size: 12px; color: var(--muted, #6B675F); line-height: 1.4; }
.sh-licencia .trazo { width: 15px; height: 15px; flex: none; color: var(--ok, #1E9A5E); margin-top: 1px; }
.sh-aviso .trazo { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.sh-licencia a { color: var(--ink, #1F1D1A); font-weight: 500; }

/* La píldora de la cámara cuando todavía no hay sonido: un botón punteado "Agregar sonido" (grabadora-video.js) */
.grab-sonido.boton { border: 1.5px dashed rgba(255,255,255,.8); background: rgba(0,0,0,.3); font: inherit; cursor: pointer; }
.grab-sonido.boton .trazo { color: #fff; }

/* La tarjeta de crédito en la página de un sonido de la biblioteca (js/sonido.js) */
.sn-credito { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surf, #fff); box-shadow: 0 10px 30px rgba(31,29,26,.08); font-size: 13px; line-height: 1.5; color: var(--ink, #1F1D1A); }
.sn-credito .lic { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: var(--surf2, #F4F1EB); color: var(--muted, #6B675F); font-size: 12px; margin-bottom: 6px; }
.sn-credito .lic .trazo { width: 13px; height: 13px; color: var(--ok, #1E9A5E); }
.sn-credito p { margin: 0; overflow-wrap: anywhere; }
.sn-credito small { display: block; color: var(--muted, #6B675F); font-size: 12px; margin-top: 4px; }
.sn-credito .enlaces { display: flex; gap: 8px; margin-top: 10px; }
.sn-credito .enlaces a { flex: 1; display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 42px; border-radius: 999px; background: var(--field, #F4F1EB); color: var(--ink, #1F1D1A); font-size: 14px; font-weight: 500; text-decoration: none; }
.sn-credito .enlaces a .trazo { width: 16px; height: 16px; }
.sn-tapa.nota { background: var(--ink, #1F1D1A); }
.sn-tapa.nota > .trazo { width: 36px; height: 36px; opacity: .9; }
.ed-aviso .ed-enlace { color: rgba(255,255,255,.85); font-weight: 500; }