diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 6c5e02f..cd8b953 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -17,6 +17,7 @@
--warning: #d7ba7d;
--sidebar-w: 290px;
--topbar-h: 52px;
+ --audio-bar-h: 64px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -589,6 +590,63 @@ a:hover { text-decoration: underline; }
accent-color: var(--accent);
}
+/* ============================================================
+ AUDIO BAR – barra fija inferior
+ ============================================================ */
+.audio-bar-fixed {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ min-height: var(--audio-bar-h);
+ background: var(--bg-alt);
+ border-top: 3px solid var(--accent);
+ box-shadow: 0 -2px 12px rgba(0,0,0,.4);
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: .6rem 1rem;
+ padding: .6rem 1.5rem;
+ transition: transform .3s ease;
+}
+.audio-bar-fixed.audio-bar-hidden {
+ transform: translateY(110%);
+ pointer-events: none;
+}
+.audio-bar-icon {
+ color: var(--accent);
+ font-size: 1rem;
+ flex-shrink: 0;
+}
+.audio-bar-title {
+ font-size: .75rem;
+ font-weight: 700;
+ color: var(--text-muted);
+ text-transform: uppercase;
+ letter-spacing: .06em;
+ flex-shrink: 0;
+}
+.audio-bar-controls {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: .5rem;
+ flex: 1;
+}
+.audio-bar-item {
+ display: flex;
+ align-items: center;
+ gap: .5rem;
+}
+.audio-bar-fixed audio {
+ height: 32px;
+ accent-color: var(--accent);
+}
+body.has-audio-bar {
+ padding-bottom: var(--audio-bar-h);
+}
+
/* ============================================================
CUESTIONARIOS
============================================================ */
diff --git a/src/main/resources/static/js/curso.js b/src/main/resources/static/js/curso.js
index 99d5809..39c5895 100644
--- a/src/main/resources/static/js/curso.js
+++ b/src/main/resources/static/js/curso.js
@@ -115,20 +115,6 @@ function renderMarkdown(md, tema, bloque, bloqueId, temaNum) {
const html = marked.parse(md);
- const audioHtml = (tema.audios && tema.audios.length)
- ? `
-
-
Escuchar este tema
- ${tema.audios.map(a => `
-
- ${tema.audios.length > 1 ? `
${a.label}` : ''}
-
-
`).join('')}
-
`
- : '';
-
const leyesHtml = (tema.leyes && tema.leyes.length)
? `
@@ -142,7 +128,6 @@ function renderMarkdown(md, tema, bloque, bloqueId, temaNum) {
: '';
document.getElementById('lesson-content').innerHTML = `
- ${audioHtml}
${leyesHtml}
${html}
+
+
+