/* Posiciona la alerta en la esquina superior derecha */
.alert {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    min-width: 350px;
    margin: 0.5rem;
    /* Se aumenta el padding inferior para dar espacio a la barra de progreso */
    padding: 1rem 1.5rem 2rem 1.5rem;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    /* La alerta se desvanece tras 4 segundos */
    animation: fadeOutAlert 4s forwards;
}

/* Botón “x” para cerrar manualmente */
.closebtn {
    margin-left: 15px;
    color: #fff;
    font-weight: bold;
    float: right;
    cursor: pointer;
}

/* Tipos de alertas */

/* Success (verde) */
.alert-success {
    background-color: #4CAF50;
}

/* Warning (amarillo/naranja) */
.alert-warning {
    background-color: #ff9800;
    color: #000;
}

/* Error (rojo) */
.alert-error {
    background-color: #f44336;
}

/* Keyframes para la animación de desvanecimiento de la alerta */
@keyframes fadeOutAlert {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* Barra de progreso: se ubica al final de la alerta */
.alert-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    /* Animación lineal que reduce el ancho de 100% a 0% en 4 segundos */
    animation: progressBar 4s linear forwards;
}

/* Keyframes para la barra de progreso */
@keyframes progressBar {
    from { width: 100%; }
    to { width: 0%; }
}