/* ==========================================================================
   DISEÑO DEL CENTRO DE ALERTAS (Pestañas y Tarjetas)
   ========================================================================== */

/* Pestañas horizontales (Filtros) */
.alert-filter-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #8c8c9e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 8px; /* Bordes menos redondeados que en otras áreas */
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.alert-filter-btn:hover { 
    background: rgba(255, 255, 255, 0.1); 
    color: #fff; 
}

/* El botón activo tiene borde neón verde */
.alert-filter-btn.active {
    background: rgba(0, 255, 136, 0.1);
    color: var(--neon-green);
    border-color: var(--neon-green);
    font-weight: 600;
}

/* Tarjetas de notificación */
.alert-card {
    background: #24242d; /* Gris muy oscuro, para destacar sobre el fondo */
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: transform 0.2s, border-color 0.2s;
    cursor: pointer;
}

.alert-card:hover { 
    transform: translateY(-2px); 
    border-color: rgba(255, 255, 255, 0.1); 
}