<!-- ============================================================ -->
<!-- MANTENIMIENTO - Limpieza de Base de Datos -->
<!-- ============================================================ -->

<div class="glass-card rounded-2xl p-6 max-w-3xl mx-auto mt-6">
    
    <div class="flex items-start gap-5">
        <div class="w-16 h-16 shrink-0 rounded-2xl bg-red-500/10 flex items-center justify-center border border-red-500/20">
            <i class="fas fa-exclamation-triangle text-red-500 text-3xl"></i>
        </div>
        
        <div>
            <h2 class="font-sora font-bold text-white text-xl mb-2">Peligro: Limpieza de Base de Datos</h2>
            <p class="text-sm text-gray-400 mb-4 leading-relaxed">
                Esta acción vaciará por completo las tablas de <strong>Letras</strong> y <strong>Grupos de Letras</strong>, reiniciando sus contadores internos. 
                <br><br>
                <span class="text-emerald-400 font-medium">Las Empresas Proveedoras NO serán eliminadas.</span>
            </p>
            
            <div class="bg-amber-500/10 border border-amber-500/20 rounded-xl p-4 mb-6">
                <p class="text-xs text-amber-400 font-medium flex items-center gap-2">
                    <i class="fas fa-info-circle"></i>
                    Esta acción es irreversible y está diseñada únicamente para propósitos de prueba y reinicio de operaciones.
                </p>
            </div>

            <form method="POST" action="<?= BASE_URL ?>?c=mantenimiento&a=limpiarbd" onsubmit="return confirm('¿ESTÁ SEGURO DE BORRAR TODAS LAS LETRAS? Esta acción no se puede deshacer.')">
                <label class="block text-xs text-gray-400 mb-2 font-medium">
                    Para confirmar, escriba <strong>LIMPIAR_BD</strong> en el siguiente campo:
                </label>
                <div class="flex items-center gap-3">
                    <input type="text" name="confirmacion" required class="input-glass w-full max-w-xs" placeholder="Escriba aquí..." autocomplete="off">
                    
                    <button type="submit" class="px-6 py-2.5 rounded-xl text-sm font-bold bg-red-500 text-white hover:bg-red-600 transition-colors shadow-lg shadow-red-500/25 flex items-center gap-2">
                        <i class="fas fa-trash-alt"></i>
                        Ejecutar Limpieza
                    </button>
                </div>
            </form>
            
        </div>
    </div>
</div>
