<div id="flash-message" class="flash-alert">
    </div>

<style>
/* Estilos Base */
.flash-alert {
    position: fixed;
    top: 25px;
    right: 25px;
    min-width: 250px;
    padding: 16px 20px;
    border-radius: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 10000;
    
    /* Animación */
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    opacity: 0;
    transform: translateX(100px); /* Aparece desde la derecha */
}

/* Color Info (Azul) */
.alert-info {
    background-color: #0dcaf0;
    border-left: 6px solid #0aa2c0;
    color: #000; /* Texto oscuro para mejor contraste en azul claro */
}

/* Color Warning (Amarillo/Naranja) */
.alert-warning {
    background-color: #ffc107;
    border-left: 6px solid #d3a006;
    color: #000;
}

/* Clase para activar la visualización */
.flash-visible {
    opacity: 1;
    transform: translateX(0);
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const urlParams = new URLSearchParams(window.location.search);
    const status = urlParams.get('status'); // Puede ser 'info' o 'warning'
    const flash = document.getElementById('flash-message');

    if (status === 'info' || status === 'warning') {
        
        // 1. Configurar contenido y color según el parámetro
        if (status === 'info') {
            flash.textContent = "ℹ️ Información: Su sesión caducará pronto.";
            flash.classList.add('alert-info');
        } else if (status === 'warning') {
            flash.textContent = "⚠️ Advertencia: Revisa los datos ingresados.";
            flash.classList.add('alert-warning');
        }

        // 2. Mostrar con un pequeño delay para que se note la entrada
        setTimeout(() => {
            flash.classList.add('flash-visible');
        }, 100);

        // 3. Ocultar en 3 segundos
        setTimeout(() => {
            flash.classList.remove('flash-visible');
            
            // Limpiar la URL sin recargar la página
            window.history.replaceState({}, document.title, window.location.pathname);
        }, 3100);
    }
});
</script>