/* =============================================================
   CONTENEDOR GLOBAL DE ALERTAS
   Este contenedor es fijo y apilara los alerts de abajo hacia arriba.
============================================================= */
#alert-container {
    position: fixed;
    bottom: 20px; /* Separación del borde inferior */
    right: 20px; /* Separación del borde derecho */
    z-index: 9000; /* Asegura que esté por encima de casi todo */
    width: 90%; /* Ancho en móviles */
    max-width: 400px; /* Ancho máximo en escritorio */
    pointer-events: none; /* Permite clicks a través del contenedor vacío */
    /* Configuración para apilar los alerts */
    display: flex;
    flex-direction: column-reverse; /* Apila de abajo hacia arriba */
    gap: 10px;
}

/* En pantallas grandes, limitar el ancho */
@media (min-width: 600px) {
    #alert-container {
        width: 100%;
    }
}


/* =============================================================
   ESTILO DE ALERTA INDIVIDUAL (Ajustado)
============================================================= */

.alert {
    /* Resetear el pointer-events para que el alert pueda ser clickeado (ej. para cerrarlo) */
    pointer-events: auto;
    /* Estilos de caja y tipografía base */
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 500;
    /* Flexbox y sombra mejorada */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Sombra para destacarse */
    /* Animación de entrada */
    opacity: 0;
    transform: translateY(10px); /* Cambiado de -5px a +10px para animar desde abajo */
    animation: slideIn 0.3s ease forwards;
}

    .alert button {
        background: none;
        border: none;
        font-size: 1.1em;
        cursor: pointer;
        margin-left: 8px;
        color: inherit; /* Hereda el color del texto de la alerta */
        opacity: 0.7;
        transition: opacity 0.2s;
    }

        .alert button:hover {
            opacity: 1;
        }

/* =============================================================
   ANIMACIONES
============================================================= */

/* Animación de entrada: SlideIn */
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* (Opcional) Animación de salida: FadeOut */
.alert-closing {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(10px); /* Se desliza hacia abajo al desaparecer */
    }
}


/* =============================================================
   TIPOS DE ALERTA (Ajustados para mejor contraste en fondo oscuro)
   He oscurecido los colores de fondo para que no sean demasiado brillantes
   y he mantenido los colores de texto para el contraste.
============================================================= */

/* Info (Azul) */
.alert.info {
    background: #0d4b55; /* Fondo más oscuro */
    color: #92d4df; /* Texto más claro */
    border-left: 4px solid #17a2b8;
}

/* Success (Verde) */
.alert.success {
    background: #145c27; /* Fondo más oscuro */
    color: #90ee90; /* Texto más claro */
    border-left: 4px solid #28a745;
}

/* Danger (Rojo) */
.alert.danger {
    background: #6a1a20; /* Fondo más oscuro */
    color: #f5b7bc; /* Texto más claro */
    border-left: 4px solid #dc3545;
}

/* Warning (Amarillo) */
.alert.warning {
    background: #7a5f02; /* Fondo más oscuro */
    color: #ffe08a; /* Texto más claro */
    border-left: 4px solid #ffc107;
}