/* ============================================================
   DANGOFE OS · TALLER · EL AUDIO «POR QUÉ LO TRAJO» EN LA FICHA (prefijo tau-) · 2026-10-16 · chat de Diseño
   Lo viste taller-audio.js (DangofeOS.audioFicha.vestir). La caja es la .tal-foto--audio que ya pinta taller.js en la galería:
   ocupa el ancho completo de la fila y, en vez del reproductor del navegador, sale el botón redondo, la barra y los saltos de 10 s.
   Sin sombras; claro y Noche por [data-theme='dark'].
   ============================================================ */
.tal-foto--audio {
  --tau-az: 11, 61, 214; --tau-tinta: var(--text-primary, #0b1540); --tau-tenue: var(--text-secondary, #4a5680); --tau-borde: var(--glass-border, rgba(3, 38, 155, .12)); --tau-campo: var(--glass-bg-input, rgba(255, 255, 255, .9)); --tau-linea: rgba(10, 22, 51, .1); --tau-azul-txt: #0b3dd6;
  grid-column: 1 / -1; flex: 1 0 100%; width: 100%; max-width: 100%; aspect-ratio: auto; height: auto; min-height: 0; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: visible; background: transparent; border: 0; border-radius: 0; cursor: default;
}
.tal-foto--audio:hover { transform: none; }
[data-theme='dark'] .tal-foto--audio { --tau-linea: rgba(255, 255, 255, .12); --tau-azul-txt: #8db0ff; --tau-campo: rgba(255, 255, 255, .07); }
.tal-foto--audio audio { display: none; }
.tal-foto--audio[data-tau] .tal-foto__etq { display: none; }
.tau { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--tau-borde); background: var(--tau-campo); font-family: var(--font-family-ui, 'Plus Jakarta Sans', system-ui, sans-serif); color: var(--tau-tinta); }
.tau *, .tau *::before, .tau *::after { box-sizing: border-box; }
.tau button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tau button:focus-visible, .tau-prog:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(59, 130, 246, .35); }
.tau-play { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgb(var(--tau-az)); color: #fff; display: grid; place-items: center; padding: 0; }
.tau-play svg { width: 22px; height: 22px; }
.tau-play__b { display: none; }
.is-sonando .tau-play__a { display: none; }
.is-sonando .tau-play__b { display: grid; }
.tau-m { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tau-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tau-etq { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 800; color: var(--tau-tinta); min-width: 0; }
.tau-etq svg { width: 14px; height: 14px; color: var(--tau-azul-txt); flex: none; }
.tau-etq > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tau-t { font-size: .76rem; color: var(--tau-tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tau-prog { position: relative; height: 8px; border-radius: 999px; background: var(--tau-linea); overflow: hidden; cursor: pointer; }
.tau-prog::before { content: ''; position: absolute; inset: -8px 0; }
.tau-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: rgb(var(--tau-az)); transition: width .15s linear; }
.tau-salto { display: flex; gap: 6px; }
.tau-mini { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--tau-linea); background: transparent; color: var(--tau-tenue); display: grid; place-items: center; padding: 0; }
.tau-mini svg { width: 16px; height: 16px; }
.tau-mini small { position: absolute; bottom: -4px; right: -2px; font-size: 9px; font-weight: 800; background: var(--tau-campo); border-radius: 999px; padding: 0 3px; line-height: 1.3; }
@media (max-width: 560px) { .tau { grid-template-columns: 46px minmax(0, 1fr); } .tau-salto { grid-column: 2; justify-content: flex-end; margin-top: -4px; } }
@media (prefers-reduced-motion: reduce) { .tau-prog i { transition: none; } }