<div id="tab-customization" class="tab-content">
    <div class="card">
        <h2>🎨 Configuración del Overlay</h2>
        <p style="color: #888;">Personaliza los sonidos de las alertas. Puedes usar rutas locales (ej: <code>/sounds/raid.mp3</code>) o URLs externas.</p>
        
        <form action="/config/overlay" method="POST">
            <div style="display: grid; grid-template-columns: 1fr; gap: 1.5rem;">
                
                <!-- Control de Posición -->
                <div style="background: #1a1a1a; padding: 15px; border-radius: 8px; border: 1px solid #333;">
                    <label style="color: #D4AF37; font-weight: bold;">📏 Posición Vertical (Desde arriba)</label>
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <input type="range" name="vertical_position" min="0" max="800" value="<%= overlayConfig.vertical_position || 50 %>" oninput="document.getElementById('v-pos-val').innerText = this.value + 'px'" style="flex: 1;">
                        <span id="v-pos-val" style="font-family: monospace; color: #D4AF37; font-size: 1.2rem; min-width: 60px;"><%= overlayConfig.vertical_position || 50 %>px</span>
                    </div>
                    <small style="color: #666;">Ajusta qué tan abajo aparecen las alertas en la pantalla.</small>
                </div>
                
                <% const sounds = [
                    { id: 'follow_sound', label: '🛡️ Sonido Follow', val: overlayConfig.follow_sound },
                    { id: 'sub_sound', label: '🌟 Sonido Suscripción', val: overlayConfig.sub_sound },
                    { id: 'resub_sound', label: '🔥 Sonido Re-Suscripción', val: overlayConfig.resub_sound },
                    { id: 'raid_sound', label: '⚔️ Sonido Raid', val: overlayConfig.raid_sound },
                    { id: 'bits_sound', label: '💎 Sonido Bits', val: overlayConfig.bits_sound }
                ]; %>

                <% sounds.forEach(s => { 
                    const filename = s.id.replace('_sound', '');
                %>
                    <div style="background: #1a1a1a; padding: 15px; border-radius: 8px; border: 1px solid #333;">
                        <label style="color: #D4AF37; font-weight: bold;"><%= s.label %></label>
                        <div style="display: flex; gap: 10px;">
                            <input type="text" name="<%= s.id %>" id="input-<%= s.id %>" value="<%= s.val %>" placeholder="/sounds/archivo.mp3" style="margin:0;">
                            <button type="button" onclick="previewSound('<%= s.id %>')" class="btn-save" style="width: auto; background: #333; border: 1px solid #D4AF37; color: #D4AF37;">🔊</button>
                                    </div>
                        <div style="margin-top: 8px; font-size: 0.85rem;">
                            <span style="color: #666;">Presets: </span>
                            <span onclick="setPreset('<%= s.id %>', '/sounds/<%= filename %>.mp3')" style="color: #D4AF37; cursor: pointer; margin-right: 10px; text-decoration: underline;">📂 Local (MP3)</span>
                            <span onclick="setPreset('<%= s.id %>', 'https://cdn.streamelements.com/static/alertbox/default.ogg')" style="color: #D4AF37; cursor: pointer; text-decoration: underline;">🔔 Clásico (StreamElements)</span>
                        </div>
                    </div>
                <% }); %>

            </div>
            <button type="submit" class="btn-save" style="margin-top: 2rem;">💾 Guardar Sonidos</button>
        </form>
    </div>
</div>