.alerta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    margin-bottom: 10px;
    font-family: sans-serif;
    color: var(--text);
    min-width: 300px;
    max-width: 500px;
    animation: slideDown 0.5s ease forwards;
}

/* Animación entrada */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tipos de alertas */
.alerta-info {
    border: 1px solid rgba(6, 44, 241, 0.46);
    background-color: rgba(7, 73, 149, 0.12);
    box-shadow: 0px 0px 2px #0396ff;
    color: #0396ff;
    text-shadow: 1px 1px #00040a;
    cursor: pointer;
    transition: 0.5s;
}

.alerta-info:hover {
    background-color: rgba(7, 73, 149, 0.35);
}

.alerta-promocion {
    border: 1px solid rgba(36, 241, 6, 0.46);
    background-color: rgba(7, 149, 66, 0.12);
    box-shadow: 0px 0px 2px #259c08;
    color: #0ad406;
    text-shadow: 1px 1px #00040a;
    cursor: pointer;
    transition: 0.5s;
}

.alerta-promocion:hover {
    background-color: rgba(7, 149, 66, 0.35);
}

.alerta-evento {
    border: 1px solid rgba(6, 241, 226, 0.81);
    background-color: rgba(1, 204, 220, 0.16);
    box-shadow: 0px 0px 2px #03fff5;
    color: #03d0ff;
    text-shadow: 1px 1px #00040a;
    cursor: pointer;
    transition: 0.5s;
}

.alerta-evento:hover {
    background-color: rgba(1, 204, 220, 0.33);
}

.alerta-advertencia {
    border: 1px solid rgba(241, 142, 6, 0.81);
    background-color: rgba(220, 128, 1, 0.16);
    box-shadow: 0px 0px 2px #ffb103;
    color: #ffb103;
    text-shadow: 1px 1px #00040a;
    cursor: pointer;
    transition: 0.5s;
}

.alerta-advertencia:hover {
    background-color: rgba(220, 128, 1, 0.33);
}


/* Botones de acción */
.alerta button {
    background: transparent;
    border: none;
    color: inherit;
    font-weight: bold;
    cursor: pointer;
    margin-left: 10px;
}

.alerta button:hover {
    text-decoration: underline;
}

/* Variaciones de diseño */
.alerta-derecha { justify-content: flex-end; }
.alerta-centro { justify-content: center; }
.alerta-banner { width: 100%; border-radius: 0; }